I tried to get my head around how to render React on the server side. I use webpack to create the JS bundle for the client. I found this question on here the server part (my app.js) looks like this:
//...other express configuration
const routes = require('../jsx/routes');
const React = require('react');
const {RoutingContext, match} = require('react-router');
const hist = require('history');
app.use((req, res, next) => {
const location = hist.createLocation(req.path);
match({
routes: routes,
location: location,
}, (err, redirectLocation, renderProps) => {
if (redirectLocation) {
res.redirect(301, redirectLocation.pathname + redirectLocation.search);
} else if (err) {
console.log(err);
next(err);
// res.send(500, error.message);
} else if (renderProps === null) {
res.status(404)
.send('Not found');
} else {
res.send('<!DOCTYPE html>' + React.renderToString(<RoutingContext {...renderProps}/>));
}
});
});
//...other express configuration
I couldn't find out how to make this part work, since in Node there is no JSX/ES6 available:
res.send('<!DOCTYPE html>' + React.renderToString(<RoutingContext {...renderProps}/>));
So I tried to use babel/register to compile JSX and ES6 in app.js as follows in my server.js, where I then require my app.js:
require('babel-core/register')({
presets: ['es2015', 'react']
});
When I start my server I get then:
SyntaxError: /.../assets/app.scss: Unexpected token (1:0)
> 1 | @import './shared/mixins/colors';
So obvioulsy babel/register is not enough to render my React components, what else could I do/use to get it working?