React app, page not found error

Hi! I’m new to coding. I’m trying to deploy an existing React app to Netlify. I’m getting a Page Not Found error. URL is jillwesthaus.com. It is also under amazing-joliot-71ed7e.

I added a netlify.toml file and added this:
[build]
command = “npm run build”
publish=“path-to-react-app/build”
base = “path-to-react-app”
[[redirects]]
from = “/*”
to = “/index.html”
status = 200

Still getting page not found.

Here is the deploy log: 12:46:12 PM: Build ready to start

12:46:14 PM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6

12:46:14 PM: build-image tag: v3.4.1

12:46:14 PM: buildbot version: fcbc7a79f7372e5995cf02954ef19fc48d20c871

12:46:14 PM: Fetching cached dependencies

12:46:14 PM: Starting to download cache of 13.5MB

12:46:14 PM: Finished downloading cache in 278.234668ms

12:46:14 PM: Starting to extract cache

12:46:15 PM: Finished extracting cache in 818.449461ms

12:46:15 PM: Finished fetching cache in 1.101113763s

12:46:15 PM: Starting to prepare the repo for build

12:46:15 PM: Preparing Git Reference refs/heads/master

12:46:17 PM: Failing build: Failed to parse configuration

12:46:17 PM: Failed during stage ‘Reading and parsing configuration files’:
Base directory does not exist: /opt/build/repo/path-to-react-app

: exit status 1

12:46:17 PM: Finished processing build request in 3.756120432s

Any ideas? Thanks!

Hi there,

Did you see this guide yet? This is the best place to start for “Page Not Found” issues.

If you are still seeing issues after following the troubleshooting steps in this guide, please let us know!

Hi. I’m not going to have an index.html in the root of my site, because this is a React app. The HTML file is in the Public folder. I tried to resolve this with the netlify.toml file but this did not work.

hi there, can you show us a screenshot of your build settings page please?

hey there, that’s not actually your build settings, those look like this:

but from your build log (what you screenshotted, in the future, a full build log pasted is more helpful) i can glean that your settings likely aren’t quite right. You may not be telling us to be looking in the directory for your entry point file, whatever that is, usually index.html which loads all the js for react.

OK, I found my build settings. I’m still confused about the index.html file, since that is in the public folder for React and not the root folder. Thanks!

can you try setting the publish directory to /public and see if that helps? that is where our servers will set the entry point for your app.

Hi, I’m back. I changed the Publish directory to /public and it still will not deploy. I am getting the same error messages as above. Please advise, thank you.

Your also missing a build command. Try something like ‘npm run build’ or whatever CRA uses to make a production build.

Right now when netlify is running your not actually making a build of your project.

I tried npm run build, it is still not deploying. I’m getting an error message on my deploy log:

9:33:34 AM: Failed during stage ‘Reading and parsing configuration files’:
Base directory does not exist: /opt/build/repo/path-to-react-app

I have a build folder but not an opt folder. I’m new at this and trying to figure it out. Thanks.

hey Jill, let me try and walk through this with you!

So the big mismatch that’s preventing this from working is understanding how netlify’s build environment and the requirements of your project fit together.

Here is a simplified run through of what we do to build your site!

After you push to github, we clone your repo and one of the first things we (netlify’s robots) do is take a look at your package.json file to see which dependencies (packages) are listed there for your project to be built and run successfully. The package.json also contains a listing of commands that looks a bit like this (may vary, more on that in a sec)

  "scripts": {
    "dev": "run-s clean && run-s lint:* && run-s dev:*",
    "dev:hugo": "hugo -d ../dist -s site --buildDrafts --buildFuture",
    "dev:postcss": "postcss src/css/*.css -d dist",
    "dev:webpack": "webpack --config webpack.config.js --mode development",
    "build": "run-s build-branch",
    "upload-index": "node upload-index.js",
[... and so on...]
  },

the above is just an example, everyone’s looks a bit different depending on the unique requirements of your project. What they all have in common though is that in this scripts section, you can see a key/value pair of a name: command.

Basically, if you tell us to run “build” in the above example, we will actually execute “run-s build-branch”. We do this so that as the requirements of projects change, the actually-executed-build-command can change but the instruction “build” doesn’t have to.

Why is this beneficial? Well, because the command build is actually something you have to write in the UI:

And they have to match. We do this in order to make our build system as flexible as possible for basically any static site generator or build pipeline or even sites that don’t use either.

Would the above build settings work with the package.json snippet i pasted in above? No - there is no build command defined here and my site needs one. If i wrote “toaster” in the build command settings, would it work? No - it needs to match what is defined in the package.json, in this case it is: “npm run build”. You can read that line as follows:

“Hey npm!”
“Yeah?”
“Run the command called build?”
“Sure! I know how to do that as it is defined in my package.json!”
“Cool!”

and then it goes and does it.

Now, in order to actually find the right files, sometimes we need to play around with the publish and the base directory.

The base is indeed the base, so, if your package.json isn’t at root level, we’ll need to switch into the directory that contains it, first. Then we run the stuff, and if we are building something, we’ll output it into the publish dir. If both are blank, well, then we just work from the project root which is whatever is living in the most top level of the git repo you have connected.

Sometimes we don’t build anything - that’s another reason why the build dir might be blank (and there may be no package.json etc). Why is that? Well, not everyone is creating a site that needs building at deploy time - static sites that are just html for example. And our build system is flexible enough to cater to that too.

So, in short: your command for building needs to be whatever is written in your package.json, and whatever that is needs to be suitable for the kind of project you are trying to build. This is why there isn’t a “just write this” catch all answer for every person.

Can you post your package.json and a screenshot of your build settings and we can try and figure out what these commands need to be if you can’t get it to work after reading this?

Perry, thank you so much for all the info! I tried changing my build command to match the build line in my package.json. It’s still not deploying. With the package.json, I have a screen shot that shows the scripts and also where this package.json is in the repo, is it in the right place? And also I’m attaching the build settings. Please advise, thank you so much!

hi jill, no problem. Can i ask why you are trying to tell our bots to “cd client”?

If your files are all in the directory “client”, the best approach would be to set that as the base directory.

Looking at your git repo here:

You might be making things harder than it needs to be by having two package-lock and package.json files (i can explain what the difference between those is also).

If i were you, i’d restructure your repo a bit, and i think your package.json is a bit borked. Let’s reset.

  1. move the all the stuff out of “client” - up one directory, to the root.
  2. Make sure you have one package.json.
  3. make a new dummy app with create-react-app and copy what that project’s package.json generates under “scripts”. You can then trash the rest of the dummy app probably.
  4. add those instead of the scripts section in your portfolio project.
  5. Make sure your app runs locally and is working correctly, the command for that is probably npm start. If any dependencies are missing make sure they are added and saved to the file.
  6. commit and push everything - especially the package-lock file (which saves a working local configuration and ensures the thing we pull together on the server mirrors your local working configuration exactly)
  7. probably a good idea to clear cache and redeploy so we get all fresh packages
  8. change your build settings in the netlify UI to “npm run build” and your publish dir to “build”. That’s where create react app places generated files by default, i believe.
  9. x your fingers and you should have a project that works now!

If it doesn’t work, let’s keep troubleshooting. I promise its only tricky the first time or two and then it’ll feel more comfortable. We can definitely get this app working, i promise!

Thanks! I’m going to work on it now and see what I can get done. Will follow up if I still have problems!

1 Like