React + Express.js server should always return the same index.html file, no matter what url route

Question

I've been trying to get this fixed for the last few hours but can't find something that works. What I'm using right now is the standard:

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

I've tried to use the solution someone posted in another thread:

app.get(/*./, function (req, res) { res.sendFile(__dirname + '/index.html'); });

But this doesn't work and gives me a "Uncaught SyntaxError: Unexpected token <".

I guess that solution is based of expressjs own examples:

app.get(/*test$./, function (req, res) { res.sendFile(__dirname + '/index.html'); });

Which works for every route that has the phrase "test" in the first level (and ONLY the first lvl '/test'=yes, '/app/test'=no.

WHAT I WANT: Since I've a react app that always returns the same html page and that handles invalid routes within the app I want to make every request to my webpage return the exact same index.html (no matter what route the user asks for, '/' --> index.html '/test/test/test/test' --> index.html and so on.

Anyone have any ideas how I can do this? I've run out of google results

Thanks in advance!

Below is my entire server as of right now:

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

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

app.use('/build', express.static('build'));

io.on('connection', function(socket){
    console.log('Connected');
});

http.listen(3000, function(){
    console.log('listening on *:3000');
});

have you tried using app.get('/*',...)'?, show us your react router config too. — QoP
– QoP, Commented May 7, 2016 at 8:54
I get the same, "Uncaught SyntaxError: Unexpected token <". The react routes works, I've tried to return the index.html file on different routes and react handles them as should. — leQu
– leQu, Commented May 7, 2016 at 9:02

Paul · Accepted Answer · 2016-05-07 09:15:51Z

2

If you just have app.use(yourStaticMiddleware), the function "yourStaticMiddleware" will be executed for every request. If that middleware ends the response (eg by calling res.send() or res.sendFile()), then nothing after it will be called except error handlers.

answered May 7, 2016 at 9:15

Paul

36.4k12 gold badges98 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

leQu Over a year ago

Thanks for explaining, I believe thats what I was looking for. :-)

Dinesh Agrawal · Accepted Answer · 2016-05-07 09:28:21Z

1

this will work for every get request

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

answered May 7, 2016 at 9:28

Dinesh Agrawal

3461 silver badge3 bronze badges

1 Comment

leQu Over a year ago

Thanks for this anwser, it works just as well as the one above. When I tried it before I believe I forgot to add the next function (?), not sure if that was the issue. Thanks for taking the time :)

RIYAJ KHAN · Accepted Answer · 2016-05-07 09:21:45Z

0

Use app.all() method.

This method is used for loading middleware functions at a path for all request methods.

app.all(function (req, res, next) {
   //will hit every page request regardless of http method
    next(); // pass control to the next handler
});

For more you can refer exprress routing

answered May 7, 2016 at 9:21

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Collectives™ on Stack Overflow

React + Express.js server should always return the same index.html file, no matter what url route

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related