An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
How to publish an unscoped npm package to Github Package Registry
The scenario
I created a project, bootstrapped with tsdx, and deployed it to npm. I achieved this by logging into npm in my terminal and runningnpm publish
or npm publish --access public
The challenge
Subsequently, I decided to publish to the github package registry. That's when I realized that to publish to the github registry, the name of my package needed to be scoped (unlike with npm where this is optional).
According to npm
Scopes are a way of grouping related packages together, and also affect a few things about the way npm treats the package.
Each npm user/organization has their own scope, and only you can add packages in your scope. This means you don't have to worry about someone taking your package name ahead of you. Thus it is also a good way to signal official packages for organizations.
In summary, scoping a package allows two packages with the same name to co-exist, as long as they are scoped differently. Typically, a scoped package would be have the name
field in your package.json
be something like: @someuser/common-package-name
or @someorganization/common-package-name
but mine was more like common-package-name
.
Please note that your package does not have to be @someuser
on github package registry. It could be @anything
but in my case, it seemed like a good idea to just scope it to my username.
Naturally this would not be a problem if your npm package was already scoped like @someuser/common-package-name
on npm. In my case it was not
The Solution
After some googling, I found this closed issue
Basically, alehechka created a great github action to so solve this problem.
The only issue with it was, if your github username had any uppercase characters in it, it will not successfully deploy to the github package registry.
Note
While you could manually do all of this each time you want to deploy, using github actions would be a better and more efficient way to do this.
So, I made some slight modifications to his solution, and with just two steps, you could deploy your package to the github registry and npm.
- Step 1: add this to your package.json
"publishConfig": { "registry": "https://registry-url" }
Step 2: create a workflow file. For instance, deploy.yml and paste in:
name: npm-publishon: push: branches: - master # Change this to your default branchjobs: npm-publish: name: npm-publish runs-on: ubuntu-latest steps: # Publish to Node Package Manager - name: Checkout Repo uses: actions/checkout@main - name: Setup Node.js (NPM) uses: actions/setup-node@master with: node-version: '12.x' registry-url: 'https://registry.npmjs.org' - name: Use cached node_modules uses: actions/cache@master with: path: node_modules key: nodeModules-${{ hashFiles('**/yarn.lock') }} restore-keys: | nodeModules- - name: Install dependencies run: yarn install --frozen-lockfile env: CI: true - name: Update Publish Config run: sed -i 's^registry-url^registry.npmjs.org^' package.json - name: Publish to NPM run: npm publish --access public env: CI: true NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} gpr-publish: name: gpr-publish runs-on: ubuntu-latest steps: # Publish to GitHub Package Registry - name: Checkout Repo uses: actions/checkout@main - name: Store lowercase actor name run: | echo 'actor_name<<EOF' >> $GITHUB_ENV echo ${{ github.actor }} | tr "A-Z" "a-z" >> $GITHUB_ENV echo 'EOF' >> $GITHUB_ENV - name: Store package name run: | echo 'package_name<<EOF' >> $GITHUB_ENV grep -Po '"name": *\K"[^"]*"' package.json | grep -oP '"\K[^"\047]+(?=["\047])' >> $GITHUB_ENV echo 'EOF' >> $GITHUB_ENV - name: Setup Node.js (GPR) uses: actions/setup-node@master with: node-version: '12.x' registry-url: https://npm.pkg.github.com/ scope: '${{ env.actor_name }}' - name: Use cached node_modules uses: actions/cache@master with: path: node_modules key: nodeModules-${{ hashFiles('**/yarn.lock') }} restore-keys: | nodeModules- - name: Install dependencies run: yarn install --frozen-lockfile env: CI: true - name: Update Package Name run: | sed -i 's,"name": "${{ env.package_name }}","name": "@${{ env.actor_name }}/${{ env.package_name }}",' package.json cat package.json - name: Update Publish Config run: | sed -i 's^registry-url^npm.pkg.github.com/@${{ env.actor_name }}^' package.json cat package.json - name: Publish to GitHub Package Registry run: npm publish --access public env: CI: true NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
That's really all you need.
The changes I made to this are:
Adding the following script to convert the username to lowercase
- name: Store lowercase actor name run: | echo 'actor_name<<EOF' >> $GITHUB_ENV echo ${{ github.actor }} | tr "A-Z" "a-z" >> $GITHUB_ENV echo 'EOF' >> $GITHUB_ENV
I added this to get the package name from the package.json and store in an environment variable.
- name: Store package name run: | echo 'package_name<<EOF' >> $GITHUB_ENV grep -Po '"name": *\K"[^"]*"' package.json | grep -oP '"\K[^"\047]+(?=["\047])' >> $GITHUB_ENV echo 'EOF' >> $GITHUB_ENV
I then updated to the github action to change the name of the package in the package.json, to a scoped version.
- name: Update Package Name run: | sed -i 's,"name": "${{ env.package_name }}","name": "@${{ env.actor_name }}/${{ env.package_name }}",' package.json cat package.json
and finally, I switched out every use of ${{ github.actor }}
with @${{ env.actor_name }}
which is the author's name in lowercase.
Original Link: https://dev.to/akinaguda/how-to-publish-an-unscoped-npm-package-to-github-package-registry-19mg
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To