Webpack express handler

Overview

This package aims to consolidate your development and production environments for handling static files and serving your index.html.

This means that your npm start script is used in both development, and production - and a single configuration can be used for both. This speeds up both development and testing time since your environments should be roughly identical.

Getting started

Installing the package into your project by running:

$ yarn add @craigcollie/webpack-express-handler

Required dependencies

This will install the core package, along with it's dependencies which require very little configuration. The dependencies will include:

• webpack
• webpack-dev-middleware
• webpack-hot-middleware

Integrating into an express app

When creating your new express app, the webpack-express-handler will return your newly wrapped app with middleware applied, to cater for static file handling in both production and development environments.

const express = require('express');
const webpackExpressHandler = require('@craigcollie/webpack-express-handler');

const webpackConfig = require('./your/webpack/config');

const isProd = process.env.NODE_ENV === 'production';
const app = webpackExpressHandler(express(), isProd, webpackConfig);

app.get('/', (req, res) => {
  //  Your index.html is cached internally
  //  on the first request only
  res.send(app.locals.html);
});

app.listen(3000);

Running your server

As an example of how you might configure your server, the following could be added to your package.json.

{
  "scripts": {
    "start:dev": "node ./src/server.js",
    "start:prod": "NODE_ENV=production node ./src/server.js"
  }
}