stateful-react-container-webpack-plugin
A simple plugin that adds a React container element with initial state from the server to a template built with HtmlWebpackPlugin
Last updated a year ago by haukur .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install stateful-react-container-webpack-plugin 
SYNC missed versions from official npm registry.

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-plugin

Setup

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 });

Current Tags

  • 0.4.0                                ...           latest (a year ago)

8 Versions

  • 0.4.0                                ...           a year ago
  • 0.3.2                                ...           3 years ago
  • 0.3.1                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.1                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 3
Dependencies (1)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |