In this article, we’ll give you a step by step explanation to create an npm package using Create React App (CRA) and show you how to publish a created library or package to an npm repository.

After using so many libraries from the NPM package, one question that may come to your mind is how can we create our own library and publish it to the NPM repository. Therefore we decided to write an article where you can create your own library using React and make it available publicly.

Here we are planning to create an npm package for an image card that helps us to quickly set up the card in a react application. At last we will show you how to publish it and access it in other applications via npm command.

Steps to create an npm package using CRA

1. Setup react app using CRA
2. Implement an image card
3. Install dependencies
4. Update package.json
5. Publish on NPM
6. Output

1. Setup react app using CRA

First of all we will create a simple react application using create-react-app. Run the following command to set up the react app using CRA.

Our focus is to create an image card so we will remove all the unnecessary components and styles from the application. Check the below code for initial setup.

App.js

We have already written the package command in the above code so this will work after the end of the npm publish.

2. Implement an image card

To implement an image card, we should have a directory name as components in the src folder.

We will create two files as ImageCard.js and ImageCard.css in the components directory that will help us to create an image card with the use of the external props.

components/ImageCard.js

components/ImageCard.css

3. Install dependencies

Now it’s time to install the dependencies called Babel that help us to compile our code and convert it into a backwards compatible version of JavaScript.

Run the following command to install babel dependencies.

Add the following code in the package.json file to make this compatible.

package.json

With the help of babel, we’ll transpile our code and move it into the dist directory that will be used to run components after installation of the package.

4. Update package.json

In the next step, we have to make some changes in the package.json file.

First, we need a command to compile the code so we can publish it. Add the following command in the scripts section of the package.json file.

We have to append a few more commands to create/remove dist directory before publishing it and it’s depends on your OS.

For Mac/Linux:

For Windows:

To prepare for publishing, we have to define the main path and module path in package.json file so it can be accessible directly.

Also we have to update the more attributes in the package.json file such as repository, author, keywords, etc. Check the full code of the json file.

package.json

5. Publish on NPM

Finally, you have to follow the below steps to publish this package to the NPM.

• Create an account

  Create an account in the npm if you don’t have one.

• Login to npm

  Run the following command for login to the npm account via terminal. It will prompt you to provide a username and password.

  npm login

  1

  npm login

• Compile your code

  After successful login, you can now prepare your code to publish and for that you have to run the following command.

  npm run publish:npm

  1	npm run publish:npm

  You can see the transpile code in the dist directory.

• Publish the package

  At last, run the following command to publish the package to the npm.

  npm publish

  1	npm publish

  Voila! Our npm package is published now. You can also see the package in the npm account.

6. Output

So finally our package is published to the npm repository and it’s time to install in some other react application.

Same as the other npm packages, Run the following command to install our own package in the react application.

After successful installation, you can import and access it inside any react component.

Add below code in component to use this package.

Check the output in the browser by running the application.

Hope you like it.
Thank you for reading. Happy Coding..!!

Demo & Source Code