I get 404 error in the localhost even though I already did "npm run build"

Question

I'm trying to send a small demo made with React to production. I did not make the demo with create-react-app, I did it by hand. I used express.js to serve the application.

When I run the command "SET NODE_ENV = production node server.js" (I'm in Windows, that's why SET) and I go to the localhost I keep getting GET / 404, even though I already made the command "npm run build".

Since it's the first time I do this, I really have no clue what happens.

This is my package.json:

{
    "name": "app",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "webpack --colors",
        "serve": "webpack-dev-server --content-base build/ --color --        
                  progress",
        "start": "npm run build && npm run serve",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Pepe",
    "license": "MIT",
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-eslint": "^8.2.2",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.4.0",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-2": "^6.24.1",
        "css-loader": "^0.28.9",
        "eslint": "3.15.0",
        "eslint-config-airbnb": "14.1.0",
        "eslint-loader": "^1.9.0",
        "eslint-plugin-import": "2.2.0",
        "eslint-plugin-jsx-a11y": "4.0.0",
        "eslint-plugin-react": "6.10.0",
        "extract-text-webpack-plugin": "^3.0.2",
        "html-webpack-plugin": "^2.30.1",
        "identity-obj-proxy": "^3.0.0",
        "jshint": "^2.9.6",
        "style-loader": "^0.20.2",
        "url-loader": "^0.5.8",
        "webpack": "^3.3.0",
        "webpack-dev-server": "^2.9.7"
    },
    "dependencies": {
        "bootstrap": "^4.0.0",
        "compression": "^1.7.3",
        "express": "^4.16.4",
        "mime": "^1.4.1",
        "morgan": "^1.9.1",
        "normalize.css": "^8.0.0",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-router-dom": "^4.1.1",
        "uuid": "^3.2.1"
    },
    "standard": {
        "ignore": [
            "/build/"
        ]
    },
    "eslintConfig": {
        "extends": [
            "standard",
            "standard-jsx"
        ]
    },
    "stylelint": {
        "extends": "stylelint-config-standard"
    },
    "optionalDependencies": {
        "win-node-env": "^0.4.0"
    }
}

And here is my server.js:

const { createServer } = require('http');
const express = require('express');
const compression = require('compression');
const morgan = require('morgan');
const path = require('path');

const normalizePortprocess = port => parseInt(port, 10);
const PORT = normalizePortprocess(process.env.PORT || 3000);

const app = express();
const dev = app.get('env') !== 'production';


if (!dev) {
    app.disable('x-powered-by');
    app.use(compression());
    app.use(morgan('common'));

    app.use(express.static(path.resolve(__dirname, 'build')));

    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
    });
}


if (dev) {
    app.use(morgan('dev'));
}

const server = createServer(app);

server.listen(PORT, err => {
    if(err) throw new err;

    console.log(`Server listen in ${PORT}`); 
});

Everything would seem to work correctly except that despite having executed to many times the command "npm run build", still nothing appears

Answer 1

You are running in a development environment, and only handling that GET request if !dev.

if (!dev) { // here is the problem

    // ...

    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
    });
}

Instead, either remove the if statement and always handle this route, or change it to if(dev).