Create static html files for single page application using puppeteer and webpack.

Usage no npm install needed!

<script type="module">
  import noveoIoPuppeteerPrerenderWebpackPlugin from 'https://cdn.skypack.dev/@noveo-io/puppeteer-prerender-webpack-plugin';


Puppeteer Prerender Webpack Plugin

This plugin uses puppeteer to visit each specified routes and saves the rendered html files.

Warning: this is a work in progress, I still need to enable the CI build and add more end to end test


  • enable CI
  • add e2e tests
  • add crawling option flag to disable it
  • depends on puppeteer-core instead of puppeteer to avoid the DL of chrome

How to use

Add plugin to webpack config:

const PuppeteerPrerenderPlugin = require('@noveo-io/puppeteer-prerender-webpack-plugin').default;

plugins: [
    new PuppeteerPrerenderPlugin({
        staticDir: path.resolve(__dirname, 'dist'),
        routes: ['/', '/about']


staticDir: string;
routes: readonly string[];
puppeteerOptions?: LaunchOptions; // see Puppeteer docs
expressServerPort?: number; // default is 9999

Default puppeteerOptions:

headless: true,
    defaultViewport: { width: 1440, height: 800 },
    args: [

Development Setup

Install NodeJS v12.

Install dependencies with npm:

npm install

Build plugin with:

npm run build

Start tests (run once):

npm test

JUnit Report

Outputed in _report/jest-junit.xml.

Commit Style and Changelog

Commit with npm run commit

or install commitizen globally with npm i -g commitizen and run git-cz

which will output this:

? Select the type of change that you're committing: (Use arrow keys)
❯ feat:     A new feature
  fix:      A bug fix
  docs:     Documentation only changes
  style:    Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  refactor: A code change that neither fixes a bug nor adds a feature
  perf:     A code change that improves performance
  test:     Adding missing tests or correcting existing tests
(Move up and down to reveal more choices)

Generate the changelog with:

npm run changelog

Push changes and associated tags:

npm run release


npm publish --access public