React Isomorphic Example
This is an example for starting off with an isomorphic app. It is based on our React Starterkit and enables pre-rendering react apps on server side.
How it works
React gives us the possibility to pre-render an app on the server side, so that the complete markup is served to the client before executing the client scripts which add interactivity to the app. This concept not only enables better performance, but is useful for SEO because crawlers of search engines have something to look at on request.
In this example, the markup is served using a generic express server in the
server.js file, which is the entry point of the application. Using React, the server renders the
index.jsx file which can be found in the /app folder. This file contains the HTML of the application and includes other components of the application.
As a starting point, the
app/scripts/app.jsx file is rendered into the body of the markup. You can start by adding more components and structuring your app with React as usual.
dist folder is generated using gulp, webpack and stylus. It contains all stuff that is needed by the frontend (js, css, images, ...). It is served using the static express route
- Server side rendering is done with
- When using express, a static route needs to be used for publishing scripts, styles and other assets.
- Development: If files change, the server is restarted using nodemon and the assets are built using gulp.
$ git clone https://github.com/wbkd/react-isomorphic-starterkit.git && cd react-isomorphic-starterkit
This will install all dependencies needed for running the example.
$ npm install
In development mode, this example uses gulp and nodemon to listen for changes made to the JS or CSS files. If there are any changes, the server will automatically restart and the scripts/styles will be built.
$ npm run start:dev
For further details how this works, you can check out
The app is now running at
To build a minified version of the scripts, you can run
$ npm run build
After that, simply start the server with
$ npm start
You can check out our React Starterkit for developing non-isomorphic apps.