This package has been deprecated

    Author message:

    This package has been renamed to html-webpack-prerender-plugin. Use that instead.

    html-webpack-ssr-plugin

    0.0.12 • Public • Published

    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
    

    Keywords

    none

    Install

    npm i html-webpack-ssr-plugin

    DownloadsWeekly Downloads

    0

    Version

    0.0.12

    License

    MIT

    Unpacked Size

    69.9 kB

    Total Files

    15

    Last publish

    Collaborators

    • hobbes7878