Publish Packages via GitHub Packages (feat. yarn)
Tags: githubpackages, githubactions, npmregistry
Published: 2022-11-01 13:19:05

> 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 "Add README.md" after create repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77bctd5kgpsqfjwbvg4u.png)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
```yml
# .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](https://cli.github.com/manual/) for it.

### 4. Change some fields in `package.json`

```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
```bash
$ 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
```config
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
```bash
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
![the error message when the release version is over the one on the package.json file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3nzv9n73abehtrsnwcs7.png)

### 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!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zakiaze4pdwk8wvncy1i.png)

### Additional Info
- if you wanna use `npm ci` as the document, the node version must be over 12

### Helpful Links
- [GitHub Docs](https://docs.github.com/en/packages/quickstart)
- [Gist - Yarn with GitHub Packages](https://gist.github.com/ThallyssonKlein/8d24eb20c101c1f20036cee77e24524c)
- [Blog Post - lang: KR](https://min9nim.vercel.app/2021-05-17-github-packages/)

Please comment down below if there's anything misguiding.