nucleate-webpack-plugin
v0.0.1
Published
Webpack plugin to output static HTML rendered by Nucleate
Downloads
4
Readme
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-pluginUsage
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>');
};Default locals
// The path currently being rendered:
locals.path;
// An object containing all assets:
locals.assets;
// Advanced: Webpack's stats object:
locals.webpackStats;Any additional locals provided in your config are also available.
React Router example
The following example uses React Router v1.0.0-rc1 with history.
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import { createHistory, createMemoryHistory } from 'history';
import { Router, RoutingContext, match } from 'react-router';
import routes from './routes';
import template from './template.ejs';
// Client render (optional):
if (typeof document !== 'undefined') {
const history = createHistory();
const outlet = document.getElementById('outlet');
ReactDOM.render(<Router history={history} routes={routes} />, outlet);
}
// Exported static site renderer:
export default (locals, callback) => {
const history = createMemoryHistory();
const location = history.createLocation(locals.path);
match({ routes, location }, (error, redirectLocation, renderProps) => {
callback(null, template({
html: ReactDOMServer.renderToString(<RoutingContext {...renderProps} />),
assets: locals.assets
}));
});
};