DEV Community

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

Posted on • Edited 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

oliviabarn profile image

Why Intel Integrated Graphics Are Perfect for Work Tasks

OliviaBarn -

nix_25 profile image

Scaling AI Infrastructure: Challenges and Best Practices

Nix -

etherealaether profile image

Australian Parliament's Bill to Ban Social Media for Under-16s is Two-pronged

Ethereal Aether -

amxn-yadav profile image

My Portfolio: A Showcase of Web Development Skills with Next.js & Redux

Aman Yadav -