In this tutorial I will be showing you how to create UI react NPM packages, which is the most easiest one to transform ideas to packages and modules. This will definitely help you to make your own packages without limitations. ⚗️
However, It's not efficient for modules or some non-UI packages. ⚠️
Table of contents:
- Getting Started
- Create react library
- Enter the folder
- Install node modules dependencies
- Install Example folder node modules dependencies
- Start developing
- Deployment
Getting Started
This tutorial is a step-by-step guide, so don't worry about anything, I will cover everything you need.
If you are ready, let's get started. 🚀
1. Install Create-react-library
First, we have to install a package called create-react-library, so open up your terminal, and install it, using npm or yarn.
# This package requires node >= 10
npm install -g create-react-library
# or
yarn global add create-react-library
If yarn global didn't work check this out.
2. Create react library
then run using npx run this command.
npx create-react-library
after entering the package name, etc. You need to choose the package manager and template(default: JavaScript).
I have to mention that during running this command yarn install will somehow break, so you can manually run it by yourself
3. Enter the folder
then enter your directory using:
cd (your package name)
4. Install node modules dependencies
If your yarn install broke, you can run it now.
# using npm
npm install
# using yarn
yarn install
# or simply
yarn
5. Install Example folder node modules dependencies
After that enter the example folder, this is like a usual react app, in which you can develop and test your package. Cool, Right?
then run yarn install again.
cd example/
yarn install
# or
npm install
6. Start developing
Now everything is alright, and you simply need to split or open a new terminal to run the package.
So now you have two terminals one for running the package, and one for running the /example
react app.
both of them will run with:
yarn start
# or
npm start
now you can open your VSCode(if you're using that) with the terminal in main /
root, using this command:
code .
7. Deployment
Now you have to make a new NPM account.
then back to your terminal, and run
npm init
And enter the information, then you need to authorize, and log in to your account using the terminal using the command:
npm login
After that Just run go to your IDE, and open package.json
, and change this "private": true,
to this "private": false,
.
everything is okay for running this command and publishing your package.
npm publish
My packages
I developed some simple packages with this method, you can check them in my NPM account, and there are GitHub links, so you check codes, too.👍
Hope you enjoy it. 🧑💻👩💻💖
I would like to see your packages, so leave me the link to your npm packages in the comments 💬.
My Github page 🌈
My Portfolio 🚀
Top comments (0)