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
- FormAutomazer
- DataTable
Top comments (2)
thanks ! very helpful
Thanks