Skip to main content

npm via CDNs

Most developers currently use npm modules in Deno by importing them using one of many CDNs. You can reference the CDN URL in your Deno code or directly in your browser as an ES Module. These CDN URLs are reusable - they also provide instructions on how to be used in Deno, the browser, etc.

Starting with Deno release 1.28, Deno also offers stabilized support for npm: specifiers, which are a new way of using npm modules in Deno.

Starting with Deno release 1.31, Deno supports resolving npm dependencies from package.json if it exists.

esm.sh​

esm.sh is a CDN that was specifically designed for Deno, though addressing the concerns for Deno also makes it a general purpose CDN for accessing npm packages as ES Module bundles. esm.sh uses esbuild to take an arbitrary npm package and ensure that it is consumable as an ES Module. In many cases you can just import the npm package into your Deno application:

import React from "https://esm.sh/react";

export default class A extends React.Component {
  render() {
    return <div></div>;
  }
}

esm.sh supports the use of both specific versions of packages, as well as semver versions of packages, so you can express your dependency in a similar way you would in a package.json file when you import it. For example, to get a specific version of a package:

import React from "https://esm.sh/react@17.0.2";

Or to get the latest patch release of a minor release:

import React from "https://esm.sh/react@~16.13.0";

Or to get a submodule:

import { renderToString } from "https://esm.sh/react-dom/server";

Or to import regular files:

import "https://esm.sh/tailwindcss/dist/tailwind.min.css";

esm.sh also automatically sets a header which Deno recognizes that allows Deno to be able to retrieve type definitions for the package/module. See Using X-TypeScript-Types header. in this manual for more details on how this works.

esm.sh also provides information on self hosting the CDN.

Check out the esm.sh homepage for more detailed information on how the CDN can be used and what features it has.

UNPKG​

UNPKG is the most well known CDN for npm packages. For packages that include an ES Module distribution for things like the browsers, many of them can be used directly off of UNPKG. That being said, everything available on UNPKG is available on more Deno friendly CDNs.

JSPM​

The jspm.io CDN is specifically designed to provide npm and other registry packages as ES Modules in a way that works well with import maps. While it doesn't currently cater to Deno, the fact that Deno can utilize import maps, allows you to use the JSPM.io generator to generate an import-map of all the packages you want to use and have them served up from the CDN.