# nginx-push-webpack-plugin

> Simplifies creation of nginx conf to push your webpack bundle files through HTTP2

Latest version **1.0.3** (published 2020-08-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install nginx-push-webpack-plugin
pnpm add nginx-push-webpack-plugin
yarn add nginx-push-webpack-plugin
bun add nginx-push-webpack-plugin
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-08-06 |
| First published | 2020-07-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8.0 |
| Dependencies | 2 |
| Unpacked size | 8.2 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ricky Jiao |
| Maintainers | ricky.jiao86 |
| Keywords | webpack, plugin, nginx, http-push, nginx-push-webpack-plugin |

## Links

- npm: https://www.npmjs.com/package/nginx-push-webpack-plugin
- Repository: https://github.com/RickyJiao/nginx-push-webpack-plugin
- Homepage: https://github.com/RickyJiao/nginx-push-webpack-plugin#readme
- Issues: https://github.com/RickyJiao/nginx-push-webpack-plugin/issues
- npm.io page: https://npm.io/package/nginx-push-webpack-plugin

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) 4.17.19
- [@types/webpack](https://npm.io/package/@types/webpack.md) 4.41.8

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2020-08-06
- 1.0.2 — 2020-07-28
- 1.0.1 — 2020-07-28
- 1.0.0 — 2020-07-28

## README

<div align="center">
  <h1>HTML Webpack Plugin</h1>
  <p>Plugin that simplifies creation of nginx conf to push your webpack bundle files through HTTP/2</p>
</div>

## Installation

Using npm:

```sh
$ npm install --save nginx-push-webpack-plugin
```

Using yarn:

```sh
$ yarn add nginx-push-webpack-plugin
```

This is a [webpack](http://webpack.js.org/) plugin that simplifies creation of nginx conf to push your webpack bundle files through HTTP/2.

HTTP/2 has released for a few years, it dramatically improves performances a lot. One noticeable feature is HTTP push which is able to push static resources such as javascript, style sheet and image during first request to server. Typically, the first request for SPA is index.html. Nginx support HTTP/2 server push in version 1.13.9 with new directive `http2_push` https://www.nginx.com/blog/nginx-1-13-9-http2-server-push/.

However, the new directive prefers fixed file name such as `style.css` without hash. Hashing filenames in webpack is pretty important for [long term caching](https://github.com/webpack/docs/wiki/long-term-caching). To enable `http2_push` in SPA application, it seems that we need to manually update our nginx conf for each build. That's why we introduce this plugin to create `http2_push` directive for each webpack build. There is no need to update main nginx conf each time, we only need to `include nginx.push.conf`. `nginx.push.conf` will be automatically updated.

## Example

This plugin will automatically generated `http2_push` statement for each output initial chunk. Just add the plugin to your webpack as follows:

### webpack.config.js

```js
// webpack.config.js
const NginxPushWebpackPlugin = require('nginx-push-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'index_bundle.js'
  },
  plugins: [
    new NginxPushWebpackPlugin()
  ]
}
```

This will generate a file dist/nginx.push.conf containing the following:
```conf
# Automatically generated by NginxPushWebpackPlugin, don't change it manually
# Please include this file in your nginx web server directive
# ```
#   include nginx.push.conf;
# ```

location = /index.html {
  http2_push /index_bundle.js;
}
```

Include the generated `nginx.push.conf` in main `nginx.conf` as below:
```conf
server {
    # listen on port 433 with https
    listen 443 ssl http2;

    server_name example.com;

    # ssl cert
    ssl_certificate /usr/share/cert/server/servercert.pem;
    ssl_certificate_key /usr/share/cert/server/serverkey.pem;

    # where the root here
    root /usr/share/app;

    # what file to server as index
    index index.html;

    # include nginx push conf to enable HTTP/2 server push
    include nginx.push.conf;
}
```

## Contributing

Please feel free to submit any issues or pull requests.

## License

MIT

---
_Source: https://npm.io/package/nginx-push-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._