stateful-react-container-webpack-plugin
v0.4.0
Published
A simple plugin that adds a React container element with initial state from the server to a template built with HtmlWebpackPlugin
Downloads
37
Maintainers
haukurReadme
stateful-react-container-webpack-plugin
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.
Installation
npm install -S stateful-react-container-webpack-pluginSetup
After installing the plugin, you will need to add it to the plugins in your Webpack configuration:
plugins: [
new HtmlWebpackPlugin(),
new StatefulReactContainerPlugin(),
],Options
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'.
Example output
With the default configuration, the <body> tag is replaced with the following
markup:
<body><div id="container" data-state="<%= state %>"></div>Notes
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 });