https://github.com/hph/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 html-webpack-plugin.
https://github.com/hph/stateful-react-container-webpack-plugin

html-webpack-plugin react webpack

Last synced: 10 days ago
JSON representation

A simple plugin that adds a React container element with initial state from the server to a template built with html-webpack-plugin.

• Host: GitHub
• URL: https://github.com/hph/stateful-react-container-webpack-plugin
• Owner: hph
• Created: 2016-06-17T15:18:41.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-04-18T12:48:30.000Z (over 5 years ago)
• Last Synced: 2024-10-13T07:41:33.647Z (25 days ago)
• Topics: html-webpack-plugin, react, webpack
• Language: JavaScript
• Homepage:
• Size: 8.79 KB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# stateful-react-container-webpack-plugin

This [Webpack](https://webpack.github.io/) plugin in intended to be used with

[html-webpack-plugin](https://github.com/ampedandwired/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](https://github.com/hph/kit)

when I've had time to update it. See the [Example output](#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:

```javascript

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 `` tag is replaced with the following

markup:

```html



```


### 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:

```javascript

// in a request handler

const state = JSON.stringify({

  user: req.session.user,

});

res.render('app.ejs', { state });

```