Error when i go into production with react.js

Question

I have create an app with react.js. I wanted to go into production.

I did

npm run build

serve -s build 

I go on localhost:5000

The welcome page works very well, but when i go on localhost:5000/maini have an error

404 | The requested path could not be found

I tried to redo npm run build, but that did not work

What do you propose ?

EDIT

Package.json

{
  "name": "name-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "firebase": "^5.10.0",
    "node-sass": "^4.11.0",
    "p5": "^0.8.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-p5-wrapper": "0.0.4",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "socket.io-client": "^2.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
  "main": "index.js",
  "devDependencies": {},
  "author": "",
  "license": "ISC"
}

Arbour

please share package.json specs of run build Also inspect on chrome developer tools the url that throws the error, maybe you are not pointing to /build/ – Blakeney

I have add package.json, and no error in chrome developer – Arbour

Have you set up a route in your react app for "/main"? Are you expecting that "/main" will load index.js? – Columbic

before going into production everything works well but after the npm run build it does not work anymore – Arbour

Answer 1

It looks like the "-s" or "--single" argument/option on the serve package is either not working or no longer working as expected so requests to paths other than "/" are not being rewritten.

Take a look at the following issue for the serve package: https://github.com/zeit/serve/issues/525

In my test setup downgrading serve as suggested in the bug report fixed the issue.

npm uninstall -g serve

npm install -g [email protected]

serve -s build

Columbic

But when i upload my file on the web with filezila, i have this error : Not Found The requested URL /main was not found on this server. the homepage works – Arbour

You aren't giving enough information. Uploaded on the web with filezilla... uploaded to what? Are you hosting this on a web or app server? What type and version of server? Do you have command line access to the server? If the server is ultimately running npm serve, what version of the serve package is installed? If you are hosting on apache or some other app server, has URL rewriting been configured? – Columbic

Answer 2

got same issue today and finally it was caused by the wrong path in which I ran the cmd "serve -s build". we need to ensure the cmd running in one level up to "build" folder, eg: we have "opt/build" path, then server cmd needs to be done in /opt/

Plasterboard

Answer 3

I was running the serve -s build command from within the build folder.

To fix this, I went one directory up (using cd ..) to the root folder where the build folder is located, and then ran serve -s build. This resolved the issue.

Mccurdy

Answer 4

I was having the same issue, even tried, creating the build again but it didn't work.

Navigating 1 folder up and then serving the build worked.

Quicksilver