Create and Publish an npm package [guide]

UpdatedJanuary 23, 2023

•4 min read•View as Markdown

Create and Publish an npm package [guide]

Ahmadullah Mirza

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

How to Transition from CRA to Vite: A Step-by-Step Guide

CRA has been one of my favorite tool. It gave us superpower to spin up react app with out of the box support for eslint , postcss , testing library,Web vitals and many more.. Since CRA has been depreciated and now React team recommend using framework...

Mar 15, 20255 min read

How to Transition from CRA to Vite: A Step-by-Step Guide

Troubleshooting [zsh: Corrupt History File]: A Simple Guide for Windows, Linux, macOS

If you often use the Zsh shell, at some point, you've probably encountered the frustrating issue of a corrupt history file. This problem can happen suddenly and disrupt your workflow by causing errors when you try to view or search your command histo...

Jan 5, 20254 min read

Troubleshooting [zsh: Corrupt History File]: A Simple Guide for Windows, Linux, macOS

Mastering Git: How to Write Effective Conventional Commit Messages

Commit Message Formats <type>(<optional scope>): <description> empty separator line <optional body> empty separator line <optional footer> Inital Commit chore: init Types API relevant changes feat Commits, that adds or remove a new feature fix C...

Dec 19, 20243 min read

Mastering Git: How to Write Effective Conventional Commit Messages

Access WSL ports Over Lan

Old way [don't use] $remoteport = bash.exe -c "ip -4 addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}'" $found = $remoteport -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}'; if( $found ){ $remoteport = $matches[0]; } else{ echo "The Script Exited...

Feb 14, 20231 min read

JavaScript Tips: Web share Api

const shareData = { title: "au.mirza", url: "https://www.instagram.com/au.mirza" }; const btn = document.getElementById("share"); btn.addEventListener("click", shareHandler); function shareHandler() { if (navigator.share && navigator.canShare...

Feb 9, 20231 min read

Ahmadullah Mirza's Blog

10 posts

{ "name": "@user/package_name", "version": "1.0.0", "description": "A simple description for your package.", "author": "John Doe <user@mail.com>", "main": "src/index.js", "homepage": "https://github.com/user/package_name", "repository": { "type": "git", "url": "git@github.com:user/package_name.git" }, "private": false, "keywords": ["some","keywords","related","to","package"], "publishConfig": { "access": "public" }, }

Building a Module.

Writing the code for the module and organizing it into appropriate files and directories:
The next step is to write the code for your package. The code should be organized into appropriate files and directories to make it easy to understand and maintain.

Defining the entry point for the module in the package.json file:

In package.json, you need to define the main file of your package that will be executed when someone requires it.

Transpiling or compiling the code as necessary:
If your code uses newer JavaScript features that may not be supported by older environments, you will need to transpile or compile it to a more compatible format.

Creating a build script to automate the building process:
To automate the build process, you can create a script in package.json, this script can be executed using npm run <script name>

Testing the built module to ensure it functions as intended:

Before publishing your package, it's important to test it thoroughly to ensure it works as intended. This will help catch any bugs or issues before they are released to the public.

Publishing the Module.

Logging in to an npm account and creating a new version of the module:

To publish your package to the npm registry, you'll need to log in to your npm account using npm login. If you don't have an account, you can create one by running npm adduser.

Creating the documentation and README for the module:
Make sure to create documentation and README for your package with any relevant information and usage instructions. This will help others understand how to use your package and what it does.

Publishing the module to the npm registry:
Once you're logged in, you can publish your package by running the command npm publish. This will make it available for others to download and use.

Best practices for package naming, versioning and documentation:
Follow best practices for package naming, versioning and documentation, for example, Package names should be unique and meaningful, version numbers should follow semantic versioning and make sure to have a README file that explains how to use your package.

Adding CI/CD Pipeline for Automation (GitHub Actions).

Setting up a GitHub Actions workflow to automatically build, test, and publish the module on changes to the code

Configuring the workflow to run the necessary commands, such as npm test and npm publish

Setting up GitHub Actions secrets for authentication with npm.

NPM_TOKEN

you can get it from npmjs.com

GH_TOKEN , you can get it from GitHub.

GitHub token with package read and write permission.

Workflow:

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: npm ci - run: npm 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: npm ci - run: npm publish env: NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} publish-gpr: needs: build 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: npm ci - run: npm publish env: NODE_AUTH_TOKEN: ${{secrets.GH_TOKEN}}

Command Palette

Comments

More from this blog

Setting up Environment and Project.

Building a Module.

Publishing the Module.

Adding CI/CD Pipeline for Automation (GitHub Actions).