Differences between local dev, local build, and production deploy

[brenton]

I have a React site (https://60a7aa28463caaecf29c7f7f--refcode.netlify.app/) which is behaving inconsistently depending on the environment.

Here is what I’m seeing in the different contexts.

Production Deploy

• React pages 404 (https://60a7aa28463caaecf29c7f7f--refcode.netlify.app/volunteer-opportunities)
• Static pages work (https://60a7aa28463caaecf29c7f7f--refcode.netlify.app/pages/patternlibrary.html)

Local Dev (netlify dev)

• React pages work (http://localhost:8888/volunteer-opportunities)
• Static pages work (http://localhost:8888/pages/patternlibrary.html)

Local Build netlify build && serve -s build

• Clicking on a link from react root to a static page creates an infinite redirect loop (http://localhost:5000 → http://localhost:5000/pages/patternlibrary.html)
• Directly entering a static page URL redirects to the wrong place (http://localhost:5000/pages/patternlibrary.html → http://localhost:5000/pages/patternlibrary)
• React pages work (http://localhost:5000/volunteer-opportunities)
• Going directly or by link to /index.html creates an infinite redirect loop (http://localhost:5000/index.html → http://localhost:5000/ → http://localhost:5000/ → etc)

If I had the exact same problems in all three places I’d have a better idea of how to move forward, but as it is I can’t figure out what my problem is or if I have multiple problems? My main goal is to get the React pages working on production. Ideally, production would function like my local dev server!

My _redirects file looks like this:
/* /index.html 200

My deploy settings look like this:

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

[brenton]

This was partially solved by @hrishikesh in this answer: https://answers.netlify.com/t/trying-to-deploy-a-react-site-on-netlify-all-the-react-pages-are-404/38018/8

TLDR: I had _redirects in /src instead of /public and my deployment command wasn’t prefixed with CI= .

That solved my production deploy, however in local builds I am still seeing the infinite redirect loops, incorrect redirects, etc.

[hrishikesh]

I think only the last part is the one with the problem now. The first 2 are good to go, right?

About the last error, I think it’s a problem with the serve Node Module. I just tried http-server - npm and ran the command netlify build && npx http-server build. It seems to work fine.

[brenton]

@hrishikesh

I think only the last part is the one with the problem now. The first 2 are good to go, right?

Correct!

I used the updated command and it still is broken in the same way. (Also, gives some IP addresses instead of localhost). However, as long as it works in dev and on prod, I am ok, I do not need the build to work locally.

[hrishikesh]

Those IP addresses are the URLs.

[brenton]

Sorry, I phrased that wrong. I made it seem like the IP addresses were the problem! The problem is the same as before, the React pages 404. The IP addresses are fine!