expressjs |

2015-12-31: You should check out my recent post to use the new way of doing HR with webpack, and to have way more details :
Webpack Hot Reloading and React : how ?

Don’t work without hot-reloading

I got a project running its own Node server instance, using expressjs. It’s already bundling its assets with webpack, and it’s using React with the nice ES6 features, all good.

But it lacks of hot reloading. :-(

This is something we must have nowadays when you’re working with webapps and CSS/Javascript. You don’t want to refresh your whole page and lose your current state each time, you are going to lose your time, your patience, and your productivity !

Leave express alone and add webpack-dev-server on top

Thus, I decided to take a look and tried to add it while keeping the express server instance up and working. I didn’t want to replace the whole thing by a webpack-dev-server and reconfigure the public assets paths and all other stuff that my expressjs was providing.

After some tests, some readings here and there, I got a pretty straightforward solution without using any custom proxy code, nor changing my generated html.

The solution

For reference:
– the expressjs server is running on localhost:3000
– the webpack-dev-server is going to run on localhost:3001

Here is a git diff of my changes:

packages.json

+ "react-hot-loader": "^1.2.7",
+ "webpack-dev-server": "^1.8.2"

Just the necessary packages to do the hot reloading. (npm install --save-dev)

webpack.config.js

+var webpack = require('webpack');

- entry: path.resolve(__dirname, '../src/client.js'),
+ entry: [
+   'webpack-dev-server/client?http://0.0.0.0:3001',
+   'webpack/hot/only-dev-server',
+   path.resolve(__dirname, '../src/client.js')
+ ],

modules: {
  loaders: [
    {
-     loader: 'babel-loader'
+     loaders: [ 'react-hot-loader', 'babel-loader' ]
    }
  ]
},

+ plugins: [
+   new webpack.HotModuleReplacementPlugin(),
+   new webpack.NoErrorsPlugin()
+ ]

– we add webpack-dev-server entries into entry
– we add the react-hot-loader loader when processing the .js (it will add some js to magically do the hot reloading)
– we add the plugins for hot reloading.

More details here http://gaearon.github.io/react-hot-loader/getstarted/

server.js

This is the most important part, where we define a new webpack-dev-server instance that will be listen by the browser to process the hot reloading if any js file change.

// existing express server
var app = express();
app.use(...)
app.get(...)
app.listen(3000);

+// we start a webpack-dev-server with our config
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var config = require('./webpack.config.js');

+new WebpackDevServer(webpack(config), {
+   hot: true,
+   historyApiFallback: true,
+   proxy: {
+     "*": "http://localhost:3000"
+   }
+}).listen(3001, 'localhost', function (err, result) {
+   if (err) {
+     console.log(err);
+   }
+
+   console.log('Listening at localhost:3001');
+});

We are only adding a new webpack-dev-server instance without altering at all our expressjs server listening on localhost:3000.

– our webpack-dev-server listens to localhost:3001 and handle the hotness
– every requests (“*”) are redirected to localhost:3000.

This server serves only as a proxy for the hot reloading. More details here http://webpack.github.io/docs/webpack-dev-server.html.

At the end, there is still no hot reloading on http://localhost:3000 (it’s still a pure expressjs server).

But if you browse http://localhost:3001, and more precisely http://localhost:3001/webpack-dev-server/, you will the famous “App ready” hot reloading toolbar and everything will be automatically updated if you change one of your React component.

So, being so interested in React, I wanted to create something, something useful, not just a single page with a Hello World in the middle, no, that does tell you how to really use a framework, what are its pros and cons.

To really evaluate it, you need at least to have a design of some application, with some links here and there (routing), some dynamic rendering (events), some webservice calls (server, async), a database, and a process to build the project (because you don’t want to manually add a reference in the .html everytime you add a .js file for instance, this is especially true when you deal with React components, every component should have its own file). Then it should have some testing.

So, my only constraint was : use React. After watching so many videos and read many things, I needed to write that down and see how I’m doing.
From that, I needed to store some data on a server that would connect to a DB. So for the server, I picked NodeJS. I barely used it, just for some tutorials I think. But nevermind, I’ll learn. Now a database, at first, I decided on NeDB, because I didn’t want to install a true database server at the beginning. But, I was going to have some many rows later (>300k) that I had to switch to a more powerful one. I through of MongoDB. Never used it, but I knew it integrates easily with NodeJS (using Mongoose) and NeDB has the same exact syntax so no code changes! I only used relational databases until now, so it was going to be a good learning curve ! Finally, as a build system, I used Grunt a bit back then, but I heard about Gulp being much nicer. Go for it. (I’ve added it at the end actually :-))
And of course, I did of all my coding in my new favorite editor, Atom!

I’m going to explain step by step how I did from scratch, what I’ve learned and give some tips and pointers.

Continue reading A journey through the creation of an app with Node, MongoDB, React, Gulp

Category: expressjs

Using react-hot-loader with a webpack-dev-server and a node server