Negotiate Pushing Milestone

    preact-cli-plugin-netlify

    1.6.0 • Public • Published

    preact-cli-plugin-netlify

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

    NPM version XO code style styled with prettier


    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

    Install

    npm i preact-cli-plugin-netlify

    DownloadsWeekly Downloads

    48

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    10.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • vinaypuppal