Software and Tech Archives - Squaregigs https://squaregigs.com/category/software-tech/ Connecting Skills and Jobs Thu, 22 Dec 2022 20:20:52 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.1 https://i0.wp.com/squaregigs.com/wp-content/uploads/2019/05/cropped-favicon.png?fit=32%2C32&ssl=1 Software and Tech Archives - Squaregigs https://squaregigs.com/category/software-tech/ 32 32 214852211 How to Deploy React App on Netlify Using GitHub https://squaregigs.com/how-to-deploy-react-app-on-netlify-using-github/ Thu, 22 Dec 2022 19:57:43 +0000 https://squaregigs.com/?p=2473 Introduction All set with building an application but not sure about deploying it? We know the feeling of being so close yet stuck. But you don’t have to worry about it! What are we here for? We have got a tutorial on how to deploy React app on Netlify using Github. Haven’t tried it yet? Leave it....

The post How to Deploy React App on Netlify Using GitHub appeared first on Squaregigs.

]]>
Introduction

All set with building an application but not sure about deploying it? We know the feeling of being so close yet stuck. But you don’t have to worry about it! What are we here for?

We have got a tutorial on how to deploy React app on Netlify using Github. Haven’t tried it yet? Leave it to us! Just follow this step-by-step guide and start implementing it with us.

Why Netlify?

Before starting our tutorial on how to deploy react app on netlify using GitHub. Here are a few advantages of using netlify.

  • Deploys the application within seconds
  • Easy and straightforward
  • Provides continuous deployment which means the website will be updated immediately whenever a new commit is made
  • The website never goes down
  • Offers easy rollbacks at a single click
  • Provides a quick preview

Now, let’s get started with the steps.

Steps: Deploy React App on Netlify using Github

Follow these steps to deploy React app on Netlify using Github.

Create a React Application

Use the below commands to create a reactJS application.

Copy Text

npx create-react-app netlify-deployment-demo
cd netlify-deployment-demo

Run your application by using the below command.

Copy Text

npm start

Once you create the demo app upload your application on Github.

Login to Netlify Account

Visit Netlify and log in to your account using Github as shown in the below image.

Login to Netlify Account

For authorizing Netflify with the help of GitHub click on Authorize Netlify.

Authorize Netlify

After successful authorization, you will be redirected to the deployment page as shown in the below screenshot. You can deploy the app directly from Git, using templates, or manually uploading. Click on Import from Git button.

Click on Import from Git button

Import Project from GitHub

To import an existing project the first step is to Connect to Git Provider.

The next step is to Pick a Repository. Choose the GitHub repository for deploying it.

Quick Read:

React Table Tutorial

Pick a Repository

After selecting the repository, please set the Site Settings. As shown below, fill in the information as required. Select the branch (here master branch) from the dropdown menu that you want to deploy. Use the build command ‘npm run build’ and the public directory as build (which is created using the build command). Click on the Deploy Site button.

Note: You can change this setting as per your requirement.

set the Site Settings

After clicking on the Button Deploy Site, your site will be deployed and the link is generated by Netlify.

Deploy Site Netlify demo

So, this was it! Easy and straightforward, isn’t it? Start building your React application and deploy it on Netlify in a few steps.

The post How to Deploy React App on Netlify Using GitHub appeared first on Squaregigs.

]]>
2473