DEV Community

Cover image for Publish Packages via GitHub Packages (feat. yarn)
Brandon Wie
Brandon Wie

Posted on • Updated on

Publish Packages via GitHub Packages (feat. yarn)

#githubpackages #githubactions #npmregistry

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

the page you'll see if you don't check 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}}
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode



  1. 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
Enter fullscreen mode Exit fullscreen mode



  1. 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
Enter fullscreen mode Exit fullscreen mode




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

the error message when the release version is over the one on the package.json file

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.

nice new links and tags you see when you're done!

Additional Info

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

Helpful Links

Please comment down below if there's anything misguiding.

Top comments (0)

Read next

pranta profile image

The Problems with Signals: A Tale of Power and Responsibility

PRANTA Dutta -

midhul profile image

8 Essential JavaScript Array Methods

Midhul P -

henry_maxwell_4d7ab6b652c profile image

Discussing The Role of AI In The Culinary Arts With Mohammad Alothman

Henry Maxwell -

judith677 profile image

#92 — Intersection, Union, And Difference in the Case of Simple Members — Multiple Sets

Judith-Excel-Sharing -