Create an npm package using Create React App

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.

Checkout more articles on ReactJS/Node.js

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.

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.

npx create-react-app react-image-card

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

import React from 'react';

function App() {
  return (
    <div class="App">
      <h3>Create an npm package using CRA - <a href="https://www.cluemediator.com">Clue Mediator</a></h3>
      <div>
        Run the following command to install the package.
        <pre>npm install react-image-card</pre>
      </div>
    </div>
  );
}

export default App;

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

import React from 'react';
import './ImageCard.css';

const ImageCard = (props) => {
  return (
    <div class="img-card">
      <img class="img" src={props.imageSrc}>
      <div class="card-body">
        <div class="card-title">{props.title}</div>
        <div class="card-text">{props.text}</div>
      </div>
    </div>
  );
};

export default ImageCard;

components/ImageCard.css

.img-card {
  border-radius: 4px;
  width: 320px;
  background: #f5f5f5;
  color: #666;
  overflow: hidden;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

.img-card:hover {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.img {
  width: 320px;
}

.card-body {
  padding: 15px;
}

.card-title {
  font-size: 20px;
  font-weight: 600;
}

.card-text {
  margin-top: 10px;
}

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.

npm install --save-dev @babel/cli @babel/preset-react

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

package.json

{
  "name": "react-image-card",
  ...
  ...
  "babel": {
    "presets": [
      "@babel/preset-react"
    ]
  },
  ...
  ...
}

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.

"publish:npm": "babel ./src/components -d dist --copy-files"

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:

"publish:npm": "rm -rf dist && mkdir dist && babel ./src/components -d dist --copy-files"

For Windows:

"publish:npm": "(if exist dist rmdir /s /q dist) && mkdir dist && babel ./src/components -d dist --copy-files"

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

{
  "name": "react-image-card",
  ...
  ...
  "main": "dist/ImageCard.js",
  "module": "dist/ImageCard.js",
  "files": [
    "dist",
    "README.md"
  ],
  ...
  ...
}

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

{
  "name": "react-image-card",
  "version": "0.1.2",
  "private": false,
  "babel": {
    "presets": [
      "@babel/preset-react"
    ]
  },
  "main": "dist/ImageCard.js",
  "module": "dist/ImageCard.js",
  "files": [
    "dist",
    "README.md"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/cluemediator/react-image-card.git"
  },
  "keywords": [
    "react",
    "card"
  ],
  "author": "Clue Mediator",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/cluemediator/react-image-card/issues"
  },
  "homepage": "https://github.com/cluemediator/react-image-card#readme",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "publish:npm": "rm -rf dist && mkdir dist && babel ./src/components -d dist --copy-files"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/preset-react": "^7.9.4"
  }
}

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

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

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

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.

npm install react-image-card

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

Add below code in component to use this package.

import ImageCard from "react-image-card";
...
...
<imagecard imagesrc="https://www.cluemediator.com/wp-content/uploads/2020/05/create-an-npm-package-using-create-react-app-clue-mediator.png" title="Create an npm package using Create React App" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">
</imagecard>

Check the output in the browser by running the application.

Output - Create an npm package using Create React App - Clue Mediator

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

Demo & Source Code

Github Repository