unpkg: the free CDN for your npm packages

unpkg is a free content delivery network (CDN) that automatically distributes public packages published to npm.

unpkg partners with cloudfare and heroku to make this automatic distributing possible. This is a pretty amazing service to offer for free.

A few neat features of unpkg

You can specify a semantic version in your unpkg url, including semantic version ranges and qualifiers like ^ and ~ which will source the maximum satisfying version.

• unpkg.com/react@^16/umd/react.production.min.js sources the latest minor version of react 16 (16.5.2 as of this writing).

• unpkg.com/react@~16.4/umd/react.production.min.js sources the latest patch version of react 16.4 (which is 16.4.2)

Just navigating to unpkg.com/{moduleName} will automatically source the latest version of the file specified under “main” in the package.json of the module.

• unpkg.com/react redirects to the latest index.js file in the react package (16.5.2 as of this writing).
• index.js is specified in react’s package.json under the “main” key, which is why it is returned over react.production.min.js.

You can also see a directory of all files in the package by navigating to unpkg.com/{moduleName}/ <– note the slash at the end of the URL.

• This also lets you explore which other versions of the package are currently published.

Finally, while unpkg’s documentation notes that assets are browser-cached for 4 hours, I found that assets were actually cached for 1 year (via cache-control headers).

My Use Case for unpkg

I work on a team that supports Uptake’s design system. The design system is built as a set of CSS classes and html templates (ala bootstrap), and give your site an uptake look-and-feel. We distribute the design system via npm as a node_module.

We cannot guarantee that all consumers of the design system work in the npm ecosystem, though: our Data Science teams need to leverage design system CSS to build uptake branded reports and components, but they work primarily with python and the pip ecosystem. Forcing consumers to introduce another package management tool just to get a few files seems heavy.

It would be better if non npm users could just drop a link tag into the head of their HTML page that would grab the design system CSS off of a CDN.

While exploring CDN options, we discovered unpkg and realized that we just get that functionality for free. This was an amazing find, and saved us a ton of engineering effort to try to figure out how to configure and manage a CDN on our own.