Deploy create-react-app with Netlify

Jan 19, 2020

How to continuously deploy a ReactJS application made with create-react-app with Netlify (via Github).

** This post assumes you are already familiar with deploying sites on Netlify.

Normally, deploying with Netlify from a Github repo is no problem! Assuming the src files it needs are in the root directory, you don't need to do anything extra. However, today I ran into a little snag. For a Lambda School project, I had forked and cloned a repo that only had the README file and a subdirectory in the root. The files that Netlify would be looking for weren't in the root, so every time I tried to deploy, it would fail. So if you're like me and you used create-react-app in your project, but it put all of your files in a subdirectory, then this is the tutorial for you!

toml file

You need to create a netlify.toml file in the root of your project. You can read more about it here. Inside of the netlify.toml, paste the following code:

netlify.tomlTOML
[build]
command = "npm run build"
publish="/build"
base = "YOUR-APP-NAME"

The base value is going to be whatever you named your app when you ran create-react-app. This should be the name of that subdirectory that's in the root of your project.

And that's it! Easy-peasy. Then you can deploy like normal with Netlify. The "Basic Build settings" should be autofilled with the command and publish values you wrote in your netlify.toml file.

If they're not there, add them manually. Or if you missed that step, you can go into your Build & Deploy section of your Site Settings and edit them there.

404 errors with routing

EXTRA: If you used a Router in your app, Netlify will throw 404 errors when you try to navigate to other links. To fix those redirects, simply add the following to the bottom of your netlify.toml file:

netlify.tomlTOML
[[redirects]]
from = "/*"
to = "/YOUR-BASE-URL"
status = 200

Edit the to value to match whatever your base url is and all of your redirects will work like a charm! For me, I like to keep a plain base slug that is simply a / forward slash. But it is also pretty common to see /index.html as a base. Just make sure you change it to whatever your base is that all of your Routes are adapting to!