I'm having trouble with reactjs in production, in my development machine i can easily refresh/reload without redirecting to 404 (not found page) but during production every time i reload or refresh in http://example.com/subdirectory/dashboard it will always go to 404 page of http://example.com but when I'm in development machine http://localhost:3000/subdirectory/dashboard when I refresh/reload the page it will reload as expected.

Note: In production I uploaded my static data into subdirectory so i use basename in my route.

If your serving your application on a standard webserver you can add a .htaccess using the following which enables rewrite rules:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

It's likely that the 404 issue you're facing will be solved by simply just serving the above alongside the root of the project.

Alternately you could use the following as well which would serve it as a node server:

const express = require('express');
const path = require('path');
const app = express();

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

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

app.listen(9000);

The above can be used in conjunction with a .htaccess.

The create react app guys also promote serve which you can find here and the official react deployment documentation here

1: https://github.com/zeit/serve

2: https://create-react-app.dev/docs/deployment#docsNav

13 users liked answer #0dislike answer #013
li x profile pic
li x

In your http server you have to rewrite all urls to your index.html file. If you are using nginx you can follow this: React-router and nginx

1 users liked answer #1dislike answer #11
pawelbylina profile pic
pawelbylina

You might have to create a proxy server for your React.js application in production. You can do this in different ways but to do it with Express Node.js, you would have to create a file that looks like this:

const express = require('express');
const path = require('path');

const port = 7700;

const app = express();


app.use(express.static(path.join(__dirname, '../public')));

app.all('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../public/index.html'));
});

app.listen(port, () => {
  console.log(`Listening on ${port}`);
});

The snippet above assumes you have built your React files and your index.html is in a public directory. This proxies all requests from the express server to your React routes with the * wildcard.

With that done, all that's left is to run this express app on your server and it handles your history API routes just like regular server routes.

1 users liked answer #2dislike answer #21
Joseph Rex profile pic
Joseph Rex

add basename inside your src/index.js like this (you can also add <base href="/subdirectory" target="_blank"> in your index.html file's head tag)

            <Router
                basename={'/subdirectory'}
            >
                <App />
            </Router>
0 users liked answer #3dislike answer #30
Smit Vora profile pic
Smit Vora

In your public folder make a file _redirects and write /* /index.html 200 in it

0 users liked answer #4dislike answer #40
Abhishek Tripathi profile pic
Abhishek Tripathi

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).