vinaypuppal / preact-cli-plugin-netlify

Preact cli plugin for generating h2push headers and redirects rules for netlify

preact-cli-plugin-netlify

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

---

Netlify has disabled H2 Server Push. Please check issue #11 for more info.

---

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

mutateManifest

This plugin consumes the push-manifest.json created by preact-cli and derive Netlify headers from it. There are cases where you might want to add preloads to a certain route or even add/modify a route(e.g. for dymanic routes you'll need to add a * to the route).

For this use mutateManifest as shown to mutate the JSON and the headers will be generated accordingly.

export default function(config) {
    netlifyPlugin(config, {
        mutateManifest: (routes)  => {
          routes['/'].push(
            // Add additonal assets you want to be preloaded at the index route
          );
          return routes;
        }
    });
}

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, env) {
    netlifyPlugin(config, {
        brotli: env.brotli
    });
}

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

preact-cli-plugin-netlify's Issues

Inlining home route causes Link rel=preload to be omitted

Hiya! I use this preact-cli configuration to turn off async component loading for my Home component:
https://github.com/developit/oss.ninja/blob/92643be13a90935a93b0c51e4ebf54e24371de1e/preact.config.js#L25-L32

It looks like that messes up this line, which results in the the headers for / being omitted:

/*
	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
/license
	Link: </style.ec2d7.css>; rel=preload; as=style
	Link: </bundle.e384b.js>; rel=preload; as=script
	Link: </route-license.chunk.b2533.js>; rel=preload; as=script

Keep push-manifest.json as single source of truth

Hi,
This code seems to be duplicated out of preact-cli: https://github.com/vinaypuppal/preact-cli-plugin-netlify/blob/master/index.js#L37-L42

Instead of this, you can just read push-manifest.json and convert it to netlify headers. This keeps you away from diverging from the preact-cli changes

Netlify has disabled H2 Push

Just leaving a heads-up issue here, that Netlify has disabled H2 Push.
They are working on it:
https://twitter.com/philhawksworth/status/1156843941850992640
https://community.netlify.com/t/conditional-headers-based-on-user-agent/415

Though other features of this plugin should still be working.

Cloudflare still supports H2 Push Link Headers so if you serve using Cloudflare in front of Netlify, you should have H2 Push working. (Example: https://github.com/calavera/http2-server-push-demo)
But that would be overkill and would also create some issues for a few browsers: https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/

Do make sure to leave a comment on the issue on Netlify Community Thread if you are interested in this feature from Netlify. I think they are waiting for Cache Digests to land so that they can provide good DX (no config needed) for Cache-Aware H2 Push.

Optional custom headers

Since we have optional custom rewrites through #1
We should allow users to pass custom headers also, we can use https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-netlify#headers as a reference.

Webpack deprecation warning

Thanks for an awesome plugin! We're planning to use it for our preactjs site 👍

There is one warning that pops up on every build and I was able to narrow it down to preact-cli-plugin-netlify. For now it's harmless albeit a bit noisy. This is the output:

(node:12040) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead