JSR Registry

Step-by-step guidelines on how to publish a Deno package to the JSR registry.

In this article, learn how to publish the deno package on JSR and how to use it with the nextjs project.

Rajdeep Singh

Published in

FrontEnd web

7 min readMar 7, 2024

The JSR is a new registry for TypeScript, similar to npm and GitHub Registry.

It helps you to distribute your TypeScript and JavaScript package across browsers and every runtime, such as Deno, Node, and Bun.

The JSR registry is open-source and built by the Deno team. JSR has some cool features, such as

Only ECMAScript modules Support
Native TypeScript support
Cross-runtime and Browser support
Outstanding Developer Experience
Documentation support with JS Doc.

To learn more about JSR Registry Features, check out the JSR documentation.

Publishing a package on the JSR registry is much easier than using the npm and GitHub packages registry. Even if you use the GitHub action, you need to run one command to publish a package.

The JSR registry has very simple steps for publishing a package, whether you are a beginner or a pro developer.

Steps

Create an Account in the JSR registry.
Create Scopes for Your Package
Publish the Package
∘ Locally with Command
∘ With GitHub Action
How to install the JSR registry package with pnpm and nextjs?
Conclusion

Create an Account in the JSR registry.

First, create an account on the JSR registry. If you already have one, then log in to your account.

Create an account in JSR Registry — Create an account or log in to It.

Create Scopes for Your Package

Open the JSR website, click on your image tab, then click the publish a package button.

After clicking the publish a package button, you will see this type of page in your browser.

First, create a scope and enter the Scope name. The scope name is your username or organization name. The JSR scope is similar to that of npm organizations.

The JSR scope helps you manage your members. You can add or remove them, and members can create new packages and publish a package version.

Last click on the Create button. It creates your scope.

Select Your scope, enter your package name, and click the Create button.

It creates a dashboard for your package, which looks like this.

Package dashboard look like this. — The package dashboard looks like this.

Publish the Package

The last step is to publish your package on the JSR registry. First, you have an jsr.json or deno.json file in your package. Otherwise, create it.

// jsr.json / deno.json
{
  "name": "@officialrajdeepsingh/slugify",
  "version": "0.1.0",
  "exports": "./mod.ts"
}

The jsr.json or deno.json contains three compulsory properties.

name: the name of your package.
version: The version of the package.
exports: The export files.

You do not need to create both file jsr.json or deno.json. Just create one file.

There are two methods available to publish your package.

Locally with Command
With GitHub Action

Locally with Command

There are two commands to publish the package from your laptop or locally.

npx jsr publish
# or
deno publish

You can publish the package with both jsr and deno commands CLI. In this example, we used the jsr command to publish the package.

npx jsr publish

The command output looks like this.

gitpod /workspace/slugify (main) $ npx jsr publish
Checking for slow types in the public API...
Visit https://jsr.io/auth?code=BRCA-UXMQ to authorize publishing of @officialrajdeepsingh/slugify
Waiting...
Authorization successful. Authenticated as Rajdeep singh
Publishing @officialrajdeepsingh/slugify@0.1.0 ...
Successfully published @officialrajdeepsingh/slugify@0.1.0
Visit https://jsr.io/@officialrajdeepsingh/slugify@0.1.0 for details

Completed in 13s

The jsr publish command first asks you to log in with a jsr registry account. Then, jsr asks you for permission to publish the package. Click the Approve button to give permission to the jsr CLI.

Permission to Publish a package on jsr — Permission to Publish a package

After our package was successful, our package page looked like this.

With GitHub Action

To publish a package with GitHub action, first copy the following GitHub action and paste it into your project.

# .github/workflows/publish.yml

name: Publish

on:
  push:
    branches:
      - main

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      id-token: write # The OIDC ID token is used for authentication with JSR.    
    steps:
      - uses: actions/checkout@v4
      - run: npx jsr publish

Then, Enter your repository name and click the link button. Your repository is linked. Whenever you push code into your GitHub repository, your package is published.

If You have already published a package with the jsr publish command line, go to the package setting page.

Scroll down to the GitHub Repository Section, enter the repository name, and click the save button.

After the repository is linked successfully, you will see the unlink repository button.

Your package is published whenever you push your code into your GitHub repository.

To update the package, change the version in your package and re-run your npx jsr publish command or push your code into the GitHub Repository. Your package has been updated in the JSR registry.

How to install the JSR registry package with pnpm and nextjs?

Installing the JSR package for your project is very easy and similar to installing the npm registry. In your project, you can install the JSR registry package using npm, yarn, or pnpm.

In this example, I installed the slugify package in the nextjs project, which we published recently.

If you're running, jsr add command in your nextjs or existing project with pnpm to install the jsr registry package.

pnpm dlx jsr add @officialrajdeepsingh/slugify

You face this type of error.

➜  next-testing-app git:(main) pnpm dlx jsr add @officialrajdeepsingh/slugify

Packages: +3
+++
Progress: resolved 3, reused 3, downloaded 0, added 3, done
Setting up .npmrc...ok
Installing @officialrajdeepsingh/slugify...
$ pnpm add @officialrajdeepsingh/slugify@npm:@jsr/officialrajdeepsingh__slugify
 ERR_PNPM_REGISTRIES_MISMATCH  This modules directory was created using the following registries configuration: {"default":"https://registry.npmjs.org/"}. The current configuration is {"default":"https://registry.npmjs.org/","@jsr":"https://npm.jsr.io/"}. To recreate the modules directory using the new settings, run "pnpm install".

Don't be wary of following commands create .npmrc file in your project root level.

.npmrc
@jsr:registry=https://npm.jsr.io

To fix this issue, you need to run the package install command.

pnpm install
# or 
npm install 
# or
yarn install

The command output looks like this.

➜  next-testing-app git:(main) ✗ pnpm install                                  
✔ The modules directory at "/home/officialrajdeepsingh/medium/next-testing-app/node_modules" will be removed and reinstalled from scratch. Proceed? (Y/n) · true
Recreating /home/officialrajdeepsingh/medium/next-testing-app/node_modules
Lockfile is up to date, resolution step is skipped
Packages: +354
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 354, reused 354, downloaded 0, added 354, done

dependencies:
+ next 14.1.3
+ react 18.2.0
+ react-dom 18.2.0

devDependencies:
+ @types/node 20.11.25
+ @types/react 18.2.64
+ @types/react-dom 18.2.21
+ autoprefixer 10.4.18
+ eslint 8.57.0
+ eslint-config-next 14.1.3
+ postcss 8.4.35
+ tailwindcss 3.4.1
+ typescript 5.4.2

Done in 5.4s

Now you can re-run the jsr add command to install the slugify package from the jsr registry.

pnpm dlx jsr add @officialrajdeepsingh/slugify

The command output looks like this,

➜  next-testing-app git:(main) ✗ pnpm dlx jsr add @officialrajdeepsingh/slugify

Packages: +3
+++
Progress: resolved 3, reused 3, downloaded 0, added 3, done
Installing @officialrajdeepsingh/slugify...
$ pnpm add @officialrajdeepsingh/slugify@npm:@jsr/officialrajdeepsingh__slugify
Packages: +1
+
Progress: resolved 363, reused 354, downloaded 1, added 1, done

dependencies:
+ @officialrajdeepsingh/slugify <- @jsr/officialrajdeepsingh__slugify 0.1.1

Done in 2.2s

Completed in 2s

You can use slugify like another package, import the slugify function, then call it and pass a text or string you need to convert into slug.

// app/page.tsx

import {Slugify} from "@officialrajdeepsingh/slugify";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">

          <h1>Slugify: {Slugify("Hello World")} </h1>
        
      </div>
      </main>
  );
}

Conclusion

The JSR registry is a good alternative to the npm registry. However, the JSR registry is not the only registry available. The GitHub package registry is also available.

The publishing package experience with the JSR registry is smooth; whether you are a beginner or a pro developer, you can publish a package in the JSR registry with one command.

I used the npm and GitHub package registry to publish the package, but I never considered the GitHub Package as an excellent alternative to the NPM registry. Now that the situation has changed, the JSR registry is a solid alternative to the NPM Registry.

You can hire me as a freelance developer with Upwork and other updates. If my articles help you share with others on social media, follow me on Twitter (X) and Medium.