6

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.

Marco Torrecampo
  • 223
  • 1
  • 5
  • 13

5 Answers5

15

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

li x
  • 3,953
  • 2
  • 31
  • 51
1

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

pawelbylina
  • 1,387
  • 10
  • 17
1

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.

Joseph Rex
  • 1,540
  • 2
  • 18
  • 20
0

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>
Smit Vora
  • 470
  • 3
  • 10
0

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

  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 23 '21 at 10:03