Writing & Publishing your First NPM Package!

No video

Writing & Publishing your First NPM Package!

Рет қаралды 91,174

Күн бұрын

promo.linode.c... - Use code 'DESIGNC19' to get $20 credit on your new Linode account!
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we're going to go beyond a boring 'hello world' example and into something that's a bit more useful. After creating 'shadowizard' (a simple npm package for adding shadows to certain elements), I'm going to show you how to publish it to GitHub as well as NPM, for others to use.
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

Пікірлер: 106

@DesignCourse 5 жыл бұрын

Have you published anything on npm? Share them below!

@chndraja 5 жыл бұрын

Yes.. here it is.. flipkart-api-affiliate-client Un official client library to access flipkart affiliate api.. Can you make a similar video on publishing react component library.

@AlphaScorpii86 5 жыл бұрын

www.npmjs.com/package/toastier

@NikolasStow 5 жыл бұрын

I will now! I just finished building my Angular/Ionic component based on the iOS 13 photos tab/switcher, and this tutorial is helping me publish it!

@moeinalizadeh 5 жыл бұрын

Yes, there it is: www.npmjs.com/package/trueslider

@tundrastic4301 4 жыл бұрын

Yes factful.js

@sherifsalah5563 5 жыл бұрын

Omg that's exactly what i was searching for the last couple of days, thank you so much.

@hexerous 3 жыл бұрын

If anyone is get a status code 402 Payment Required; just run `npm publish --access=public`, this usually happens the first time you publish a package.

@NaserMohdBaig 4 жыл бұрын

Loved the straightforward explanation. I was under the impression that publishing packages on npm is voodoo stuff but I am pretty confident on releasing my first package now. Really appreciate your help.

@justingolden21 3 жыл бұрын

When you use triple backticks you can put the language name after the third backtick, so in your case "js"

@muhammadsafiullah8428 5 жыл бұрын

I showed this video to my crush and she's my wife now. I'm grateful. Thanks for sharing this video tutorial. ❤️

@bala-st9cj 3 жыл бұрын

Noob to pro made by this channel

@obafemioderanti2649 3 жыл бұрын

Thanks Gary, I just published my first npm package. So excited...

@yitzchaksviridyuk932 4 жыл бұрын

Thanks a lot for the tutorial man! I made a gallery package, but I've only hosted it on CDN. Now, I'm gonna now be able to try making an NPM package for it. Thanks again! 😁

@jordaan_armand 4 жыл бұрын

You are a legend, thank you for adding this, great tutorial! No fluff and straight to the point :D , only thing I would have added was the package version bump then publish if doing a republish. Also had an oddity where the updated package version wasn't being picked up on npm website, had to signout and back in for it to reflect as clearing cache had no effect.

@rajesht9702 3 жыл бұрын

Thank you Mr Simon.

@nicoregules 5 жыл бұрын

Protip: if you click in the square icon with magnifying glass in the top right corner, you can see your markdown compiled in real time right there in vscode.

@lednick____ 4 жыл бұрын

it is exactly what I searched for all day. Thanks

@balajikc 5 жыл бұрын

Oh Man! I really want to know how you read my mind. I was searching for publishing the npm package of my shared module in Angular. Boom!! Here you go... Like always you rocked. Keep surprising me :)

@JagdishBanda 3 жыл бұрын

Sounds very easy to create npm by watching this. Thanks

@meelikedc 4 жыл бұрын

So so helpful. Clear, concise. Thank you so much.

@brunofilgueiras3518 3 жыл бұрын

saving this video forever as reference

@_goodness 3 жыл бұрын

I did, but I need to require("abc"), to use it, Why import is not working, saying cant import outside module. I did everything same .

@basiorbb3 4 жыл бұрын

Thanks a lot

@yechielbabani1726 2 жыл бұрын

Thank you so much it was amazing !!

@sarojdash7210 3 жыл бұрын

Thanks Gary :)

@aihabgmati8425 5 жыл бұрын

Thanks, it was really helpful

@StevenBenjamin 4 жыл бұрын

Thank you, a great springboard into npm

@theinterworks 3 жыл бұрын

Nice and simple tutorial. Thanks dude

@naumanali6580 5 жыл бұрын

just amazing , thankyou

@keduslejiyared8701 3 жыл бұрын

Thank you so much! Please make a tutorial on how to create a react component library and how to upload it on npm

@tofa8608 3 жыл бұрын

Wow!

@CarlosWashingtonMercado 3 жыл бұрын

Excellent.

@ponmuralijeyaprakasam6829 4 жыл бұрын

Bro you have given wonderfull learning for us thanks bro

@mahirmolai2525 3 жыл бұрын

TY SO MUCH!

@rhidlor8577 3 жыл бұрын

Way to keep things simple, good video.

@datamaniac2048 2 жыл бұрын

Thanks

@mohammadbrzbrz72 2 жыл бұрын

thank you very much ❤🧡💛

@mmvideos461 3 жыл бұрын

Thank you

@almostrandomnickname 2 жыл бұрын

Thank you it’s really good I’d like to see an advanced tut like how to make a sdk

@heroddube 4 жыл бұрын

Me: Man that shit tight Video: Its a very silly example, nobody's gonna use this

@charbelabouyounes6683 3 жыл бұрын

This is awesome thank you man ✌️

@usufdev 2 жыл бұрын

npm i tg-forms // Small telegram message sending library. *Thank you very much!*

@fieryninja2374 Жыл бұрын

Amazing tutorial, one question though. Why do we need module.exports.shadowwizard = shadowwizard; Can’t we just have a simple export shadowwizard; Please reply anybody.

@anilkinikar 4 жыл бұрын

Awesome tutorial.👍🏼

@keyvansalmani5650 4 жыл бұрын

That was very useful thanks

@abhishek.rathore 3 жыл бұрын

Hey awesome vid man. But can you also make one on how to make and publish a React component Library like React-Bootstrap or Material-UI

@frakk2 5 жыл бұрын

I think making npm is the good for sharing code between sub projects of project - i just plan it, never tried, but sounds good.

@neoney 5 жыл бұрын

frakk2 private packages are paid and you Can import code without npm

@sivaganesh4489 4 жыл бұрын

Great one

@phdcmd 3 жыл бұрын

Thx fot the video. I was hoping to see some simple dependence in first NPM package as well. I think it is missing. Another confusing thing: you don't actually show the workflow. How do you work on the code? How do you write and debug code?

@francodiaz8439 2 жыл бұрын

Hey, when I try this in the browser, it says =>>> Cannot use import statement outside a module

@mewanindula5877 4 жыл бұрын

Thank You So...much!!!

@club_entertainment 5 жыл бұрын

You are awesome sir, i am a huge fan of u

@jaredc8281 5 жыл бұрын

Love your videos! =D Out of curiosity what do you use to make/edit your videos?

@electronjs6408 4 жыл бұрын

good good wokring Thanks Sir,it helps a lot

@connorlu2834 5 жыл бұрын

nice, cool. u r awesome!

@rileysimmons6572 2 жыл бұрын

I’m making a website for my business. Does it matter what my package.json license is?

@enzocodes 2 жыл бұрын

What happens if a publish a package and gets used by, lets say, 100 developers... and then I delete that package. What happens when someone clones a repository and runs npm install after I delete the package from npm?

@diegokraenau146 3 жыл бұрын

It works with ngx? Becuase i want to create a npx cli , is the same steps?

@yuxiangzhang2343 4 жыл бұрын

very helpful! thanks :)

@mostafashawki 5 жыл бұрын

Great video, thank you :)

@bae_velvet 2 жыл бұрын

I did a whole project and styled in in css and added index hmtl, can I publish that as npm too? and later in another project change values and stuff? or should I just publish the javascript code ?

@arpitmittalappy 3 жыл бұрын

Any fix for this error? ./node_modules/react-images/index.js SyntaxError: C:\Users\arpit\OneDrive\Desktop\testt ode_modules eact-images\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (30:9): Add @babel/preset-react to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx to the 'plugins' section to enable parsing. Please help asap.

@alexandros-markovits 5 жыл бұрын

Great video! I m wondering if i wanted to make custom components as npm packages that would use inside a ui library and vue for example while also having them installed in a project, does it get recognized and being installed only once in the end? Plus what if its another version on each? Kind of weird question i know..

@thefrey9588 5 жыл бұрын

was thinking about it yesterday lmao

@MrAlliqator 2 жыл бұрын

Amazing…

@bharat931 3 жыл бұрын

How to install dependencies automatically: If our module has a dependency, we can add in dependencies / peer dependencies object of package.json. when we install a package npm shows warning that this module has dependencies. Instead of showing just warning, is there anyway that npm installs all the dependencies automatically rather than user installing them manually after seeing warning. Please help

@yummyfunnybunny5167 3 жыл бұрын

when you are creating an npm package, can you include css files as well, or does everything have to be in a .js file? I have a project that I would like to turn into an npm package, however it contains a lot of css, so I would need to do a lot of refactoring if I cannot have a css file in my npm package. Thanks!

@TheAppAlchemist 3 жыл бұрын

would you like to explain how to do it on CDN?

@innovagalactic Жыл бұрын

how could i put a bunch of functions in a folder, then have a js file take everything from that folder and export it into my npm module for me???

@RedStone576 Жыл бұрын

just make the files on the folder all have default export then write a js that just list out all of the files then import them with loops

@friendsonly7882 5 жыл бұрын

Hi, Thank you so much for this tutorial.😊 Please Make another tutorial node js with material Io This tutorial will be very helpful for me and your subscribers Please

@ponmuralijeyaprakasam6829 4 жыл бұрын

Can you do it for Angular ? any npm example

@Stoney_Eagle 3 жыл бұрын

@npm node-forkit Thanks 😉

@Lucifer-wd7gh 5 жыл бұрын

Make a video on how to make javascript widget. Example: A chatbot script we paste on our website, boom.... The chatbot appears on our site. Intercom

@Danirex857 3 жыл бұрын

Thanks

@rakibhasandeprecated4231 4 жыл бұрын

How to import globally? as a Nuxt.js plugin

@neoX12000 5 жыл бұрын

after 5 months i got the tutorial

@kokosnotfound 4 жыл бұрын

How to update code?

@balavensalem 5 жыл бұрын

Informative video dud. Which is the best ui library for angular. How to choose. do u have any idea.

@ImamZNOne 5 жыл бұрын

was did this but with Angular about several hours ago lol

@tomaskordos3782 4 жыл бұрын

My readme looks like this: ��#� �D�i�s�c�o�r�d�.�j�s� �C�o�m�m�a�n�d� ... how can i fix it?

@DeadGodMetal 3 жыл бұрын

Why all great programmers are metalheads? :))

@happynight6533 4 жыл бұрын

#iUsedIt

@stephen9849 4 жыл бұрын

It tells me that I have to pay! I thought it's free! P.S. : I don't want to be private...

@mazdaknazemi8207 5 жыл бұрын

make the account, log in, npm publish,,, this is all you find cross-web, please provide more advanced about how the architecture of files and folders. thank you.

@Bloubz77 2 жыл бұрын

why is your sound so loud??

@chndraja 5 жыл бұрын

flipkart-api-affiliate-client A simple client library to access the affiliate api of the flipkart. 😊

@dramen555 4 жыл бұрын

pro devs using windows...

@spirobel 2 жыл бұрын

explain it in 2 minutes not 20

@johmcg64 3 жыл бұрын

Why do you belittle your work? You should not do that.

@KeithWhittingham 3 жыл бұрын

This video would have been 1'000 x better (and much shorter = better for both of us) if you'd have stuck to the point rather than going off on tangents about markdown, setting up NPM accounts, ... Answer the exam question!