** 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!
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:
[build]command = "npm run build"publish="/build"base = "YOUR-APP-NAME"
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
publish values you wrote in your
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
[[redirects]]from = "/*"to = "/YOUR-BASE-URL"status = 200
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!