PREFACE
Hello everyone! It's been a while, and today I'm back with another article in my series on knowledge and experiences I've gained throughout my professional journey.
For those who are new here, my articles generally cover topics related to Backend, Blockchain, and DevOps. Through sharing knowledge with the community, I hope to receive feedback that helps me improve my skills and deepen my expertise in these fields. I'll also continue to publish personal reflections on work and life from my own perspective.
If you've worked with JavaScript, especially as a ReactJS or NodeJS developer, you're probably already familiar with npm (Node Package Manager) libraries and use them regularly in your projects.
But have you ever wondered how an npm library is built and published for the community to use?
In today's article, I'll walk you through how I developed and published my own library, eth-blockchain-helper, to the npm registry to support the Web3 developer community.
This article is divided into two parts:
- Part 1: WHAT? (Create Your Package) β What problem is my npm library designed to solve?
- Part 2: HOW? (Publish Your Package) β How can we publish a library for the community to use?
And here is the star of today's article: eth-blockchain-helper.
Let's get started by installing and exploring the library!
npm i eth-blockchain-helper
// ES6 import BlockchainService from 'eth-blockchain-helper'; // ES5 const BlockchainService = require('eth-blockchain-helper').default;
CONTENTS
What? β Create Your Package
eth-blockchain-helper is a library I built with TypeScript to help Web3 developers interact with smart contracts on Ethereum and EVM-compatible networks, including Ethereum, Binance Smart Chain, and Polygon.
Additional Web3 utilities will continue to be improved and added in future releases.
The library's main features include:
- Create Raw Transaction: Create a raw transaction.
- Sign Raw Transaction: Sign a raw transaction.
- Send Raw Transaction: Broadcast a signed transaction to the network.
- Get Transaction Receipt: Retrieve the receipt of a submitted transaction.
- Get Event Logs: Retrieve event logs emitted by a transaction.
Let's go through the steps involved in developing and completing an npm package.
Step 1: Initialize
First, set up the project as you would any other project by running
npm init. Then, configure the necessary files.Since I'm using TypeScript, I also need a
tsconfig.json file to configure the TypeScript compiler.Step 2: Develop
Next, write the library's implementation files just as you would in a regular project.
In my case, I've placed all the library's logic in
index.ts and exported it as a default module in the form of a class.Once the implementation is complete, test it to ensure that the logic behaves as expected and meets the original requirements.
For the sake of brevity, I'll assume you've already implemented your own library and verified that everything works correctly. Let's move on to the next step.
Step 3: Build
After verifying that the implementation works as intended, we can build the project into the
dist/commonjs directory, preparing it for publication to the npm registry.Note: If your library is written in JavaScript, you can use it directly by defining the entry point for your implementation file (
index.js). In that case, you can skip the TypeScript-to-JavaScript compilation step used in my project.How? β Publish Your Package
This section walks you through publishing your own npm library to the registry so that other developers can install and use it through npm.
Step 1: Register an npm Account
Before publishing an npm package, you'll need an account on the npm registry.
You can register directly on the official website: https://www.npmjs.com/
Step 2: Configure package.json
The
package.json file describes your npm package and its metadata. Here are the key fields to pay attention to:{ "name": "eth-blockchain-helper", "version": "1.0.0", "description": "package helper for ethereum blockchain and EVM based network", "main": "dist/commonjs/index.js", "types": "dist/commonjs/index.d.ts", "files": [ "dist" ], "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "ts-node index", "build": "tsc" }, "author": "KNHH", "license": "ISC", "repository": { "type": "git", "url": "https://github.com/khiem20tc/eth-blockchain-helper.git" }, "homepage": "https://github.com/khiem20tc/eth-blockchain-helper#readme", "dependencies": { "ethereumjs-tx": "^2.1.2", "web3": "^1.8.0" }, "keywords": [ "ethereum", "eth", "blockchain", "smartcontract", "signature", "transaction", "tx", "web3", "dapp", "solidity", "helper", "npm" ] }
Here's a quick overview of the important fields:
name: The package name, which must be unique on npm.
version: The current package version.
description: A brief description of the package.
main: The entry point for the package.
types: The entry point for TypeScript type declarations.
files: Specifies which files and directories should be included when publishing.
scripts: Defines commands for common tasks such as testing, starting, and building.
author: The package author's name.
license: The package's license.
repository: The source code repository.
homepage: The package's homepage or documentation page.
dependencies: The dependencies required by the package.
keywords: Search terms that help developers discover the package.
Step 3: Log In to npm
Next, run
npm login to sign in to your npm account and complete any required authentication, such as entering a one-time password (OTP).Step 4: Publish to npm
Once you're logged in and your package is ready, simply run:
npm publish
Your package will be published to the npm registry, allowing other developers to install and use it.
Step 5: Install Your npm Package
Finally, verify that your package has been published successfully and works as expected.
You can install a specific version from the npm registry using:
npm install package_name@version
Then, import the library into your project and test its functionality.
Step 6: Upgrade Your npm Package
If you want to improve your library or release a new version in the future, update the implementation as needed, increment the version in
package.json, and publish the new release using the steps described above.CONCLUSION
This article has introduced the essential concepts and steps for creating and publishing a simple npm library for the community to use.
Here's a quick summary of the process:
- Step 1: Initialize the project with
npm init
- Step 2: Write your package
- Step 3: Log in to npm
- Step 4: Publish your package
Finally, I hope you'll take a moment to try out my library, eth-blockchain-helper, using the command below and share your feedback and suggestions for improvement.
npm i eth-blockchain-helper@latest
If you find the library useful, please consider giving it a STAR on GitHub to show your support:
I hope this article provides useful knowledge to the community. I'd love to hear your feedback, and I look forward to seeing you again in future articles!
:)) Many thanks, everyone!