Trying to deploy a React site on Netlify--all the react pages are 404

Working on https://master--refcode.netlify.app/ which will eventually just be refcode.org.

Locally, I am able to succeed with the Netlify CLI by running:

netlify build
npm run build
serve -s build

When I do that, I’m able to see on the local server my React pages correctly. But I can’t get it to work in the deployment. Here are my deployment settings: (actually, I have tried it a few other ways as well)

Repository github.com/team-refcode/refcode.org
Base directory Not set
Build command npm run build
Publish directory build
Deploy log visibility Logs are public
Builds Active

And here is the deploy output, ending in a friendly “Site is live :sparkles:”, however when I try to navigate to a react page, e.g. Refcode Community it gives me a 404.

5:25:37 PM: Build ready to start

5:25:38 PM: build-image version: 8e315e54bc4032a32e73290be556cde4f8348c12

5:25:38 PM: build-image tag: v2.8.2

5:25:38 PM: buildbot version: 76af94f42647b2019c5925a515cc8332b4883b85

5:25:38 PM: Fetching cached dependencies

5:25:39 PM: Failed to fetch cache, continuing with build

5:25:39 PM: Starting to prepare the repo for build

5:25:39 PM: No cached dependencies found. Cloning fresh repo

5:25:39 PM: git clone GitHub - team-refcode/refcode.org: The official Refcode website codebase

5:25:43 PM: Preparing Git Reference refs/heads/prod

5:25:43 PM: Starting build script

5:25:43 PM: Installing dependencies

5:25:44 PM: Downloading and installing node v10.24.1…

5:25:45 PM: Downloading https://nodejs.org/dist/v10.24.1/node-v10.24.1-linux-x64.tar.xz

5:25:45 PM: #####

5:25:45 PM: 7.5%

5:25:45 PM: ###################################

5:25:45 PM: ##################################### 100.0%

5:25:45 PM: Computing checksum with sha256sum

5:25:45 PM: Checksums matched!

5:25:47 PM: Now using node v10.24.1 (npm v6.14.12)

5:25:47 PM: Attempting ruby version 2.6.2, read from environment

5:25:49 PM: Using ruby version 2.6.2

5:25:49 PM: Using PHP version 5.6

5:25:49 PM: Started restoring cached node modules

5:25:49 PM: Finished restoring cached node modules

5:25:49 PM: Installing NPM modules using NPM version 6.14.12

5:26:18 PM: > core-js@2.6.12 postinstall /opt/build/repo/node_modules/babel-runtime/node_modules/core-js

5:26:18 PM: > node -e “try{require(’./postinstall’)}catch(e){}”

5:26:18 PM: Thank you for using core-js ( GitHub - zloirock/core-js: Standard Library ) for polyfilling JavaScript standard library!

5:26:18 PM: The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:

5:26:18 PM: > core-js - Open Collective

5:26:18 PM: > Denis Pushkarev is creating core-js | Patreon

5:26:18 PM: Also, the author of core-js ( zloirock (Denis Pushkarev) · GitHub ) is looking for a good job -)

5:26:18 PM: > core-js@3.8.3 postinstall /opt/build/repo/node_modules/core-js

5:26:18 PM: > node -e “try{require(’./postinstall’)}catch(e){}”

5:26:18 PM: > core-js-pure@3.8.3 postinstall /opt/build/repo/node_modules/core-js-pure

5:26:18 PM: > node -e “try{require(’./postinstall’)}catch(e){}”

5:26:18 PM: > ejs@2.7.4 postinstall /opt/build/repo/node_modules/ejs

5:26:18 PM: > node ./postinstall.js

5:26:18 PM: Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

5:26:20 PM: npm

5:26:20 PM: WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):

5:26:20 PM: npm WARN notsup

5:26:20 PM: SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})

5:26:20 PM: npm

5:26:20 PM: WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):

5:26:20 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})

5:26:20 PM: npm WARN

5:26:20 PM: optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.1 (node_modules/fsevents):

5:26:20 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.1: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})

5:26:20 PM: added 1942 packages from 760 contributors and audited 1945 packages in 30.448s

5:26:22 PM: 126 packages are looking for funding

5:26:22 PM: run npm fund for details

5:26:22 PM: found 5881 vulnerabilities (170 moderate, 5711 high)

5:26:22 PM: run npm audit fix to fix them, or npm audit for details

5:26:22 PM: NPM modules installed

5:26:22 PM: Started restoring cached go cache

5:26:22 PM: Finished restoring cached go cache

5:26:22 PM: unset GOOS;

5:26:22 PM: unset GOARCH;

5:26:22 PM: export GOROOT=’/opt/buildhome/.gimme/versions/go1.12.linux.amd64’;

5:26:22 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";

5:26:22 PM: go version >&2;

5:26:22 PM: export GIMME_ENV=’/opt/buildhome/.gimme/env/go1.12.linux.amd64.env’;

5:26:22 PM: go version go1.12 linux/amd64

5:26:22 PM: Installing missing commands

5:26:22 PM: Verify run directory

5:26:22 PM: Executing user command: npm run build

5:26:23 PM: > refcode-app@0.1.0 build /opt/build/repo

5:26:23 PM: > react-scripts build

5:26:24 PM: Creating an optimized production build…

5:26:35 PM: Compiled with warnings.

5:26:35 PM: src/index.js

5:26:35 PM: Line 1:8: ‘React’ is defined but never used no-unused-vars

5:26:35 PM: Line 2:8: ‘ReactDOM’ is defined but never used no-unused-vars

5:26:35 PM: Line 3:8: ‘App’ is defined but never used no-unused-vars

5:26:35 PM: Search for the keywords to learn more about each warning.

5:26:35 PM: To ignore, add // eslint-disable-next-line to the line before.

5:26:35 PM: File sizes after gzip:

5:26:35 PM: 49.71 KB build/static/js/2.542ffe51.chunk.js

5:26:35 PM: 1.4 KB build/static/js/3.d83636e0.chunk.js

5:26:35 PM: 1.17 KB build/static/js/runtime-main.c33872dd.js

5:26:35 PM: 764 B build/static/css/main.d9bf161a.chunk.css

5:26:35 PM: 303 B build/static/js/main.2b0f886e.chunk.js

5:26:35 PM: The project was built assuming it is hosted at /.

5:26:35 PM: You can control this with the homepage field in your package.json.

5:26:35 PM: The build folder is ready to be deployed.

5:26:35 PM: You may serve it with a static server:

5:26:35 PM: npm install -g serve

5:26:35 PM: serve -s build

5:26:35 PM: Find out more about deployment here:

5:26:35 PM: https://cra.link/deployment

5:26:36 PM: Skipping functions preparation step: no functions directory set

5:26:36 PM: Caching artifacts

5:26:36 PM: Started saving node modules

5:26:36 PM: Finished saving node modules

5:26:36 PM: Started saving pip cache

5:26:36 PM: Finished saving pip cache

5:26:36 PM: Started saving emacs cask dependencies

5:26:36 PM: Finished saving emacs cask dependencies

5:26:36 PM: Started saving maven dependencies

5:26:36 PM: Finished saving maven dependencies

5:26:36 PM: Started saving boot dependencies

5:26:36 PM: Finished saving boot dependencies

5:26:36 PM: Started saving go dependencies

5:26:36 PM: Finished saving go dependencies

5:26:39 PM: Build script success

5:26:39 PM: Starting to deploy site from ‘build’

5:26:39 PM: Creating deploy tree

5:26:39 PM: Creating deploy upload records

5:26:39 PM: 0 new files to upload

5:26:39 PM: 0 new functions to upload

5:26:39 PM: Starting post processing

5:26:39 PM: Post processing - HTML

5:26:41 PM: Post processing - header rules

5:26:41 PM: Post processing - redirect rules

5:26:41 PM: Post processing done

5:26:41 PM: Site is live :sparkles:

hi there, did you see this guide already?

I did see that but I thought it did not apply to my situation, sorry! I will look again and see if that works.

PS, I have a folder of statically-served HTML pages at /public so I am wondering if this may break that.

Ok, I did add the _redirects file but I am still getting a 404 error on my react page (which works locally).

https://60a6d7949d6a4000085e2938--refcode.netlify.app/volunteer-opportunities

In addition the the problems with the deploy, I am now having problems with this redirect when building with netlify build && npm run build. Apparently it is not honoring the shadowning rules? (Rewrites and proxies | Netlify Docs) because entering paths for existing files still get redirected to index.html. Everything is showing the react root.

Also, if i actually try to visit /index.html, it gets stuck in an infinite redirect loop.

Additionally, there’s a difference between a local build via netlify build && serve -s build and a local dev run via netlify dev. When I run the netlify dev command, everything works perfecdtly:

  • React pages work fine
  • pages in /public/pages/foo.html are displayed correctly

And the actual production deploy is different from the above: the actual deploy the public/pages files work but the React pages do not work. https://master--refcode.netlify.app/volunteer-opportunities

Why does dev work perfectly, but when I build or deploy, it does not?

I just deployed your repo and got a page: Refcode Community

Is this what you’re expecting?

YES! How did you do that!?

Here’s the repo: GitHub - Hrishikesh-K/refcode.org

And the build settings:

It’s nothing different from the usual deployments on Netlify. The only thing I changed from your repo was the location of the _redirects file. It was in src, I put it in public.

2 Likes

Wow @hrishikesh you are my HERO! That solved it, thank you so much!!! I wonder if it’s possible to update the documentation on _redirects to make it more clear where it needs to go.

Also, I did not have CI= prefixing my build command, I didn’t see in the docs anywhere that I needed to do that.

1 Like

The documentation can be tough in some cases. However, to make my life easier, I avoid _headers and _redirects and use netlify.toml instead. I list all my Netlify configuration there and it always goes in the root of the repo, thus no confusion at all.

Yes, the prefix is optional and probably not needed at all in your case.

Basically, with the prefix, warnings are not treated as errors. Without it, they are. So, if you have some unused variable (just for example), you’d get a warning saying this variable is unused. With the prefix, the build will still work, without it, the build will fail. If you wish for the build to fail when you get a warning, remove the prefix.

1 Like