DEV Community

Rafael De Leon
Rafael De Leon

Posted on

Publishing JSR package with Github Actions that react-hook-use-cta used

JSR

Publishing to Javascript Registry is straightforward.

  • Sign-in using a github account
  • Click Publish a package.
    • Create a new scope create a new scop Name your scope
    • Or select an existing scope Image description
  • Name your new package and create name package and create

JSR Package Settings

Make sure you go to your package settings to fill out

Image description

  • description of your package
  • compatibility. I selected Node and Deno since my package is for consumption

Image description

Fill this section out to link your jsr package with your github repo. JSR makes publishing easy through this linking. Better than having to make tokens.

Publish setup

JSR walks you through publishing

Image description

You can setup up jsr.json by copying and replacing
@your-scope/your-package to your jsr.json file in the repo root directory

{
  "name": "@your-scope/your-package",
  "version": "0.0.0",
  "license": "MIT",
  "exports": "./src/index.ts"
}
Enter fullscreen mode Exit fullscreen mode

You'll be able to publish through CLI, or github actions. I will be going over how to update via the .github/workflows/publish-package.yml file from the previous article

Github actions

.github/workflows/publish-package.yml should now look like

name: Publish to package registry

on:
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
    inputs:
      jsr:
        type: boolean
        default: true
        description: publish to JSR
      npm:
        type: boolean
        default: true
        description: publish to npm

  workflow_call:
    inputs:
      jsr:
        type: boolean
        default: true
      npm:
        type: boolean
        default: true

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      id-token: write # The OIDC ID token is used for authentication with JSR.

    steps:
      - name: Checkout repository
        if: ${{ inputs.jsr || inputs.npm }}
        uses: actions/checkout@v4

      - name: Set up Node.js
        if: ${{ inputs.jsr || inputs.npm }}
        uses: actions/setup-node@v4
        with:
          node-version: "lts/*"
          registry-url: 'https://registry.npmjs.org'
          cache: npm

      - name: Restore cache
        if: ${{ inputs.jsr  || inputs.npm  }}
        uses: actions/cache@v4
        with:
          path: |
            ~/.npm
          key: ${{ runner.os }}-publish-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-publish-

      - name: Install npm dependencies
        if: ${{ inputs.jsr  || inputs.npm  }}
        run: npm ci

      - name: Publish to jsr
        if: ${{ inputs.jsr }}
        run: npx jsr publish

      - name: Publish to npm
        if: ${{ inputs.npm  }}
        run: npm publish --provenance --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
Enter fullscreen mode Exit fullscreen mode

I included workflow_dispatch to let you select which to publish in case you need to do them individually from github actions.

workflow_call is also included to let you reuse the workflow. I'll go over how to use this in another article.

Setup JSR versioning

Unless you want to manually update jsr.json, you can use npm version to also update jsr.json using:

util/versioning.cjs

const fs = require( 'node:fs', );

const pkg = require( '../package.json', );
const jsr = require( '../jsr.json', );

jsr.version = pkg.version;

fs.writeFile(
  'jsr.json',
  JSON.stringify(
    jsr,
    null,
    2,
  ),
  {
    encoding: 'utf8',
    flags: 'w',
  },
  ( err, ) => {
    if ( err ) {
      console.error( 'error updating version', err, );
      return;
    }
    console.log( 'jsr.json version updated', );
  },
);
Enter fullscreen mode Exit fullscreen mode

Changes to package.json

I am only showing the necessary changes while trying to make it easy to copy and paste.

{
  "scripts": {
    "version": "node util/versioning.cjs && git add jsr.json && npm run build && git add -A dist",
  }
}
Enter fullscreen mode Exit fullscreen mode

jsr.json will now update using the new semver npm will get when you call npm version.

Now you are setup for publishing through Github actions.

The next step is setting up your github pages using nextjs

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay