DEV Community

loading...
Cover image for Publishing react components as NPM package.

Publishing react components as NPM package.

Phani
Updated on ・2 min read

React + TS + SCSS + Gulp = NPM.

We all have a shared components folder in our project. Always wondered how to use it across projects. So, after trying multiple methods and failing, following is the simplest way worked out for me to publish React components as NPM package.


Create react app with create-react-app command from terminal

npx create-react-app react-automazers --template typescript

Edit package.json to include


Add tsconfig.json to your project root


Add gulpfile.js to your project root


Signup with https://www.npmjs.com/ if you don’t have account already.


Final steps for publishing NPM package

NPM will run prepare task given in package.json before publishing the module. So let us put together all the steps we have done in prepare script.

"prepare": "gulp",

Prepare task will just run the gulp command. Here are the steps that will happen with this gulp command
Gulp will check for the default task in gulpfile.js
We are running series of tasks in the default task
. clean — Will remove existing output directory — core in our case.
. compile — will compile all typescript to javascript.
. sass — will compile all scss to css files
. copy-css — will copy all the css files generated to output directory


Let’s Publish

Run “npm login” from terminal to login into your npm.

Finally run “npm publish” to publish to the world.


Congrats you have successfully published you npm package 🥳 🎉


Note: As we are not updating typescript files manually to use .css files. Include .css files in your tsx files instead of .scss extension.

gulp sass will automatically generate .css file from .scss file.
run gulp sass:watch for automatically generating css from scss on update of file while development. Complete code can be found @ https://github.com/automazers/react-automazers

React Automazers

Reusable components

  1. FormAutomazer
  2. DataTable



Discussion (2)

Collapse
zawette profile image
mestour zouhair

thanks ! very helpful

Collapse
chhitij profile image
chhitij

Thanks