Publish Packages via GitHub Packages (feat. yarn)

This post is about how to publish a package using GitHub packages and GitHub workflow from an existing repository to a new one.

0. Delete .git and .github folders if you have one, not to have configurations overlapped and cause troubles

1. Create a new empty repo on GitHub

leave it as it is for now, you are going to need the commands that are shown in the screenshot
*if you don't see the same layout, see if you checked "Add README.md"

2. Create a yml file for GitHub Actions

# .github/workflows/release-package.yml
name: on release

on:
    release:
        types: [created]

jobs:
    publish-github-registry:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3
            - uses: actions/setup-node@v3
              with:
                  node-version: 16
                  registry-url: https://npm.pkg.github.com/
            - run: yarn install
            - run: yarn build
            - run: yarn publish
              env:
                  NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

The yml file will run when you "release" the repository. I am going to use GitHub Cli for it.

4. Change some fields in package.json

"name": "@{username}/{repo_name}",
"publishConfig": {
    "registry": "https://npm.pkg.github.com"
},
"main": "dist/index.js",
"repository": {
    "type": "git",
    "url": "git+https://github.com/{username}/{repo_name}.git"
},
"bugs": {
    "url": "https://github.com/{username}/{repo_name}/issues"
},
"homepage": "https://github.com/{username}/{repo_name}#readme"

The information will affect the package page. You can change values and see what affects what. However, name, publishConfig and repository are necessary.

5. Init git and push the local repo to the remote that you created

$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -m master main # if you want to change the name
$ git remote add {url_of_the_repo}
$ git push

6. Create ~/.npmrc if you don't have one and add the settings below

registry=https://registry.yarnpkg.com/ # for yarn

@<username>:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<your auth token>
always-auth=true

7. It's time to release with GitHub Cli

*your GH cli must be connected with your GitHub account for the command to work, or you can do it manually on the repo's release page

gh release create v0.0.2

the version cannot go over the version written on package.json; otherwise, you will see this error on the Actions console

8. Go to the GitHub repository and check the Action tab. You can see the link on the right side of the repo main page when the release is done.

Additional Info

• if you wanna use npm ci as the document, the node version must be over 12

Helpful Links

• GitHub Docs
• Gist - Yarn with GitHub Packages
• Blog Post - lang: KR

Please comment down below if there's anything misguiding.