Express server with React front end routing without server side rendering

Question

This is my express server setting

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');

var app = express();

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


require('./api/accounts/signin')(app);
....

mongoose.connect(process.env.MONGO_URI);
mongoose.connection.on('error', function() {
    console.info('Error: Could not connect to MongoDB. Did you forget to run `mongod`?');
});

app.set('super-secret', process.env.APP_SECRET)

module.exports = app;

Now when i start my application at localhost:3000/ it works fine with all the routes working but when i try to go on localhost:3000/login or some other route directly i get a Cannot GET /login error...

I dont want to use server side rendering with a react middleware (which i have used before) just now so is there anyway to make it work?

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



<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Doyouthink?</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="js/common.bundle.js"></script>
    <script src="js/polyfill.bundle.js"></script>
    <script src="js/vendor.bundle.js"></script>
  </body>

</html>

Paul S · Accepted Answer · 2016-12-01 10:09:41Z

1

You just need to match all routes and serve them the base html page which includes your bundle. React Router will then examine and URL and render the appropriate components.

app.get("/", handleRender);
app.get("*", handleRender);

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

edited Dec 1, 2016 at 10:09

answered Dec 1, 2016 at 8:15

Paul S

36.9k6 gold badges45 silver badges38 bronze badges

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

11 Comments

xtabbas Over a year ago

What will be handleRender here? isnt this a middleware for react in a sense aka server side rendering?

Paul S Over a year ago

Sorry, edited. It just serves up your index html file.

xtabbas Over a year ago

Alright thank you so much... Also while we are at it, is it necessary (at some point in life) to plug in server side rendering in your single page application for making it SEO friendly and stuff like that or Im good to go without it?

Paul S Over a year ago

It is mostly useful for SEO and people with slow connections. I'm fairly certain Google's bot will execute JavaScript, but other spiders won't necessarily correctly crawl your site. It isn't terribly difficult to setup, but I haven't read anything that says you must use it.

xtabbas Over a year ago

Hi i have run into a problem with this solution and im getting the html page as a response object from one of my API now which was working just fine before and sometimes the API are returning bad request. Is there something we missed?

|

Collectives™ on Stack Overflow

Express server with React front end routing without server side rendering

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related