Create NPM Package in 5 Minutes.

NPM Package can be used in some ways, either functional or UI. But the main purposes is to create something that is reusable. There are many ways to publish npm and use it publicly or privately. For this post I will be using the official website NPMJS and react for UI framework

1. Create Application

You have to create/install the framework first, if you using react by running:

npx create-react-app app-name

or if you want to you want to use typescript:

npx create-react-app app-name --template typescript

but for this demo I'm using typescript, you can use either way.

2. Delete Unused File and Create Directory for Components

In the boilerplate app , delete everything in /src except App.js, App.css and index.ts and create folder called /lib and inside it there are /index.ts and /components folder. And inside component create react components and styles. Later the /lib directory will be a folder to read what component that will be reusable in NPM Package. The directory after deleting files should look like this:

3. Create React Component Files

NPM Package by it self a code to be reusable, that can be a form of UI , function , boilerplate, etc. For this post I'll be making package for UI component. For the simple component I already write a button code with some parameter props that can be used for custom the component UI. You can create Button.tsx inside the /lib directory that we prepare previously. You can use your own code or modify my code:

import React, { ButtonHTMLAttributes} from 'react'
import "./styles/Button.css";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>{
  primary?: boolean;
  backgroundColor?: string;
  msize?: "small" | "medium" | "large";
  label: string;
}
export const MaiuiButton = ({
  primary = false,
  msize = "medium",
  backgroundColor,
  label,
  ...props
}: ButtonProps) => {
  const mode = primary ? "maiui-button--primary" : "maiui-button--secondary";
  return (
    <button
      className={["maiui-button", `maiui-button--${msize}`, mode].join(" ")}
      style={{ backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

And to give an customable UI component, we have to style it. Again, you can custom it as you like or modify my code. I'm using CSS for styling, you can use SASS , tailwind, etc. Everything is oke. For the code I had prepare:

.maiui-button {
  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  border: 0;
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  transition: 0.5s ease;
}
.maiui-button--primary {
  background-color: black;
  color: white;
  border: 1px solid white;
}
.maiui-button--primary:hover {
  background-color: white;
  color: black;
  border: 1px solid black;
}
.maiui-button--secondary {
  background-color: white;
  color: black;
  border: 1px solid black;
}
.maiui-button--secondary:hover {
  background-color: black;
  color: white;
  border: 1px solid white;
}
.maiui-button--small {
  font-size: 12px;
  padding: 10px 16px;
}
.maiui-button--medium {
  font-size: 14px;
  padding: 11px 20px;
}
.maiui-button--large {
  font-size: 16px;
  padding: 12px 24px;
}

After adding the style we have to modify index.ts/index.js so we will be able to use the component when we install the package. Simply import and export the component in the index. You can also create more than just a button, maybe input or radio button. Just don't forget to put the component you just made into the index.

import { MaiuiButton } from "./components/Button";

export { MaiuiButton };

4. Install Rollup

Rollup is a package that help complied react component and make it usable as component. To install it you have to run the code in cmd:

npm install rollup @rollup/plugin-node-resolve @rollup/plugin-typescript @rollup/plugin-commonjs rollup-plugin-dts --save-dev

and:

npm install rollup-plugin-postcss --save-dev

We also need some set configuration for rollup. At the the top of the folder, create file rollup.config.js that contain:

/* eslint-disable import/no-anonymous-default-export */
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import postcss from "rollup-plugin-postcss";

const packageJson = require("./package.json");

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),

      // CSS
      postcss(), 
    ],
  },
  {
    input: "dist/esm/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],

    // CSS
    external: [/\.css$/],
  },
];

You can change the typescript and ts into javascript and js. Then at tsconfig.json/jsconfig.json file we need to adjust some config to be like:

{
  "compilerOptions": {
    "outDir": "lib/esm",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "jsx": "react",
    "declaration": true,
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "lib"]
}

Then at package.json , under scripts add rollup command to build with this command:

"build": "rollup -c"

Before you run npm build , you should add additional script to package.json and that will be:

"main": "dist/cjs/index.js",
 "module": "dist/esm/index.js",
 "files": [
    "dist"
  ],
 "types": "dist/index.d.ts",
 "rootDir": "src",

Then after that you can run npm build , if the code is successfully run you should see dist folder:

5. NPM configuration and setup

Then run npm init , and you will be ask about project name , source , etc.

Then to release it to public you should create NPM first obviously, go to their web and create a account.

After you made account you can try to login from CL using npm login and enter the username, password and one time login.

6. Publish

After done with all the files, setup and configuration it’s time to publish your file to public, go run: npm publish --access=public if there is no error then your package will be publish and can be installed by command npm install app-name