Share your Nuxt module with others! Publish it on Npmjs for easy installation— Part 2–4
Today, I’m excited to announce that our package, alchemi-flash, is now available on the npm registry, making it easy for others to use and share. To get started, interested users can simply install the module by running npm install alchemi-flash or yarn add alchemi-flash.
Publishing an npm package is incredibly straightforward for Nuxt modules. If you haven’t already, the first step is to create an account on npmjs.com. Once you’re logged in, navigate to the directory where your package.json file is located and run the following command in your terminal:
npm loginIt will ask permission to proceed the authentication in browser, allow this then it will open a tab with following
Retrieve the OTP that was sent to your email address to successfully authenticate with npmjs.com. Once you have entered the OTP, run the following command and it will take care of the rest.
npm run releaseNow that your package is published and ready for the world to see, it’s time for others to easily install it by running either npm install <package-name> or yarn add <package-name>. But wait, there’s more! Don’t forget to include helpful documentation in your package’s README file to make it as easy for others to get started with your amazing package..
Use Github action for automatic package releasing
1. Acquiring the access token
To optimize our workflow and ensure the latest version of our package is readily available to users, we can leverage the power of automation by implementing a Github action that automatically releases new versions to npmjs.com. This will save us time and effort, and allow us to focus on other important aspects of development. So, let’s take advantage of this cutting-edge tool and stay ahead of the competition.
To begin the implementation process for publishing using GitHub Actions, you will need to acquire a required token from npmjs.com. To do so, you must first authenticate your npmjs.com account.
Navigate to the access token page and click on Generate New Token in the drop-down menu. You will be given two options: granular access tokens and classic token. Select the classic token option, which will take you to a new page. Choose the automation type and click the generate button to obtain the necessary token.
After generating the token, revisit the token page to retrieve the newly generated token, and then copy it. You will need to add this token to a Github Secret key later on.
2. Adding token to Github
In order to proceed with the next step of the implementation process, we have to add the token that was generated in the previous step to the environment of the GitHub alchemi-flash repository. This is necessary to ensure that the repository has access to the required permissions for publishing.
To add the token to the repository environment, begin by navigating to the repository page and clicking on Settings in the top right-hand corner of the page. Next, select “Secrets” from the left-hand menu, followed by New Repository Secret.
In the Name field, enter NPM_TOKEN and in the “Value” field, paste the token that you previously copied. Finally, click on the Add Secret button to save the token as a secret in the repository.
3. Adding required action script
If you don’t already have a .github/workflows directory in your repository, create one. Then, create a new file inside this directory called npm-publish.yml. Copy and paste the provided code into the npm-publish.yml file. Don't worry, I will give a diagram which explains the workflow process.
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
name: Node.js Package
on:
release:
types: [created]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- run: yarn install --frozen-lockfile
- run: yarn dev:prepare
- run: yarn test
publish-npm:
needs: build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
registry-url: https://registry.npmjs.org/
- run: yarn install --frozen-lockfile
- run: yarn dev:build
# Update the version in package.json
- name: Update Version
run: |
git config --local user.email "alihassankp27@gmail.com"
git config --local user.name "Ali Hassan"
VERSION=$(echo ${{ github.event.release.tag_name }} | sed 's/v//')
sed -i "s/\"version\": \".*\"/\"version\": \"$VERSION\"/g" package.json
if [ "$(git status --porcelain)" = "" ]; then
echo "No changes to commit"
exit 0
fi
git add .
git commit -m "Bump version to $VERSION"
- name: CHANGELOG.md
uses: mikepenz/release-changelog-builder-action@v3
with:
outputFile: CHANGELOG_NEW.md
- name: Merge changelog
run: cat CHANGELOG_NEW.md >> CHANGELOG.md
- name: Adding commit
run: |
VERSION=$(echo ${{ github.event.release.tag_name }} | sed 's/v//')
if [ "$(git status --porcelain)" = "" ]; then
echo "No changes to commit"
exit 0
fi
git add CHANGELOG.md
git commit -m "Update CHANGELOG.md according to $VERSION"
- name: Push changes
uses: ad-m/github-push-action@master
with:
branch: ${{ github.head_ref }}
github_token: ${{ secrets.GITHUB_TOKEN }}
- name: Publishing the package
run: yarn publish
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
You may encounter some problem when the script trying to commit changes to your repository in order to avoid the problem we have to change the Workflow permission, go to Settings -> Action -> General -> Workflow permissions and choose read and write permissions and save.
4. Lets publish the package
To test the GitHub action, commit the changes you’ve made and push them to your repository. If you don’t have a repository yet, create one first and then push the new code.
Click on the create new release button. it will take to the next screen with the following form.
Create a new tag for your repository. In my case, I used the tag v1.0.7 because I had tried running the workflow multiple times for testing. In your case, the tag should correspond to the version of your module that was last published to npmjs.com. So create new tag, give release title. and you can optionally give your release a description to provide more information about the changes made in this release. Then, make sure the Set as the latest release box is unchecked so that this release will be the latest. Finally, click the Publish release button to create the new release.
4. Lets check the action status
The previous step will trigger the action for publishing the package. You can the check the workflow in Actions tab. You can click on the build or publish-npm jobs so it will expand the details of the running action details.
If the workflow executed successfully, you will see a green check mark next to the tag version. (I’ve attached a screenshot of the successful execution for v1.0.9.) You can also verify the new version has been updated in the Npm registry based on the new release tag. This means we have successfully published the package using Github actions and workflow.
Before wrapping up this blog post, I’d like to provide some details about how the workflow script is evaluated by the Github workflow.
How the script is evaluated ?
