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

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

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
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

abhay_yt_52a8e72b213be229 profile image

Docker Logging Drivers: A Comprehensive Guide for Effective Log Management

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Docker Distributed Storage: GlusterFS vs. Ceph for Persistent Container Data

Abhay Singh Kathayat -

ashercarneiro profile image

well... thinkpads are awesome

アッシャー -

abreujp profile image

Working with Strings in Elixir

João Paulo Abreu -