html-webpack-ssr-plugindeprecated

A plugin to inject SSR'ed apps into the static markup generated by html-webpack-plugin at build time.

Usage no npm install needed!

<script type="module">
  import htmlWebpackSsrPlugin from 'https://cdn.skypack.dev/html-webpack-ssr-plugin';
</script>

README

html-webpack-ssr-plugin

A plugin to inject SSR'ed apps into the static markup generated by html-webpack-plugin at build time.

npm version Reuters open source software

Why this?

At Reuters Graphics we always serve our pages as static files.

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 render our content at build time and in the client still hydrate a dynamic app.

Prior art

This app is heavily inspired by static-site-generator-webpack-plugin, which was itself an important foundation for Gatsby.js.

Quickstart

  1. Install
$ yarn add -D html-webpack-ssr-plugin html-webpack-plugin@next
  1. Configure webpack.
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackSsrPlugin = require('html-webpack-ssr-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 HtmlWebpackSsrPlugin({ main: '#root' }),
  ],
};
  1. 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>
  1. Make sure your app exports a default function that renders a string of markup.
// src/js/index.js
export default = () => '<p>Hello world!</p>';

Rendered

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

Next

Read the complete guide to the plugin configuration options.

Check out some example configurations:

Testing

$ yarn build && yarn test