A plugin to prerender and inject JavaScript apps into the static markup generated by html-webpack-plugin at build time.
At Reuters Graphics we are all about JAM stack. Avoiding the overhead of server maintenance keeps us lean, minimizes our technical debt and protects our ability to scale with our audience. But being serverless sometimes makes it more complex to use the tools we like to their best effect.
For example, we like to use modern frameworks like React, but rendering our content only in the client makes our pages slower for our readers and less SEO friendly.
This plugin lets us reap the benefits of server-side rendering in those frameworks but in the context of a static page. With it, we can pre-render our content at build time and, in the client, still hydrate a dynamic app.
This app is heavily inspired by static-site-generator-webpack-plugin, which was itself an important foundation for Gatsby.js.
- Install
$ yarn add -D html-webpack-prerender-plugin html-webpack-plugin@next
- Configure webpack.
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPrerenderPlugin = require('html-webpack-prerender-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
path: './dist',
filename: '[name].js',
// This is important, because your app must
// be executable in both a node AND browser
// environment.
libraryTarget: 'umd',
},
// ...
plugins: [
new HtmlWebpackPlugin({
template: './src/templates/index.html',
}),
new HtmlWebpackPrerenderPlugin({ main: '#root' }),
],
};- Create a template with a root container for your app.
<!-- src/templates/index.html -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head></head>
<body>
<div id='root'></div>
</body>
</html>- Make sure your app exports a default function that renders a string of markup.
// src/js/index.js
export default = () => '<p>Hello world!</p>';<!-- src/templates/index.html -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head></head>
<body>
<div id="root"><p>Hello world!</p></div>
<script src="main.js"></script>
</body>
</html>Read the complete guide to the plugin configuration options.
Check out some example configurations:
- Multiple apps
- Static markup
- React app
- React/Redux app with preloaded state
- Usage with react-helmet-async
- Async rendering
$ yarn build && yarn test
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent