static-site-generator-webpack-plugin's Introduction

static site generator webpack plugin

Minimal, unopinionated static site generator powered by webpack.

Provide a series of paths to be rendered, and a matching set of index.html files will be rendered in your output directory by executing your own custom, webpack-compiled render function.

This plugin works particularly well with universal libraries like React and React Router since it allows you to prerender your routes at build time, rather than requiring a Node server in production.

Install

$ npm install --save-dev static-site-generator-webpack-plugin

Usage

webpack.config.js

var StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');

var paths = [
  '/hello/',
  '/world/'
];

module.exports = {

  entry: {
    'main': './index.js'
  },

  output: {
    filename: 'index.js',
    path: 'dist',
    /* IMPORTANT!
     * You must compile to UMD or CommonJS
     * so it can be required in a Node context: */
    libraryTarget: 'umd'
  },

  plugins: [
    new StaticSiteGeneratorPlugin('main', paths, { locals... })
  ]

};

index.js

// Client render (optional):
if (typeof document !== 'undefined') {
  // Client render code goes here...
}

// Exported static site renderer:
module.exports = function render(locals, callback) {
  callback(null, '<html>...</html>');
};

locals

// The path currently being rendered:
locals.path;

// An object containing all assets:
locals.assets;

// Any locals provided in your config are also available:
locals.hello === 'world';

React Router example

var React = require('react');
var Router = require('react-router');

var Routes = require('./Routes');
var template = require('./template.ejs');

// Client render (optional):
if (typeof document !== 'undefined') {
  Router.run(Routes, Router.HistoryLocation, function(Handler) {
    React.render(<Handler />, document.getElementById('app'));
  });
}

// Exported static site renderer:
module.exports = function render(locals, callback) {
  Router.run(Routes, locals.path, function(Handler) {
    var html = template({
      html: React.renderToString(<Handler />),
      assets: locals.assets,
    });
    callback(null, html);
  });
};