React router with http-server

Question

we use react-roucter-dom with http-server , when user loads main page and click navigation links , new pages will loaded perfectly , but when user refresh page in that route , it returns 404 . It means HTML5 pushState is not working with http-server.

example :

<Router>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/topics" component={Topics} />
</Router>

If user go to /about page and refresh it , 404 error will happen

Is there a way to fix this issue ?

Elicia

Answer 1

Use this when you run http-server :

http-server --proxy http://localhost:8080? ./build

It is redirecting any error requests it can't handle to index.html where your react-router configuration resides. If all requests come to this page, then the react-router takes care of routing internally.

By the way, I've built a small script in package.json - scripts , to call all this and serve the build folder like this :

scripts: {
           ...
           "serveprod": "npm run build && http-server --proxy http://localhost:8080? ./build"
           ...
       }

And just run :

 npm run serveprod

Ministration

Tip:: For create-react-app, you have to either specify the homepage in package.json or set the .env variable accordingly: PUBLIC_URL=http://localhost:8080 yarn build && http-server --proxy http://localhost:8080? ./build – Wisp

What's the motivation of the trailing question mark? I had to remove it to make it work... – Hyperion

@Hyperion the command cames from http-server documentation, github.com/http-party/http-server#catch-all-redirect – Yves

Thanks. What is the question mark at the end (of the URL)? – Manville

How to make this work with proxying API calls to remote backend? – Hesta

@Raviteja VK Should I use http://localhost:8080? in production as well? or replace it with the server domain? – Impressionist

Answer 2

I had the same issue in my React + Webpack project. I've found the solution on create-react-app docs.

You have to:

1. in React project run npm i --save express (link)
2. create new file in project root directory (f.e. server.js)
3. write there http server code, that in every endpoint returns index.html:

// libs
const express = require("express");
const path = require("path");
// create server
const app = express();

const PORT = 3000;
const BUILD_FOLDER = "public";

app.use(express.static(path.join(__dirname, BUILD_FOLDER)));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, BUILD_FOLDER, "index.html"));
});

app.listen(PORT);

4. Start server with node server.js (live console) or node server.js 1>server.log 2>server-error.log & (background process that you can find later with ps uax | grep node)

I know this post is old but maybe somebody will find that useful.

Overeager

Answer 3

Your error happens since your application is a Single Page Application, which means that your entire site data is loaded on the / route. Which means that if you try to access any other page without first loading the site through the / route, then it would fail.

Tyler McGinnis has a very good Blog Post about the various ways to fix this issue.

Bohun

My question is about http-server with react-router – Elicia

Your issue is due to your react bundle not being available on any routes other than on the / route. You need to configure your server to serve '/' as a fallback route. – Bohun

Answer 4

You should use other packages with supporting HTML5 history API like Servør instead of http-server.

Wing

Though Servør can definitely be the solution as it falls back to index.html by default, and better than http-server, but "HTML5 history API" is not the reason here. – Yves

Servør does not support proxying API calls – Hesta

Answer 5

I think we also need another parameter to run our build app properly. Here I have used this

http-server -P https://localhost:8080/? --proxy-options.secure false -S -C yourpemfile.pem -K yourkeyfile.pem build/

Here --proxy-options basically set secure true as a default and for this when run our command it fails to render our build files of our react applications

Stickup