npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

http2-express-bridge

v1.0.7

Published

wrapper for express app to work with http2 protocol

Downloads

16,720

Readme

Http2 Express Bridge

A wrapper to create a http2 server with express.js application

Installation

Can be installed same as any other npm package.

Node.js version 10 or higher is recommended.

$ npm install http2-express-bridge

Usage

const express = require('express')
const http2Express = require('http2-express-bridge')
const http2 = require('http2')
const { readFileSync } = require('fs')

const app = http2Express(express)
const options = {
    key: readFileSync('<Certificate Key>'),
    cert: readFileSync('<Certificate file>'),
    allowHTTP1: true
};


app.get('/', function (req, res) {
  res.send('Hello World')
})

const server = http2.createSecureServer(options, app)

server.listen(3000, () => {
        console.log(`listening on port 3000`)
})

It will create a http2 server with all the perks of using http2 on supported browsers, but will revert back to Http1.1 on browsers that dont. This should work out of the box without any further modification on your existing express application.

No Browser supports http2 without https connection. so the above approach is recommended. However, http2.createServer should also work, as long as https connection is used at the edges like HAProxy.

This can also be used as ESModules with 'import' syntax and Typescript (check examples folder).

Server Push

One of the most hyped advantages of http2 is server push. To make it easier, push() method is added to the response.

const express = require('express')
const http2Express = require('http2-express-bridge')
const http2 = require('http2')
const path = require('path')
const { readFileSync } = require('fs')

const app = http2Express(express)
const options = {
    key: readFileSync('<Certificate Key>'),
    cert: readFileSync('<Certificate file>'),
    allowHTTP1: true
};

// this will create a static path from which files are served
const staticPath = path.join(__dirname, '<Path>')

app.use(express.static(staticPath))

app.get('/bar', (req, res) => {

    // This accepts a single path or an array of paths. Path should be same as the ones in html below
    // Second argument is the Root directory from which the files are being served
    res.push(['/bar.js', '/foo.js'], staticPath)
    res.send(`
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Bar Document</title>
            </head>
            <body>
                This is a bar document.
                <script src="/foo.js"></script>
                <script src="/bar.js"></script>
            </body>
        </html>`);
})

const server = http2.createSecureServer(options, app)

server.listen(3000, () => {
        console.log(`listening on port 3000`)
})

As seen in the example above, server push can be used. It is built on the belief that server push is a luxury not a necessity. Hence, if the browser does not accept push, or there is an error in the path, It will not crash the application but only throw an error.

On the topic of server push, lots of guidelines have to be followed to have actual performance gains. See Rules of Thumb for HTTP/2 Push for the details.

Without this guidelines, pushing files on every request even when the browser has cached the files will result in bad performance. http2-express-autopush is recommended to be used instead of programatically pushing the files. It is an expressjs middleware based on h2-auto-push. This middleware automatically pushes the files when required. You can learn more about it in the above two links.