Countdown Of The Top Package Registries For Deno
Tags: deno, typescript, javascript
Published: 2020-06-25 10:16:38

[Deno](https://deno.land/) is a cool new secure runtime for JavaScript and TypeScript that lots of great built-in features like secure by default, linting, formatting and testing.This makes it a great language for starting out and writing basic code examples very quickly and easily.

However, as you set out to start on a more complex application, you are likely not going to want to write every last piece of code from scratch! It is certainly simpler to build on some libraries others have created and tested so you can focus on just the exciting parts of the application that you want to create!

In Node most people are used to the de-facto package registry is [NPM](https://www.npmjs.com/) that allows them to search for and install packages into their projects using the `npm` CLI. So what options are available for Deno programmers?

Here I count down 6 of the best ways to install packages for Deno:

# 6. The internet

That's right you can just use the internet - it's not a mistake! So what do I mean by this...?

Deno's module import system mirrors that of the browser, you can import a dependency from any URL (or accessible filesystem) that returns valid ECMAScript Module (ESM) code. This means if you find a piece of code on the internet you can just import straight from the URL!

For example, say you are writing a server / web framework for Deno and you need some functionality to convert a path pattern matching syntax (e.g. `/users/:id`) into regex. You know that popular Node frameworks like Express use the `path-to-regexp` NPM module to do this, so you take a look at the GitHub repo (https://github.com/pillarjs/path-to-regexp) and see that the main code is written in TypeScript as an ESM! This means that to use the code, all you need to do is import the raw version like so:

```ts
import { pathToRegexp } from "https://raw.githubusercontent.com/pillarjs/path-to-regexp/v6.1.0/src/index.ts";
```

And there you have it, you have the code you need and there was no need for a package manager at all - you imported straight from GitHub code! In fact, this is _exactly_ how the popular web framework [Oak](https://github.com/oakserver/oak) gets it's path matching logic! Check it out here: https://github.com/oakserver/oak/blob/main/deps.ts#L48.

# 5. NPM

Wait... I didn't think Deno supported NPM? Well you would be _mostly_ right, [Deno is not compatible, in general, with Node (NPM) packages](https://deno.land/v1#compatibility).

There is however a [Node compatibility layer](https://deno.land/x/std@0.65.0/node) being built as part of the Deno standard library that hopes to bridge the gap between Node and Deno by allowing you to use Node like APIs and also supporting a form of `require` so you can import NPM modules.

For example, check out the [CommonJS Loading example](https://deno.land/std/node/#commonjs-module-loading) in the package README, which demos the following:

```ts
import { createRequire } from "https://deno.land/x/std@0.65.0/node/module.ts";

const require = createRequire(import.meta.url);

// Loads native module polyfill.
const path = require("path");

// Loads extensionless module.
const cjsModule = require("./my_mod");

// Visits node_modules.
const leftPad = require("left-pad");
```

[Supported built-ins](https://deno.land/std/node/#supported-builtins) are still somewhat limited though, so I wouldn't be overly-optimistic that you will be able to use this method to import any particularly complex NPM packages.

# 4. Pika

[PIKA](https://www.pika.dev) is an exciting new project which has the ambitious aims of improving [web performance by 90%](https://www.pika.dev/about)!

One of it's offerings is a [CDN](https://www.pika.dev/cdn) that allows you import any NPM package as a modern ESM import. Even if a package wasn't written as ESM, they'll do the work to convert it for you.

For example, this means you can just get going with something like [Preact](https://github.com/preactjs/preact) really easily by just importing it from the Pika CDN:

```ts
import { Component, render } from 'https://cdn.pika.dev/preact@^10.0.0';
```

The project is still a going through a lot of development, and in practice I've found that some of the more complex modules cause an error when trying to import. For example, you are currently unable to import React into a Deno project using Pika. Doing so results in the following error:

![Deno error message when importing React via Pika CDN](https://dev-to-uploads.s3.amazonaws.com/i/v0aotsip7z6e3eeygq7u.png)

Note that if you try to import a NPM module that relies on any Node APIs at all (or in any of it's sub-dependencies), then this solution won't work for Deno.

# 3. JSPM

[JSPM](https://jspm.org/) is similar to Pika. It provides a module CDN allowing any package from NPM to be directly loaded in the browser and other environments, like Deno(!), as a fully optimized native JavaScript module (ESM).

Generally I have found JSPM to be a lot more stable than Pika, and able to successfully convert complex NPM packages to ESM.

You have likely already seen JSPM being used in other blog posts as it is currently a popular way to install [React](https://reactjs.org/) into a Deno application - for example, check out my tutorial on how to [write a React SSR application in Deno](https://dev.to/craigmorten/writing-a-react-ssr-app-in-deno-2m7).

```ts
import React from "https://jspm.dev/react@16.13.1";
```

As you can see in the above example, it supports importing specific versions, and you can also import from a package subpath like `jspm.dev/pkg/subpath`.

# 2. deno.land/x

Probably the most popular way to import a Deno module is to use the official DenoLand third party module registry <https://deno.land/x>.

Deno module creators can create a PR into the core [deno website](https://github.com/denoland/deno_website2) project and update the [database.json](https://github.com/denoland/deno_website2/blob/master/database.json) with their module's details.

The registry now holds over 600 modules written for Deno, including many ports of popular Node packages which are easy to find using the search functionality.

To install a package from DenoLand registry, just add the package name, optional version and any subpaths - much like the other package CDNs.

```ts
import { superdeno } from "https://deno.land/x/superdeno@2.1.1/mod.ts";
```

# 1. x.nest.land

[NestLand](https://nest.land/) is a new package registry for Deno that is built on the [blockchain](https://en.wikipedia.org/wiki/Blockchain). It is immutable, free, secure and decentralised(!) - I think it’s captured what a modern package registry for something like Deno should look like really well.

Because packages are published to the permaweb they can **never** be deleted, so all the major issues with NPM such as the [left-pad incident](https://blog.npmjs.org/post/141577284765/kik-left-pad-and-npm), which almost brought down the entire Node ecosystem, can't happen.

Another great factor is that the NestLand registry is independent of [git](https://git-scm.com/) and any source code management platform for that matter, so you can easily publish a Deno package with nothing more than some code on your local filesystem and the Deno CLI.

To publish a package to the DenoLand registry, you just need to perform the following:

1. [Create an account to generate an API key](https://nest.land/#start). This isn't some sort of sign-up, you simply just provide a unique username to be associated with your publishes - no invasion of privacy or hassle!
1. Install the `eggs` CLI:

    ```console
    $ deno install -A -f --unstable -n eggs https://x.nest.land/eggs@0.2.1/mod.ts
    ```

1. Link your API key with the `eggs` CLI:

    ```console
    $ eggs link [your key]
    ```

    You only need to do this once and then you can setup and publish as many packages as you like.

1. Initialize your repository for use with the NestLand:

    ```console
    $ eggs init
    ```

    This sets up a `egg.json` which contains all the information required to publish your code to the NestLand registry.

1. And finally, publish your code:

    ```console
    $ eggs publish
    ```

    Boom! You've added your module to the registry and it's safe in the Blockchain. :tada:

You can find out more about setting up your project to work with NestLand in their [docs](https://nest.land/docs).

So how about installing a module from the registry? Just head to the [NestLand Gallery](https://nest.land/gallery) choose a package, and it will display all of the information you need including available versions, the URL to import, and lots of useful package info. Because the package files are all stored in the Blockchain, if you chain the version the README also updates for that version!

![Viewing a Deno module in the NestLand gallery](https://dev-to-uploads.s3.amazonaws.com/i/oktgsus1xuwrq4dz4ptl.png)

You can then import your chosen module using the provided URL, for example:

```ts
import { opine } from "https://x.nest.land/opine@0.21.2/mod.ts"
```

---

That's it gang! Hope the countdown was useful! 🚀

What's your favourite place to find and install Deno modules?

Is there something I've missed off the list?

Drop your comments and questions below!