React build for static server gives 404 error

Viewed 2148

I have a React app which runs fine locally but when I try to build it on the static Node server serve (npm serve) using

serve -s build

the server returns a 404 The requested path could not be found page. My understanding is the issue has to do with the fact I am using BrowserRouter in the application. I put a .htaccess file in the root directory with the following code but it did not solve the issue.

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

One suggestion I saw for a Node environment follows but I don't understand where to put the code.

app.get('*', function (req, res) {
  res.send('index_path')
})

My index.js file is as follows.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import Service from './javascript/Service';
import { PageNotFound } from './PageNotFound';
import * as serviceWorker from './serviceWorker';

const routing = (
    <Router>
        <Switch>
            <Route exact path="/" component={App} />
            <Route path="/Service/:serviceName" component={Service} />
            <Route component={PageNotFound} />
        </Switch>
    </Router>    
);

ReactDOM.render(routing, document.getElementById('root'));

serviceWorker.unregister();
1 Answers

you should first build your project with

npm run build (or yarn)

next install serve

npm install -g serve

and then run this code

serve -s build
Related