How to make your own NPM package (Step-by-Step) 📦

How to make your own NPM package (Step-by-Step) 📦
🧠 Resources
tsconfig.json: pastebin.com/NT2Z7Kas
tsup.config.ts: pastebin.com/m7bGKx0d
🌐 Important links
Discord: ctrl.lol/discord
Github: github.com/notunderctrl
Patreon: / underctrl
Buy me a coffee (one-time donation): buymeacoffee.com/underctrl
🕐 Timestamps
00:00 - Introduction
00:32 - Setting up npm account
00:49 - Authenticating terminal with npm
01:28 - Setting up npm project
04:29 - Installing dependencies
05:11 - Configuring TypeScript
06:14 - Configuring TSUP
07:06 - Configuring scripts
08:04 - Setting up project structure
11:34 - Transpiling TypeScript code
12:00 - Ignoring files for GitHub and npm
13:40 - Creating README.md
15:16 - Pushing code to npm
16:32 - Conclusion

[@DarlenCodename]

Awesome quality video. ✅ Perfect audio. ✅ Straight to the point. ✅ Showing best practices. Keep it up.

[@TheFearlessStudios]

I really appreciate this video as I’m gonna be making a discord game package and this helped me understand things I didn’t understand before keep up the great work

[@jasonko1202]

Best video I've watched on how to create npm package!!

[@ZeroCommentsZeroDocs7Bugs]

From all the tutorials this was the one that got me to where I wanted to be! Thank you so much!

[@nayandey5010]

thanks to you, for my first npm package

[@weroro]

5:14 There is a CLI for that "npx tsc --init" 15:30 Before publishing a new package, you should test it locally. Use the "npm pack" command to create a TGZ file and you can use it in the package.json file using the "npm install relative_path_to_package_file" command

[@DarlenCodename]

You can use "npm link" to link the package globally, then in a new folder you use "npm link package-name" and it'll be linked to you node_modules

[@antonhogstrom4085]

Great quality tutorials! 👌

[@hghlndr2]

Wow! What a good video!!! Best one for this subject, hands down.

[@BooksWeCanRead]

That’s so cool! Thanks so much that’s awesome! 👌

[@douglasemsantos]

Excellent video! Thank you for that!

[@m1dev]

Great video! ❤🔥

[@priyanshushh]

Thank you so much dude today i published my first ever package, this video helped me a lot.

[@abdulsamadayoade9439]

thanks for making this, it fixed my problem

[@XZivXL]

Life saver! Thank you for that

[@zoeycvu]

thank you for your best tutorial

[@0looom]

keep going!!!!!!!!!!!!!!!!!!!!

[@tegasteve8195]

Thanks so much This was really helpful for my SAAS

[@UnderCtrl]

Glad to have been helpful. Good luck on your SaaS! :)

[@RabahTaib-mn4fs]

Frist: (الحمد لله) Second: Thank you ♥

[@mayurghuge8846]

Thank you.

[@aboutreactnative4484]

Thanks for the tutorial I have made a npm package called log-glow

[@devgauravjatt]

Great video 💯❤❤❤🎉🎉🎉🎉🎉

[@tech-nomade]

bro this is gold. subsicribed

[@praweewongsa]

good job

[@anilsonix]

Could also share how to build isomorphic packages and subpath exports 😊

[@rjwhite4424]

awesome video. How would you recommend testing the code before building and publishing?

[@UnderCtrl]

You can use "npm link" to install this package locally in another project and test it out there. I found this great tutorial you might find helpful: dev.to/one-beyond/different-approaches-to-testing-your-own-packages-locally-npm-link-4hoj

[@gayathridevip4632]

as i am using next js, i dont have main. then how to do it?

[@maxpricefield7586]

question: do we need to configure for both cjs and esm if I just want to make typescript libraries meant for nodeJS only?

[@UnderCtrl]

Yes, it would be good practice to do so because some developers might use CommonJS with your library while others might use ESM. Configuring for both ensures that your library will be supported by both environments.

[@kasuutooheri]

Podrias hacer un tutorial para embeds programados?):

[@USSEnterprise]

Cool....

[@zenobiusztasak8604]

How instead of this: import {Button, someFunction} form "my-package" have these separated like: import {Button} from "my-package/components" import {someFunction} from "my-package" or "my-package/functions" Thanks

[@heruhailiuhuang533]

how to build for diff env like and prod.

[@jh_developer]

package npm adduser notworking?

[@abdulsamadayoade9439]

don't add package, that is his folder name used in the tutorial, just type "npm add user"

[@FaresFakhouri]

How To Make Dashboard #Day 1

[@yunwang1243]

Why is it for CommonJS? It is outdated

[@hrushikeshvibhute4639]

Node js works on common js only

[@goat-sama]

Did a bot write this?

[@reybecar8033]

I’m so lost at the beginning

[@kobbimensah547]

Don't worry things gets so complicated when you don't know to start from

[@mariolazzari]

amazing video: I was seaarching for a tsdx alternative and, thanks to your awesome job, I found it!