Ever written server apps in PHP? If so, you're in for a treat. JavaScript web applications are a million times easier to deploy thanks to Platform-as-a-Service (PaaS) web hosting providers, and you can manage an entire fleet of servers using a few simple tools. Instead of fighting with a huge monolithic Apache or Nginx configuration, you can deploy a new instance for every app you create, which sandboxes them and allows for much more compact infrastructure. We'll discuss how to deploy to Heroku later in the chapter; for now, we will just test everything locally.

You may not know it, but practically everything you need to write a server application resides in our project directory. If you've never done Node.js development before, it's very similar to what we've done in the preceding chapters with the browser, but with its own APIs and concepts. Both Google Chrome and Node.js use the V8 JavaScript engine, so you don't have to learn a totally different set of languages or skills in order to start immediately building server applications.

We're going to install a few more dependencies via npm:

$ npm install koa@next koa-bodyparser@next canvas-prebuilt --save

Koa is one of the leading Node.js web server libraries; it nicely abstracts Node's ability to open ports and serve content into an easy-to-use API that is very light and fast. It's conceptually similar to another Node web server library, Express, but tries to be a bit more cutting-edge. We're using the next version of both koa and koa-bodyparser because the 2.x branch leverages async/await for flow control, which we're all about in this book. We also install a prebuilt version of Automatic's node-canvas library, which will allow us to render Canvas elements in Node.

Since Node uses the CommonJS module loading standard, we need to add a new set of build instructions to our webpack.config.js to transpile our ES2015 import statements into CommonJS require() statements. To do this, we need to make the object being exported in webpack.config.js into an array (so that it contains both configurations), so make it look as follows (the first configuration has been truncated for space reasons):

const path = require('path'); 

module.exports = [ // Change module.exports into an array!
  { ... }, // This is the first config; leave it be!  
  {  
      entry: './lib/chapter8/index.js', 
      target: 'node', 
      output: { 
          path: path.resolve(__dirname, 'build'), 
          filename: 'server.js' 
      }, 
      externals: { 
        'canvas-prebuilt': 'commonjs canvas-prebuilt'
      }, 
      devtool: 'inline-source-map', 
      module: { 
        loaders: [ 
          { 
            test: /.js?$/, 
            exclude: 'node_modules', 
            loader: 'babel' 
          }, 
          { 
            test: /.json$/, 
            loader: 'json-loader' 
          } 
        ] 
      } 
  } 
]; // Don't forget the closing bracket!

It's pretty much the same, we've just changed the target to node. The only thing that's different is we've told Webpack to treat prebuilt node-canvas (which we'll use later in the chapter) as an external library and not try to bundle it. We build our bundle to build/server.js.

Note that this will still emit all your other code during a build; if it's going slow, feel free to temporarily disable the first config by commenting it out.