https://github.com/vinaypuppal/preact-cli-plugin-netlify
Preact cli plugin for generating h2push headers and redirects rules for netlify
https://github.com/vinaypuppal/preact-cli-plugin-netlify
netlify preact preact-cli preact-cli-plugin
Last synced: 3 months ago
JSON representation
Preact cli plugin for generating h2push headers and redirects rules for netlify
- Host: GitHub
- URL: https://github.com/vinaypuppal/preact-cli-plugin-netlify
- Owner: vinaypuppal
- License: mit
- Created: 2017-11-11T05:53:03.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T02:55:23.000Z (over 2 years ago)
- Last Synced: 2024-04-14T02:23:14.452Z (about 1 year ago)
- Topics: netlify, preact, preact-cli, preact-cli-plugin
- Language: JavaScript
- Size: 515 KB
- Stars: 25
- Watchers: 2
- Forks: 4
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# preact-cli-plugin-netlify
Preact cli plugin for generating h2push headers and redirect(for SPA) rules for [netlify](https://www.netlify.com/)
[](https://www.npmjs.com/package/preact-cli-plugin-netlify)
[](https://github.com/sindresorhus/xo)
[](https://github.com/prettier/prettier)
---
**Netlify has disabled H2 Server Push. Please check [issue #11](https://github.com/vinaypuppal/preact-cli-plugin-netlify/issues/11) for more info.**
---
## Installation
```bash
yarn add preact-cli-plugin-netlify --dev
```
Alternatively using npm:
```bash
npm i preact-cli-plugin-netlify --save-dev
```
## Usage
And include in your project by creating a `preact.config.js`:
```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
```js
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:
```yml
/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.
```js
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
```js
export default function(config, env) {
netlifyPlugin(config, {
brotli: env.brotli
});
}
```
Which generates below config in `_headers` file
```yml
/*.br
content-encoding: br
```
## Generated files
This plugin genererates `_headers` and `_redirects` files inside build folder
### Example of genererated files
```txt
# _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: ; rel=preload; as=style
Link: ; rel=preload; as=script
Link: ; rel=preload; as=script
/profile
Link: ; rel=preload; as=style
Link: ; rel=preload; as=script
Link: ; rel=preload; as=script
```
```txt
# _redirects
/* /index.html 200
```
You can verify these rules at [netlify playground](https://play.netlify.com/)
## Deploying to netlify
- Install netlify cli
```bash
npm install netlify-cli -g
```
- Deploy build folder
```bash
netlify deploy -p build
```
## License
MIT © [VinayPuppal](https://www.vinaypuppal.com)