Create and Publish packages to npm - React Component Library using tsdx

This is the easiest and fastest way I know to create and publish a package to NPM. In this video we will publish a simple react component to NPM using tsdx, typescript and storybook.

We will also see how versions work and how to use "npm version".

At the end of the video we will consume our new published package from a new create-react-app project using typescript.

----
----

Timeline
00:00 Introduction
00:15 Example: why you may need to publish packages
01:00 Show tsdx documentation
01:48 Check package name and Create npm account
02:18 npm login
02:26 Create our component library using tsdx
04:40 Change name to scoped package
05:00 npm publish and npm publish --access public
06:43 npm version - change the version of your package
09:15 Add a new component
10:38 Named exports vs Default exports
12:03 Is it possible to automate all this?
12:45 Consume our package in a new create-react-app project

----
Follow me on:

[DesignDensity]

Thank you, Bruno, you explain things in a very unique way, you absolutely put yourself in your viewers' shoes and explain from that perspective which is not something we could find with other YouTubers, I'm glad I came across your this video to lead me to your channel.

This channel deserves 100K+ subs. Thank you so much for the time and effort, Bruno. You now have 1 more subscriber 😊👌

[ahmedelnawawy]

All appreciation for your complete and excellent explanation

[mdkawsarislamyeasin]

I watched the whole video.
And you explain very well.
Thanks!

[khoudiryaya]

Thank you Bruno.
great video. I've just published my first package.

[fagundezantony]

Thanks for sharing! Great content! This utility (tsdx) it's awesome!!

Grettings from Argentina!

[ismoilshokirov]

Mr. Bruno Thank you so much for your lessons, they have really improved my skills during this last year.
I am looking forward to a video about the testing of Next JS apps. Thank you

[sarnyaia]

It was a really helpful video!
Thank you, very much!!!

[mansafamara]

Bruno your skin is so smooth. why 😂 ~ I love your content though you’re a lifesaver

[Harsh-dfvp]

Thank you soo much. You're a life saver.

[endizhupani]

Wow, I spent hours trying to get the typescript components to publish on npm until I found this ang it done in 5 mins. Thanks!

[mhmtlgly]

Obrigado Bruno. You are 1 in a million. Always happy. Take care my friend. Greetings Ali.

[bbrrsolutions]

Hi Bruno, excellent video, nice to know another Bruno also related with the web development,

Continue with this excellent content,

Cheers!
Note: Mi name is also Bruno, maybe the account doesn't display it

[monikapatel]

Thanks @bruno for all your amazing videos. Can you please also make one on storybook ;)

[jahidunnurmaheeofficial]

Thanks for the amazing tutorial.
I have question. I want to build an package that includes api fetching. Can I use rtk query here?

[pranavpatel]

Amazing video man i was much in need of this but i don't know ts i only know js

[subhranshudas]

Great explanation. Question what is the difference between using tsdx for build vs Rollup for build?

[kanijo]

Grande bruno fazia tempo que nao via um video seu devido trabalho, por acaso to precisando criar uma biblioteca de components para projeto na empresa e olha cai em ti denovo, forte abraço amigo portugues !

[narcissisticnarcissus]

Great! You could turn this into a mini series.

[Gasshette]

How to resume a week of pain trying to comprehend and adapt the outdated official storybook doc in less than 15minutes. Thanks a lot :)

[pradella]

Thanks Bruno! Such amazing presentation! It's helping me a lot! I was wondering if it's possible to add tsdx to an existing react-typescript project. I will try here!