This Webpack plugin in intended to be used with html-webpack-plugin in projects using React.js. This plugin allows you to use html-webpack-plugin to build templates automatically with Webpack while also server-side rendering and passing initial state to the React.js client-side app.
There may be an example of the usage over at Kit when I've had time to update it. See the Example output to get an idea what this does.
npm install -S stateful-react-container-webpack-plugin
After installing the plugin, you will need to add it to the plugins in your Webpack configuration:
plugins: [
new HtmlWebpackPlugin(),
new StatefulReactContainerPlugin(),
],The plugin provides three options (passed as an object argument to the plugin) to customize usage:
id(default:container): The id of the React container.js element.attribute(default:state): The name of the data attribute to store the initial state for the React.js app.variable(default:state): The name of the variable containing the initial state in the template.noState(default:false): Omits the data attribute and its value. This is useful if you only want this plugin to generate the container element and are not using server rendering.position(default:'start'): Determines whether the container is immediately after the opening body tag or immediately before the closing tag. Can be either'start'or'end'.
With the default configuration, the <body> tag is replaced with the following
markup:
<body><div id="container" data-state="<%= state %>"></div>This plugin assumes that you're using ejs to render your templates on the
server side (hence the <%= state %> in the output). Using Express.js, you
might render the built template as follows:
// in a request handler
const state = JSON.stringify({
user: req.session.user,
});
res.render('app.ejs', { state });