express-webpack-dev v1.0.1

Express Webpack development

This library provides you a method to configure easily an express/webpack development environment.

It is perfect if you are working with express API and a SPA (Single Page Application) in the same project.

It gives you an easy way to use your express API application as a webpack dev server thanks to webpack-dev-middleware and webpack-hot-middleware .

Installation

With npm:

npm install express-webpack-dev --save-dev

With yarn:

yarn add express-webpack-dev --dev

Usage

Express webpack dev library exports a method that needs an express application and some options as parameters.

It takes this information and configures your webpack to develop front-end applications as a webpack dev server.

It also configures webpack to work with webpack hot replacement plugin.

const express = require('express');
const webpackDev = require('express-webpack-dev');
const webpackConfig = require('./webpack.config');


const app = express();
const webpackDevOptions = {configs: {webpack: webpackConfig}, env: process.env.NODE_ENV, spa: true }


// Use webpack dev
webpackDev(app, webpackDevOptions);

app.listen(config.port, () => {
  console.log(`listening on http://localhost:${config.port}`);
});

module.exports = app;

And that's it!!

You can start to develop your spa application and enjoy the webpack hot replacement loader.

API

webpackDev(app: Object, options: Object)

• app - your express application
• options - webpack dev options object

options

• env: string? - node environment. change this parameter to production to don't apply webpack dev configuration.
• spa: boolean? - if it is true or undefined, the library configure your express app to use only one entry point (index.html) for all routes. That means that the routing is done by the client.
• configs: object - you can configure webpack, webpack-dev-middleware and webpack-hot-middleware with this object. ex: configs: {webpack: webpackConfig, devMiddleware: {}, hotMiddleware: {}}

All devMiddleware object options All hotMiddleware options

If you want a basic webpack configuration, you need to define only an entry and output configurations because the library give you the necessary plugins configuration to work with hot module replacement.

Remember that if you override webpack.plugins property, you need to add in your plugins HotModuleReplacementPlugin to take advantatge of this functionality.

default options

If you don't pass any option, the default options will be applied.

{
  configs: {
    webpack: {
      entry: ['webpack-hot-middleware/client', '/src/index.js'],
      output: {
        path: '/dist',
        filename: 'bundle.js',
        publicPath: '/'
      },
      plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()]
    },
    devMiddleware: {},
    hotMiddleware: {}
  },
  env: 'development',
  spa: true
}

Contribute

Contributions to the package are always welcome!

• Report any bugs or issues you find on the issue tracker.
• You can grab the source code at the package's Git repository.

Support

Get in touch with me using one of the following means:

• Emailing us at francisco.parejo.lopez@gmail.com

Authors

• Frank Parejo
• The Community Contributors

License

The code base is licensed under the MIT license.