NPM stands for Node Package Manager. It’s a library and registry for JavaScript software packages. NPM also has command-line tools to help install the different packages and manage their dependencies. They’re open-source and have become the center of JavaScript code sharing. The important point is that it is free to use.
Using NPM makes it possible for us to manage our project dependencies very easily. It defines everything inside the package.json of our project. Running npm install on your project command line will install all the dependencies inside your project. package.json all makes it very easy to manage our project versions.
A package.json file is created by your package manager (in this case npm) and exists at the root of a project in JavaScript/Node. To generate a package.json file you can run npm init. You’ll then be asked to fill out some metadata for your project such as:
The package.json file is in JSON format and is used for managing the project’s dependencies, scripts, versions, etc. Here’s a simple example:
{
"name": "My project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "jest",
},
"license": "ISC"
}In the package.json file, there is also a script property. This can be used to run command line tools that are installed within the project’s local context. Common scripts you might use are things like:
Of course, you are flexible to customize scripts that make sense for your specific project.
Related read: How To Create NPM Package For React Native?
Now below I will give a small demonstration of how you can build and publish your React Components as an NPM library.
To get started, create one React Components project. Open the command line terminal inside the directory where you want to store your project with the create-react-app CLI.
npx create-react-app npm-library-example # then enter the new directory cd npm-library-example # then start the server npm start
Since npx installs the latest versions of react-scripts without installing anything globally, I recommend using it.
npm-library-example/
README.md
node_modules/
package.json public/
Index.html
Favicon.ico
Manifest.json
src/
Index.js
App.js
App.css
Logo.svg
.gitignore
package-lock.jsonYour folder structure should look like this.
Now inside the src folder create another folder named button-library.
And inside it create two files and write the following code,
1.button.js
import React from 'react'; // Reusable Button component
function Button({ text, onClick})
{
return (
<button className=”button” onClick={onClick}>
{text}
</button>
);
}
export default Button;2. style.css
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
background-color: #0074d9;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
}
.button:active {
background-color: #003366;
}Now you can use and test this component inside your App.js.
const handleButtonClick = () => {
alert('Button Clicked!');
};
return (
<div>
<h1>Reusable Button Example</h1>
<Button text="Click Me" onClick={handleButtonClick} className="primary-button" />
</div>
);
}Now if that works we can move on to the next step.
Now open CLI and change your directory to button-library to initialize the package.
cd button-library
To initialize the package run the following command.
npm init -y
This will create a package.json file inside the root directory of your project. It should look like this:
{
"name": "button-library",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}Now let’s re-arrange our button-library directory so we can use it for bundling.
| - src | - index.js | - index.css | - button.jsx - package.json
Inside the index.js file write the following code.
import Button from './button.js'
const returnLibrary = () => {
return {
Button: Button
You can also export other components here
}
}
export default returnLibrary()Now let’s install the bundlers. I recommend using rollup since it is very easy to use for bundling libraries as compared to Webpack. You can also use any other bundler you are more exposed to or comfortable with.
Open a command line prompt inside your button-library folder and install the following dependencies.
Note: Make sure to install them as devDependencies by adding the –save-dev flag with your command. Because these dependencies will only be used by you when in development mode if you don’t this will make library users install them if you add them inside the dependencies.
npm install rollup --save-dev
Rollup will be used to compile our code. But since we definitely might want to compile into es5 syntax we shall have to install babel and a plugin to use with rollup. You should not that JSX syntax is special and is not valid in JavaScript so you should also install support for it.
So type the following command int in the command line to install all required packages.
npm install @babel/cli @babel/core @babel/preset-env @babel/preset-react @rollup/plugin-babel --save-dev
Since we are also bundling CSS then we shall have to install a styles bundler for rollup we shall use rollup-plugin-styles.
npm install rollup-plugin-styles autoprefixer --save-dev
We can also install babel runtime helpers. This is important if we are bundling the library with babel.
npm install @babel/runtime
npm install @babel/plugin-transform-runtime --save-devIf you want source maps then install this plugin too.
npm install rollup-plugin-sourcemaps --save-devWe now need to configure Rollup and Babel so that our code can be compiled.
In the root directory create these two files and write the following code.
1. rollup.config.js
import styles from "rollup-plugin-styles";
import autoprefixer from "autoprefixer";
import babel from "@rollup/plugin-babel";
import sourcemaps from "rollup-plugin-sourcemaps";
// the entry point for the library
const input = "src/index.js";
//
var MODE = [
{
fomart: "cjs", //commonjs
},
{
fomart: "esm", //ECMAScript Modules
},
{
fomart: "umd", //universal module definition
},
];
var config = [];
MODE.map((m) => {
var conf = {
input: input,
output: {
// then name of your package
name: "button-library",
file: `dist/index.${m.fomart}.js`,
format: m.fomart,
exports: "auto",
interop: "auto",
},
// this externelizes react to prevent rollup from compiling it
external: ["react", /@babel\/runtime/],
plugins: [
// these are babel comfigurations
babel({
exclude: "node_modules/**",
plugins: ["@babel/transform-runtime"],
babelHelpers: "runtime",
}),
// this adds sourcemaps
sourcemaps(),
// this adds support for styles
styles({
postcss: {
plugins: [autoprefixer()],
},
}),
],
};
config.push(conf);
});
export default [...config];2 .babelrc
{
"presets": [
"@babel/preset-react",
"@babel/preset-env"
]
}Now go to package.json edit the scripts section and change it to this.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rollup -c"
},To create the component build run the following command.
npm run build
This will compile your package into the dist directory.
Your package.json should look like this, It should be different from the previous one when we initialized the package.
Now that our build is ready let’s edit the package.json to make our library ready to publish.
{
"name": "button-library",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rollup -c"
},
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.23.0",
"@babel/core": "^7.23.0",
"@babel/plugin-transform-runtime": "^7.22.15",
"@babel/preset-env": "^7.22.20",
"@babel/preset-react": "^7.22.15",
"@rollup/plugin-babel": "^6.0.3",
"rollup": "^3.29.4",
"rollup-plugin-sourcemaps": "^0.6.3",
"rollup-plugin-styles": "^4.0.0"
},
"dependencies": {
"@babel/runtime": "^7.23.1"
}
}This is an important step, inside package.json as you can see the main change is to dist/index.cjs.js which is our build file.
Now if you plan to publish this library you can add your name as an author of the package by mentioning your name inside the package.json as an author like this.
author: {
"name":"Ashish Arora",
"email":"ashish.arora@mindbowser.com",
"url":"https://www.mindbowser.com/author/ashish-arora/"
}Add peerDependencies.
Add peer dependencies like this inside your package.json.
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}Now we are ready to publish.
For this you need an npm account, so create one if you don’t have one.
Your button-library folder should look like this,
| | - dist | - index.esm.js | - index.cjs.js | - index.umd.js | - src | - index.js | - index.css | - button.jsx | - .babelrc | - package.json | - rollup.config.js
Since we would not prefer to publish our source code to the npm repository, we only want to publish our compiled code. For this, we need to create a .npmignore file that will prevent unused files from being pushed.
## the src folder
src
.babelrc
rollup.config.js
## node modules folder
node_modules
## incase you have a git repositiory initiated
.git
.gitignore
CVS
.svn
.hg
.lock-wscript
.wafpickle-N
.DS_Store
npm-debug.log
.npmrc
Config.gypi
package-lock.jsonSometimes we might try to create and publish a library with the same name as some other library that is already there on NPM or its name is identical. So it is better to search for a suitable library name before publishing it.
Type and run the following command to search for a name,
npm search [library-name]
If you find that no one is using this name you can go ahead, otherwise, you need to change the name inside the package.json.
To test the library you have to go to other projects on your computer and type.
npm link /path/to/your/library
The README.md file should contain a description of your package for npm to display. If you’ve ever created a GitHub repository, you’re probably familiar with it.
If everything goes well, you can publish it by typing.
npm publish
The above demonstration could introduce you to a few new concepts or things you’re not familiar with. So below I have tried to clear the confusion for you with a summary of those concepts.
Above I have explained almost everything, but why you need to start developing and publishing your libraries so below are some examples.
This guide walks you through using npm to turn your React Components into a reusable library. It covers npm basics, managing dependencies, and publishing your library. By following these steps, you can streamline your development process, promote code sharing, and simplify deployment. Embracing npm empowers you to collaborate effectively and enhance your development workflow.
Launch Faster with Low Cost: Master GTM with Pre-built Solutions in Our Webinar!
Register Today!
I collaborated with Mindbowser for several years on a complex SaaS platform project. They took over a partially completed project and successfully transformed it into a fully functional and robust platform. Throughout the entire process, the quality of their work...
President, E.B. Carlson
Mindbowser and team are professional, talented and very responsive. They got us through a challenging situation with our IOT product successfully. They will be our go to dev team going forward.
Founder, Cascada
Amazing team to work with. Very responsive and very skilled in both front and backend engineering. Looking forward to our next project together.
Co-Founder, Emerge
The team is great to work with. Very professional, on task, and efficient.
Founder, PeriopMD
I can not express enough how pleased we are with the whole team. From the first call and meeting, they took our vision and ran with it. Communication was easy and everyone was flexible to our schedule. I’m excited to...
Founder, Seeke
Mindbowser has truly been foundational in my journey from concept to design and onto that final launch phase.
CEO, KickSnap
We had very close go live timeline and MindBowser team got us live a month before.
CEO, BuyNow WorldWide
If you want a team of great developers, I recommend them for the next project.
Founder, Teach Reach
Mindbowser built both iOS and Android apps for Mindworks, that have stood the test of time. 5 years later they still function quite beautifully. Their team always met their objectives and I'm very happy with the end result. Thank you!
Founder, Mindworks
Our CISO was extremely impressed by Mindbowser’s work. It is pretty rare to see this kind of clean security report so early in the company’s journey. Huge Thank you for the disciplined approach here.
Founder, TrestleIQ
Mindbowser has delivered a much better quality product than our previous tech vendors. Our product is stable and passed Well Architected Framework Review from AWS.
CEO, PurpleAnt
The flexibility and capacity of the Mindbower staff has been impressive.
CEO, ProofPilot
I am happy to share that we got USD 10k in cloud credits courtesy of our friends at Mindbowser. Thank you Pravin and Ayush, this means a lot to us.
CTO, Shortlist
Mindbowser is one of the reasons that our app is successful. These guys have been a great team.
Founder & CEO, MangoMirror
Kudos for all your hard work and diligence on the Telehealth platform project. You made it possible.
CEO, ThriveHealth
Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.
CEO, SMILINGMIND
They were a very responsive team! Extremely easy to communicate and work with!
Founder & CEO, TotTech
We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.
Co-Founder, TEAM8s
Mindbowser was very helpful with explaining the development process and started quickly on the project.
Executive Director of Product Development, Innovation Lab
The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.
Co-Founder, Vesica
Mindbowser is professional, efficient and thorough.
Consultant, XPRIZE
Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.
Founder, S.T.A.R.S of Wellness
MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app. They had put together fantastic wireframes for us.
Co-Founder, Flat Earth
Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.
Founder, Child Life On Call
As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.
Founder, Courtyardly
The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!
CEO, SDOH2Health LLC
Mindbowser was easy to work with and hit the ground running, immediately feeling like part of our team.
CEO, Stealth Startup
Mindbowser was an excellent partner in developing my fitness app. They were patient, attentive, & understood my business needs. The end product exceeded my expectations. Thrilled to share it globally.
Owner, Phalanx
Mindbowser's expertise in tech, process & mobile development made them our choice for our app. The team was dedicated to the process & delivered high-quality features on time. They also gave valuable industry advice. Highly recommend them for app development...
Co-Founder, Fox&Fork
