react-router-html-webpack-plugin

• You use React Router
• You use webpack
• You have a full static website hosted on something like GitHub Pages
• You use HTML Webpack Plugin and want a drop-in replacement to make the static html files from React Router routes
• You want React Router HTML Webpack Plugin 😄

Installation

Install the plugin with npm:

$ npm install react-router-html-webpack-plugin --save-dev

Basic Usage

Basic usage copies HTML Webpack Plugin:

// webpack.config.js
import ReactRouterHtmlWebpackPlugin from 'react-router-html-webpack-plugin';
export default {
  // ...
  plugins: [
    // ...
    new ReactRouterHtmlWebpackPlugin({ routes: 'routes.js' }),
    // ...
  ],
  // ...
};

// routes.js
import React from 'react';
import Route from 'react-router/lib/Route';

import DummyComponent from './DummyComponent';

export default (
	<Route path="/">
		<Route path="foo" component={DummyComponent} />
		<Route path="bar" component={DummyComponent} />
	</Route>
);

The resulting files will be:

index.html
foo.html
foo/index.html
bar.html
bar/index.html

Configuration

You can pass a hash of configuration options to React Router Html Webpack Plugin, exactly like HTML Webpack Plugin. Allowed values are the same except for some differences:

• routes: The routes file to generate routes from. Ignores routes and acts exactly like HTML Webpack Plugin when omitted.
• filename: For each route, the file to write the HTML to. Defaults to ['[route].html', '[route]/index.html'] if routes is set. An array of strings writes to each file. For example:
  • With the default configuration, matching foo/bar writes to both <output.path>/foo/bar.html and <output.path>/foo/bar/index.html
  • In the case of the base route (ie /), this value will make assumptions to produce sane values. For example:
    • [route].html or [route]/index.html writes to <output.path>/index.html
    • subdirectory/[route]/index.html writes to <output.path>/subdirectory/index.html