Publishing react components as NPM package.

Phani — Thu, 11 Jun 2020 16:46:33 +0000

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

automazers / react-automazers

React Automazers

Reusable components

FormAutomazer
DataTable

View on GitHub

DEV Community: Phani