preact-cli-plugin-netlify

Preact cli plugin for generating h2push headers and redirect(for SPA) rules for netlify

Installation

yarn add preact-cli-plugin-netlify --dev

Alternatively using npm:

npm i preact-cli-plugin-netlify --save-dev

Usage

And include in your project by creating a preact.config.js:

const netlifyPlugin = require('preact-cli-plugin-netlify');

export default function (config) {
  netlifyPlugin(config);
}

Options

Custom redirects

In addition to the generated redirects, you may want to supply your own rewrite rules. In this case, you can pass array of custom redirects to the plugin, such as

export default function(config) {
    netlifyPlugin(config, {
        redirects: [
          '/api/* https://api.example.com/:splat 200',
          '/custom/* https://custom.example.com/ 200'
        ]
    });
}

which generates the following _redirects file:

/api/* https://api.example.com/:splat 200
/custom/* https://custom.example.com/ 200
/* /index.html 200

Brotli compression

Preact-CLI have a flag --brotli which automatically generates brotli compressed assets for all the javascript files. To serve these files using netlify you can use brotli option as shown below.

For more info please check this blog post https://medium.com/@prateekbh/using-brotli-with-preact-cli-3-ca03125b1e2b

  export default function(config) {
    netlifyPlugin(config, {
        brotli: true
    });
}

Which generates below config in _headers file

/*.br
  content-encoding: br

Generated files

This plugin genererates _headers and _redirects files inside build folder

Example of genererated files

# _headers
/*
  Cache-Control: public, max-age=3600, no-cache
  Access-Control-Max-Age: 600
/sw.js
  Cache-Control: private, no-cache
/*.chunk.*.js
  Cache-Control: public, max-age=31536000
/
  Link: </style.4f36e.css>; rel=preload; as=style
  Link: </bundle.10e55.js>; rel=preload; as=script
  Link: </route-home.chunk.47478.js>; rel=preload; as=script
/profile
  Link: </style.4f36e.css>; rel=preload; as=style
  Link: </bundle.10e55.js>; rel=preload; as=script
  Link: </route-profile.chunk.e4eea.js>; rel=preload; as=script

# _redirects
/* /index.html 200

You can verify these rules at netlify playground

Deploying to netlify

• Install netlify cli

  npm install netlify-cli -g

• Deploy build folder

  netlify deploy -p build

License

MIT © VinayPuppal