How to Publish React App to Netlify with Github Repo (With Screenshots)

Have you developed an app using React and wondering how to publish it on Netlify? Perhaps, you have created a Github repo for your project and want to deploy on Netlify automatically? We, that’s exactly what we are going to demonstrate in this guide.

Actually, it is preferable to deploy your ReactJS application on Github before publishing on Netlify. Why? because it makes it easy to manage your app code and share the progress with others. Otherwise, no one would be able to see what’s going on behind your app and how you went through all the steps to build it.

Now, for this guide we are going to take a step-by-step approach. We are going to create a new React app, create a new Github repository, deploy the app on Github and then publish it on Netlify. As simple as that.

1. Step-1: Create a new React app

   First of all, we are going to create a new react app and name it “test-app”. We are going to use the create-react-app which is a complete package that lets you quickly spin-up a react app without any manual build configuration.

   To create a new app, in your VS Code terminal, type: (You can change test-app to any name you want)

   npx create-react-app test-app

   Once the app is created, you can verify that the app is working by running this:

   npm start

   This should run the app and you will be able to see the app in your browser with the address: http://localhost:3000/

   One of the great features of create-react-app is that it automatically creates a git repository for your project. If you browse to the folder where you app is located, you should be able to see a .git folder.

2. Step-2 Make a commit to your Github Repo

   It’s just an optional step, just to get you familiar with how Git works. Basically, you whenever you make a significant change in your app code, you should commit it to your Github Repo. This keeps track of your previous progress and enables you to revert to an earlier point if you choose to.

   For this project, we will simply create a “Hello World” app with nothing in it and commit the change to our Git repo.

   This is what our app looks like now:

   

   Now we commit the change to our github repo, we need to run these two commands:

   git add .
   git commit -m "Changed the text to Hello World"

   Once that’s done, we are ready to push our react app to Github.

3. Step-3: Remove “build” path from .gitignore

   This is a very important step because the build path is crucial for our app deployment on Netlify. Basically, we need to create a production build of our app so that it can be published as a static site. Otherwise, it will take a lot of time to load the components.

   We need to run this command:

   npm run build

   This command creates a production-ready build for our react app. It bundles all the javascript in one file and includes all the static assets including images, stylesheet etc.

   Once you run this command, you will notice that a new folder called build is created in your project directory.

   Now, the next step is crucial. You need to remove the build path from .gitignore file. Otherwise, the build folder will not be part of the repository that gets pushed to Github.

   To do that, simply open the .gitignore file and remove the line with /build.

   

   Now, we need to commit this change to our git repo with these commands:

   git add .
   git commit -m "removed build path from gitignore"

4. Step-4: Push the Repo to Github

   Now, finally we can push our project to Github. To do that, sign in to Github.

   Once you have logged into Github, create a new repository. Fill in the details and click Create New Repository.

   

   1. Now run these commands in your VS Code terminal:

      git branch -M main
      git remote add origin https://github.com/your-account/test-app.git
      git push -u origin main

   This should push your project to the new github repo. You can verify this by going to the Repositories page and click on the repo you created.

   

   Ensure that the build folder is present in your Github repo.

5. Step-5: Publish the Project on Netlify

   This is the step that you read this whole tutorial for. We are now going to publish our react app to Netlify using out Github repo.

If you don’t have a Netlify account, create it HERE.

Next, in the Sites window, click on Add New Site and select Import an Existing Project.

You should be able to see the window shown below. Click on Github and authorize Netlify to your Github account.

In  the next window, you will be asked to pick the specific repository from Github that you want to publish. Search for your repo and select it.

In the next step, make sure you have the same Site settings shown in the image below. If you do this properly, you site should be able to deploy exactly the way we want. Click on the Deploy Site button.

In the next window, you should be able to see the status of the Site deployment. It should say that Site Deployment in Progress. If the status does not change for a few minutes try to refresh the page to see the current status.

Finally, you should see the same status as shown in the image above, Your site is deployed.

Congratulations! see how easy that was. I always publish my web apps from Github because its more convenient and allows me to have more control over my code repository.

When you click on the URL shown on the window, you should see your React app live in the browser. You can also customize the Domain name of your web app by clicking on Domain Settings.

And that’s it. Hope you enjoyed this tutorial. If you have any questions please don’t hesitate to ask in the comment section below.