react-router does not work in production and surge deployments

Question

My react application is working fine on localhost but when after i deployed it in gh-pages or surge it does not give me to move among pages using URL.

This is the project repo link
Demo url here

users can go to signup page by clicking menuItem of top right corner. but If user use http://chat.susi.ai/signup/ URL, it gives 404 page

I tried several solutions from internet but didn't work.

Next question is : I created a 404 page to show up when user tries to move to broken links.It works fine in localhost. but not in production. I tried this solution but nothing changed.

this is part of my index.js file

const App = () => (
    <Router history={hashHistory}>
        <MuiThemeProvider>
            <Switch>
                <Route exact path="/" component={ChatApp} />
                <Route exact path="/signup" component={SignUp} />
                <Route exact path="/logout" component={Logout} />
                <Route exact path="/forgotpwd" component={ForgotPassword} />
                <Route exact path="*" component={NotFound} />

            </Switch>
        </MuiThemeProvider>
    </Router>
);

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

If someone can suggest good solution with sample code for my problems that would be really helpful for me.

Jonny Buchanan · Accepted Answer · 2017-06-12T04:05:34.030

25

This is happening because users aren't being served the index.html which bootstraps your app when they visit those URLs directly.

For surge, you can add a 200.html file which contains the same contents as the index.html you're deploying (or just rename it to 200.html) - this will then be served to users at any URL they visit which doesn't correspond to a static file, allowing your app to start running.

Edit: looks like you're using create-react-app. This works when you're developing locally because create-react-app's react-scripts package handles serving your index.html as a fallback for these requests.

The react-scripts user guide has sections on how to handle this when deploying to GitHub Pages and surge.sh (as above).

edited Jun 12 '17 at 04:05

answered Jun 12 '17 at 03:59

Jonny Buchanan

58,371
16
137
146

indeed, serving the index.html file when visiting the subpath works fine :-) – Carl Bosch Sep 07 '18 at 15:42
2

https://medium.com/superhighfives/serving-client-side-routing-with-surge-sh-7b705542cf3 – Nisuga Jayawardana Jan 20 '20 at 08:11
1

This answer doesn't work for me, but @NisugaJayawardana link did. – Isaac Pak Mar 25 '20 at 20:03

score 14 · Answer 2 · answered Nov 14 '18 at 06:40

14

Changing .htaccess file in the case of using apache as the web server in your build folder worked for me:

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

answered Nov 14 '18 at 06:40

Siamak A.Motlagh

4,538
6
38
60

From: https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing – Nate Wessel Feb 09 '21 at 00:13
1

do we put the .htaccess file in the build folder? – Kyle Pennell Mar 02 '21 at 19:36

score 4 · Answer 3 · edited Nov 24 '19 at 20:30

4

This issue happens on all single page applications (e.g. react, angular). Follow below steps to resolve (only 4 surge):

npm run build
cd build
cp index.html 200.html
surge

edited Nov 24 '19 at 20:30

Florian Müller

6,344
25
70
114

answered Aug 20 '19 at 12:52

Shubham Prakash

175
1
3

This solved it for me, thank you – Kyle Pennell Mar 02 '21 at 19:36

score 2 · Answer 4 · answered Jun 13 '19 at 04:18

When deploying the build on static servers, in our React App if we would have used routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory), the static file servers might fail to load the routes and appropriate screens and show up 404 - Not Found error.

As described in the create-react-app Deployment article:

when there is a fresh page load for a path for ex: /todos/42, the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html

So to make the routes working when using Node with Express, one can add configure the server index.js as below:

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

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

// PATH CONFIGURATION TO RESPOND TO A REQUEST TO STATIC ROUTE REQUEST BY SERVING index.html
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(5000);
console.log('Server is listening on http://localhost:5000');

If you’re using Apache HTTP Server, you need to create a .htaccess file in the public folder of your React APP that looks like this:

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

It will get copied to the build folder when you run npm run build.

HI @Rahul gupta, I'm using nginx server, where should I add similar fixes? — code it up, Dec 03 '20 at 06:53

score 1 · Answer 5 · edited Aug 10 '20 at 20:41

I had the same problem. And i solved it very easily... :)

I used react at my front-end(Create-React-App) and an express backend. In dev mode all things works great but when i switched to the production build there was some routing issues in my react routing. After a long survey i found that the problem is on the server side serving up the index.html file.

It should be after all the server side routing but before all the app.post handler. In other words the following line should be placed after all app.gets and before all app.posts

// PRODUCTION
App.get('*', (req, res)=>{
res.sendFile(path.resolve(where, the, index.html, is))
})

score 0 · Answer 6 · answered Mar 31 '21 at 23:32

I had the same problem and I solved it by taking advantage of .htaccess file. I added a redirect that goes back to index.html, it does keep the url path and everything works perfectly.

My .htaccess file only has this line ErrorDocument 404 /index.html it must be on the root directory, create it if doesn't existing or overwrite the exist one. I recommend you handle 404 inside your App.

I got this idea from https://medium.com/designer-recipes/how-to-make-a-custom-404-error-page-for-your-website-1af37a8b20d1

score 0 · Answer 7 · answered May 02 '21 at 11:57

0

just add 200.html

inside 200.html

<script src="path of your App.js"></script>

it works perfectly

answered May 02 '21 at 11:57

Lazy Coder

1
1

react-router does not work in production and surge deployments

7 Answers7

Linked