Behold the React + Express + Webpack + Babel Boilerplate
Server-side rendering and Redux is now included!
This is a boilerplate to use ReactJS ExpressJS and Redux in a project.
- ReactJS - The state based framework for your Views
- Redux - Redux manages your state
- Babel - The compiler to compile your JS files with es6, es7, JSX syntax to regular javascript
- Webpack - The module binder which takes all your JS files from different directories and compiles them into a single app.bundle.js (you can change the filename of course) so you can include it in a HTML page
- ExpressJS - The node framework to serve your views to the world when they hit the server at example.com or example.com/awesome.html
Installation
Node Version: v7.2.1
Just close this repo or download the zip file. cd into the directory and run
npm install
To use webpack you also need to run
npm install webpack -g
You might need to run this command as sudo.
Once you have the webpack installed, cd into the directory where you cloned this repo and run
webpack
This will create update two files. server.bundle.js and bin/app.bundle.js
server.bundle.js will be used for serving the application on port 3000 and app.bundle.js is the actual react app itself
Finally run
npm start
The you will be able to access this app from http://localhost:3000
Flow of the app/What is going on
So here is the flow.
First you create all you reactJS files using whatever syntax you like. This files will stay in the views directory. If you are using redux then you'll be using all the directories but if you don't know Redux you can just remove the actions, containers and reducers directory. You can use plain JSX or ES6 or Experimental ES7 in your JS files.
Once you've done that you fire up a terminal in that directory and run webpack. This has two steps:
- Webpack calls babel to compile all the files in the views directory to standard javascript. Because current browsers doesn't understand ES6/ES7/JSX syntax.
- Once the compiling is done webpack takes all the compiled files and binds then into app.bundle.js and server.bundle.js along with all the dependencies.
So now you have a file in your bin which is app.bundle.js. This is basically your whole react app into one file. And you also have a file server.bundle.js which your expressJS server.
Serve your app with server side rendering (And why it is important)
To serve your app with server side rendering, all you need to do run npm start. The way it works is that the expressJS server (app.js) renders the app on the server and serves it to the public.
I know it's confusing. Hold on!
When the react is served without server side rendering, a browser will download the index.html and load the app.bundle.js in real time. When the app.bundle.js have finished loading up it will render the page the way you have programmed. This initial render takes longer than usual and can be a nightmare for SEO or search engines. Also, a big reason of using react is how fast it is right?!
With server side rendering, the expressJS server will use the react engine to take your app.bundle.js and render the necessary parts of your webpage to plain html string. So the client/public will receive the same index.html with app.bundle.js included with it, but this time the rendering is already completed by the server. Your app.bundle.js won't modify or change anything in the page unless you have clicked something on the page.
To understand how this server side rendering is done, you need do some research on the following resources: