DEV Community

Sebastian L
Sebastian L

Posted on

Auto publish NPM packages using changesets and GitHub Actions

For this guide we will be publishing a simple NPM typescript package called "npm-package-template-changesets" by using PNPM and the changesets cli. The automation part comes when we make any changes to the library, a bot will open a pull request that will require approval and will contain all the changes to be included in the new version as well as the changelog.
The package will support CJS for older versions and ESM.

1. Install PNPM and create a new project

npm install -g pnpm
Enter fullscreen mode Exit fullscreen mode
pnpm init
Enter fullscreen mode Exit fullscreen mode

This will generate a single package.json file, change the name property to a package name that doesn't exist yet:

Also create a new repository on GitHub and add the url to the repository.url property, it's important for provenance:

{
  "name": "npm-package-template-changesets",
  "repository": {
    "url": "https://github.com/sebastianwd/npm-package-template-changesets"
  },
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "license": "ISC"
}
Enter fullscreen mode Exit fullscreen mode

2. Install dependencies

pnpm add tsup typescript @changesets/cli -D
Enter fullscreen mode Exit fullscreen mode
  • tsup: used to build the typescript code, usage of this dep will depend on your use case
  • typescript: necessary dependency
  • @changesets/cli: used to for versioning and publishing

3. Generate tsconfig files

For this case we will use 2 tsconfig files: tsconfig.build.json and tsconfig.json. The difference between them is that tsconfig.build.json will use the properties composite: true and rootDir: "./src" so the build only looks at files in the src directory, while in development the tsconfig.json will override these settings and use rootDir": "." to enable typescript for config files at the root level.

tsconfig.build.json

{
    "compilerOptions": {
        /* Base Options: */
        "rootDir": "./src",
        "esModuleInterop": true,
        "skipLibCheck": true,
        "target": "es2022",
        "allowJs": true,
        "resolveJsonModule": true,
        "moduleDetection": "force",
        "isolatedModules": true,
        "verbatimModuleSyntax": true,
        /* Strictness */
        "strict": true,
        "noUncheckedIndexedAccess": true,
        "noImplicitOverride": true,
        "module": "preserve",
        "outDir": "dist",
        "sourceMap": true,
        "declaration": true,
        "composite": true,
        "noEmit": true,
        /* If your code doesn't run in the DOM: */
        "lib": [
            "es2022"
        ],
    },
    "include": [
        "src"
    ],
}
Enter fullscreen mode Exit fullscreen mode

tsconfig.json:

{
    "extends": "./tsconfig.build.json",
    "compilerOptions": {
        "composite": false,
        "rootDir": "."
    }
}
Enter fullscreen mode Exit fullscreen mode

4. Add files to be published:

For this example, we will add a single index.ts file in the src directory:
index.ts

export const hello = () => "hello world";
Enter fullscreen mode Exit fullscreen mode

5. Update package.json:

Add scripts:

"scripts": {
 "build": "tsup src",
 "release": "changeset",
 "ci:publish": "pnpm build && changeset publish --access public"
}
Enter fullscreen mode Exit fullscreen mode

Add NPM config:

"publishConfig": {
    "provenance": true,
    "access": "public"
}
Enter fullscreen mode Exit fullscreen mode

Add entrypoints and type config in package.json:

  "type": "module",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    }
  },
  "main": "dist/index.cjs",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
Enter fullscreen mode Exit fullscreen mode

The require and main properties are for end users using CommonJS, which is older than ESM. ESM enables modern syntax and many benefits over CJS, but we will support both for this guide. For ESM the propeties module and import are the ones that apply.

To build files for both .cjs and .mjs extensions, we can use tsup:

tsup.config.ts

import { defineConfig } from "tsup";

export default defineConfig({
  entry: ["src/index.ts"],
  splitting: false,
  clean: true,
  dts: true,
  format: ["cjs", "esm"],
  outExtension({ format }) {
    return {
      js: format === "cjs" ? ".cjs" : ".mjs",
    };
  },
});

Enter fullscreen mode Exit fullscreen mode

6. Adding Github workflow file

.github/workflows/publish.yml

name: Publish
on:
  push:
    branches:
      - master

concurrency: ${{ github.workflow }}-${{ github.ref }}

permissions:
  contents: write
  pull-requests: write
  packages: write
  id-token: write

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 20.x
          cache: "pnpm"
          registry-url: "https://registry.npmjs.org"

      - run: pnpm install --frozen-lockfile
      - name: Create Release Pull Request or Publish
        id: changesets
        uses: changesets/action@v1
        with:
          publish: pnpm run ci:publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

Enter fullscreen mode Exit fullscreen mode

The GITHUB_TOKEN is already present in the Github's repository by default, the NPM_TOKEN value has to be generated in npm with publish permission:

Image description

Then, create a new repo on Github, go to Settings and add it to the secrets:

Image description

Also go to Actions > General

Image description

and enable this option or changesets won't be able to open PRs:

Image description

7. Generate first changeset

  • Init changesets:
pnpm changeset init
Enter fullscreen mode Exit fullscreen mode
  • Create a first commit:
git init
git add .
git commit -m "first release"
Enter fullscreen mode Exit fullscreen mode
  • Run changeset:
pnpm release
Enter fullscreen mode Exit fullscreen mode

If you get an error about "Failed to find where HEAD diverged from main", configure your base branch in .changeset/config.json

You will be prompted some options, for this example we will choose patch:

Image description

  • New files were created in the .changesets folder, for this first release we should amend them to the previous commit so we don't add another one:
git add .
git commit -m "first release" --amend
Enter fullscreen mode Exit fullscreen mode

8. Push to the repository

git push origin master
Enter fullscreen mode Exit fullscreen mode

After the CI is done, check the Pull Requests tab on the repo, there should be one open

Image description

Review it and merge it.

9. Check your package on NPM

Image description

Top comments (0)