How to Deploy React App on Netlify Using Github?

React App is a web or mobile application that is built using the React library of JavaScript. It helps users create interactive, single-page, and dynamic applications. These applications are built using HTML, CSS, and JavaScript. Deployment of a React app can be done via GitHub, Netlify, or any other deployment platform. GitHub has its gh-pages, where the application can be built, start, and deployed. By deploying your project on such servers, you get a public URL for your project, that can be used to get your website or project.  

Netlify is one of the easiest deployment platforms to use. It has both features: 

1. Using a GitHub repo
2. Simple Drag and Drop (the build folder). 

This makes Netlify very straightforward. To deploy a React App on Netlify using GitHub, the following steps must be followed:  

Steps to Deploy a React App on Netlify using GitHub  

Step 1: Create a React Application

At the very first, you need a react application. To create a react application, there are some prerequisites for your local system. There must be Node.js and npm installed in your system. If Node.js is not installed in your system, you can download it and install it from this link. Also, to install npm, you can run the following command on your terminal –

npm install npm@latest -g
  

Now open your VS Code or some other IDE, Open the terminal, and run the following command to create a React App-

npx create-react-app My-Project

Navigate to your project directory, using the following command –

cd My-Project

And, start the React application by using the following command –

npm start

Step 2: Install the Required Dependencies 

First of all, open your code in Visual Studio Code or in any other IDE. 

Run the following command, in order to install the Netlify CLI package as a development dependency in your React project. 

npm install netlify-cli -g

This allows users to deploy the react app directly from the terminal. (This is not a required step)

Step 3: Create a Build directory

Using the following command, we will now create a build for our production.

npm run build

This creates the main directory as ‘build‘. This Build folder contains all the required files that we need to deploy our application. Now, we are ready to push this code into our GitHub repository. 

Step 4: Create a GitHub repository

Now, You have a react app on your local system. Open your GitHub account and create a new repository for your project. Name the repository anything you want, for example, My project. Push the code to the repository using Git Bash. For this, you need to have a good understanding of version controls.  

Our project is uploaded on Github, We’ll now move forward towards deploying our project: There are various development platforms like Heruku, Vercel, Netlify, Github pages, Digital Ocean, etc. But one of the most popular and easy-to-use platforms is Netlify. We’ll be using Netlify to deploy our project in this article. 

Step 5: Setting up Netlify

Create a Netlify account (if you have not any). Now, connect your GitHub account with Netlify. Authorize Netlify to use GitHub to access your repositories. 

Follow these steps further: 

1. Go to the ‘Sites’ section from the header of the Netlify website’s dashboard. 
2. Now, click on ‘Add new site’.
3. Select ‘import an existing project‘, This will redirect you to a page where it will ask you to connect a Git provider. 
4. Select your Git provider, if our things are the same so far, choose GitHub. 
5. This will take you to a page, where all your GitHub repositories are listed.
6. Choose your project repository.
7. Now, there will be some settings,
      a) Do not change the pre-filled details.
      b) Leave the Base Directory empty.
      c) In the Build Command, type “npm run build“.
      d) In the Publish Directory, type “build“.
8. And, finally, click on the Deploy site.
9. It’ll redirect you to the deployment page, you can check the logs here, and see how things are working step by step.
10. If the deployment fails for some reason, you’ll get the error message. Remove the error and try deploying it again. 

By the time, The react app is deployed. Once the deployment gets completed, you get a public URL for your project with the domain ‘netlify.com‘. 

Step 6: Other ways to deploy 

Using the GitHub repository is not the only way to deploy a React App on Netlify, this can also be done by – 

• Drag and Drop method
• Using Netlify CLI (Command Line Interface)

Drag and Drop method is the easiest way to deploy your react app. All you need to do is, after step 3, Once you have to create a build directory, drag this ‘build‘ folder, and drop it to the dashboard of Netlify. And start deploying. 

The other way is to use Netlify CLI. After performing Step 2, Navigate to your working directory and run the following command to deploy the application. 

netlify deploy

These were all the ways, a React application can be deployed on Netlify. 

Conclusion

Deployment of your project makes it available for other users on the web. Deploying it on Netlify makes it easier for developers to make their React app public. By connecting Netlify with your GitHub, you can configure the settings and deploy your application. The app becomes available on the web as soon as the deployment gets completed. Netlify has a continuous development environment, so it becomes easier to update the app whensoever some changes are made to the app and pushed to GitHub. Thus, Deploying the React app on Netlify using GitHub is actually very easy and pretty straightforward. With the above-given steps, one can easily create and publish one React app on Netlify.

FAQs

Q1: Is Netlify the only deployment platform for deploying front-end applications?

Answer:

No, There are several other deployment platforms like Vercel, Heruku, GitHub Pages, Digital Ocean, etc. where one can deploy one React Application (Front-end Applications). 

Q2: What is the easiest way to deploy the React App on Netlify?

Answer:

The easiest way to deploy the react app is to simply Drag and Drop, defined in the last step of the deployment steps above. In this all you have to do is, after step 2, once you have to create a build directory, just drag this ‘build’ folder and drop it to the dashboard of Netlify. And start deploying. 

Q3: What are the other version controls like GitHub which keeps track of and manages the software code?

Answer:

There are various version controls like GitLab, BigBucket, Azure DevOps, etc.