DEV Community

Cover image for Deploying React App from Github to Netlify
Ekunola Ezekiel
Ekunola Ezekiel

Posted on • Updated on • Originally published at blog.ezekielekunola.com

Deploying React App from Github to Netlify

I will be doing a walk-through process of deploying a React app from Github to Netlify.

If you have a project structure where the react app is NOT nested in a sub-directory like in the example shown below

You can use the following steps to deploy:

  • Push your code to Github
  • Connect Github account to your Netlify account
  • Select the project to deploy
  • Deploy project

In cases where the react app is in a nested directory like the example shown below

Add a netlify.toml file to the root of your project, and add the configuration below to the file.

[build]
  command = "npm run build"
  publish="path-to-react-app/build"
  base = "path-to-react-app"
Enter fullscreen mode Exit fullscreen mode

React Router

If you've made use of react-router in your project, on redirecting and reloading to a new route, you may run into issue where Netlify would throw an error ("page not found") as shown in the example beloww

You can add the following code to your netlify.toml file.

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
Enter fullscreen mode Exit fullscreen mode

Once added, push the changes to Github. Netlify should automatically deploy the changes, if not, deploy the changes manually. Once deployed, your application should not throw errors, as shown below.

Note: netlify.toml is a configuration file where you can specify how Netlify should build/run your application. A lot can be accomplished with the netlify.toml file. Find out more about the netlify.toml file here.

Environment Variables

If you've made use of environment variables in your project, you can also add them to Netlify by following the steps shown in the image below

Conclusion

From the foregoing, we have seen and been able to demonstrate that hosting a react application through Github on Netlify is pretty simple and seamless, hence can be done in little or no time.

If you have any questions or feedback about this article, feel free to reach out.
Thanks for reading.

Top comments (6)

Collapse
 
laylar profile image
Layla

I searched repeatedly for exactly this information, and I'm so glad I finally found your post! So grateful that netlify.toml files are a thing.

Collapse
 
easybuoy profile image
Ekunola Ezekiel

I'm glad you found the article helpful, and yes, netlify.toml files are awesome!

Collapse
 
alb_isma profile image
ismailalabou

path-to-react-app ??
can u explain it more by given a example !!

Collapse
 
vuongtran21 profile image
vuongtran

I'm using a proxy in development mode, how can I deploy it to production with Netlify?

Collapse
 
tolgahanuzun profile image
Tolgahan ÜZÜN

We use this service. But the build time has recently extended slightly. Sometimes doesn't build. In yet a nice service. :)

Collapse
 
adebiyial profile image
Adebiyi Adedotun

Great!