🔗 developing npm packages locally

Поделиться
HTML-код
  • Опубликовано: 14 окт 2024

Комментарии • 58

  • @amandeepkochhar574
    @amandeepkochhar574 7 месяцев назад +3

    Kudos to this guy, Straight like a bullet. To the point and straightforward. Its still useful even after 3 years !

  • @smetkicaprah5145
    @smetkicaprah5145 2 года назад +1

    Thank you very much for this. Didn't have a clue this exists. Was publishing every change ever time until now :D

  • @donodu78
    @donodu78 4 года назад +2

    This is definitly what I needed ! Thank you so much !
    It seems obvious now that I saw the video, but I was a bit lost before that... Thank you !

    • @bradgarropy
      @bradgarropy  4 года назад +1

      Happy to hear the way I explained things worked for you!

  • @JasonGoodison
    @JasonGoodison 3 года назад +1

    Awesome video. Just what I needed. Thanks!

  • @arieljosuegranadosbarrante2171
    @arieljosuegranadosbarrante2171 Год назад +2

    Nice! Exactly what the title says, good video!

  • @edisondsouza3404
    @edisondsouza3404 3 года назад +2

    Nice tutorial. Exactly what I was looking for. Thanks Brad!

  • @Libertoso
    @Libertoso 11 месяцев назад +1

    Thank you very much

  • @salik619
    @salik619 3 года назад

    Dude. You're a life-saver. I was so dumb that I was publishing constantly then I was checking in my React application if the package works or not. Thank you !

  • @CodeDreamer68
    @CodeDreamer68 2 года назад +1

    Thanks for the effort here. Not to sound ungrateful, but some of us watch videos like this on our phones.
    When your resolution is so high, we can't read any of the code.
    A 40" monitor shouldn't be a requirement.

    • @bradgarropy
      @bradgarropy  2 года назад

      Thanks for the great feedback, I can bump the font size in future videos to make this more manageable!

  • @singhjapnam
    @singhjapnam 3 года назад +1

    Awesome video. keep up the good work Brad :)

  • @ganapathipranesh8506
    @ganapathipranesh8506 2 года назад +1

    precise content!

  • @soufianta8374
    @soufianta8374 2 года назад +1

    Hi. And if you try to require your package with absolute/relative path instead => require(‘./my-package’)???

    • @bradgarropy
      @bradgarropy  2 года назад

      Haven't tried it! But I feel as though it should work. Give it a shot and let us know 👍🏼

  • @AykutKlc
    @AykutKlc 2 года назад +1

    thanks for the video. Does debugging / breakpoints work?

    • @bradgarropy
      @bradgarropy  2 года назад +1

      I don't see any reason why it wouldn't!

  • @sabariayyasamy1134
    @sabariayyasamy1134 3 года назад +1

    I'm trying to learn lot of web site locally created npm package that and all not usefull to me, But this video section what I'm expert given excellent ! Thank you very much.

  • @josht2602
    @josht2602 Год назад +1

    simple and clear. thanks heaps

  • @bala2222222
    @bala2222222 2 года назад +1

    Thanks a lot. well explained

  • @Febs86
    @Febs86 2 года назад +1

    Thanks for the tutorial well explained, you earned a sub from me.
    What VS Code theme are you using if you mind me asking.

    • @bradgarropy
      @bradgarropy  2 года назад

      Shades of Purple!
      marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple

  • @bhumit070
    @bhumit070 Год назад +1

    How to use debugger with vscode and npm package?

    • @bradgarropy
      @bradgarropy  Год назад

      This link should help you get started with running a debugger inside vscode:
      code.visualstudio.com/docs/nodejs/nodejs-debugging

  • @cedrics7374
    @cedrics7374 2 года назад +1

    Simple, efficient, well explained :)

  • @julniter5908
    @julniter5908 4 года назад +2

    what happens if I have installed a previous version of my-package? will the "npm link" overrides the reference to the "/node_modules" folder?

    • @bradgarropy
      @bradgarropy  4 года назад +1

      That's a great question, I don't actually know. Let me test it and get back to you!

    • @bradgarropy
      @bradgarropy  4 года назад +1

      If you already have a package installed, and you run npm link , the local version of the package will replace the version installed from npm.
      www.twitch.tv/videos/727826593

    • @julniter5908
      @julniter5908 4 года назад +1

      @@bradgarropy Thank you for this man!

  • @rohitvishwakarma3058
    @rohitvishwakarma3058 Год назад +1

    What setup do you use for your voice ?

    • @bradgarropy
      @bradgarropy  Год назад

      You can see my whole setup, including audio, here:
      bradgarropy.com/uses

  • @CalvBore
    @CalvBore 3 года назад +1

    Hey thanks for this! I'm trying to develop a package, locally but it will need to access files from the main app's directory tree (rather than the package's). Any direction you can give me to figure this out would be supper helpful! thanks

    • @bradgarropy
      @bradgarropy  3 года назад +1

      There's a few ways you can handle this.
      1. Use process.cwd() to get the directory of the calling script.
      2. Use process.dirname() or __dirname to get the directory of the current file you're in.
      Then you can use path.resolve(currentDirectory, "../../relative/path/segment") to read another file.
      Here are some helpful links:
      nodejs.org/api/path.html#path_path_dirname_path
      nodejs.org/api/path.html#path_path_resolve_paths
      www.digitalocean.com/community/tutorials/nodejs-how-to-use__dirname

    • @CalvBore
      @CalvBore 3 года назад

      ​@@bradgarropy Hey! So thanks, for the reply, I really appreciate the help, but this isn't working for me. Maybe it's because I'm using react, or yarn workspaces in my main app? when i console.log(__dirname) all i'm getting is "/"

    • @bradgarropy
      @bradgarropy  3 года назад +1

      Oh this is a React application that wants to reach outside of itself? Any reason why?
      Feel free to join my Discord so we can chat about this more effectively:
      bradgarropy.com/discord

  • @josht7238
    @josht7238 2 года назад +1

    thanks so much very helpful

  • @RealEstate3D
    @RealEstate3D 3 года назад +1

    The harder problem is to get the debug process with linked modules (react) with chrome working. But for beginners a nice video.

    • @bradgarropy
      @bradgarropy  3 года назад

      I'd be happy to make a video covering this! But first can you clarify, what exactly do you mean by the debug process? Chrome dev tools should be able to add breakpoints, view source, etc right out of the box!

    • @RealEstate3D
      @RealEstate3D 3 года назад +1

      @@bradgarropy I didn’t find a video showing the path to debug and testing a locally linked module (via npm link). One has to deal with not being able to test the linked submodule because you cannot install react and react-dom in the linked sub-module as you will run into the classic react hook error in the main app. And if you debug via VS Code the linked sources are read-only and have wrong paths as they only exist during the debug session. Attaching the two projects didn’t help. I can handle it, but I am pretty sure this topic would help many developers.

  • @irlshrek
    @irlshrek 3 года назад +1

    Can't I import all of the functions at once though?

    • @bradgarropy
      @bradgarropy  3 года назад +1

      Yep! Let's say you had two functions, sayHello and sayGoodbye, defined in my-package/index.js. You would export them both like this:
      module.exports = {sayHello, sayGoodbye}
      Then when you require them in my-app/index.js, you would do it like this.
      const whateverNameYouWant = require("my-package")
      whateverNameYouWant.sayHello()
      whateverNameYouWant.sayGoodbye()
      Or with destructuring like this.
      const {sayHello, sayGoodbye} = require("my-package")
      sayHello()
      sayGoodbye()
      Hope that clears it up!

    • @irlshrek
      @irlshrek 3 года назад

      @@bradgarropy it does!! You fucking rock dude

  • @guitarplayer4life17
    @guitarplayer4life17 Год назад +1

    this tut >>>>>> WDS' npm package tut

  • @ziyadkader6767
    @ziyadkader6767 4 года назад +1

    thanks mate !

  • @rohitvishwakarma3058
    @rohitvishwakarma3058 2 года назад +1

    can you please make a video doing the same thing with local-npm

    • @bradgarropy
      @bradgarropy  2 года назад +1

      I've never heard of that package before. After doing some research, it doesn't seem that popular and I'm not sure it's even active anymore (last publish was four years ago).
      www.npmjs.com/package/local-npm

  • @SpencerDavis2000
    @SpencerDavis2000 3 года назад +1

    great video thanks

  • @user-zp1dv4yh5e
    @user-zp1dv4yh5e 3 года назад +1

    how to create npm libraries like bootstrap or material ui?

    • @bradgarropy
      @bradgarropy  3 года назад

      I explain the process of publishing packages to npm in this video:
      ruclips.net/video/S_wvHDOrac0/видео.html

  • @TheStillwinterNation
    @TheStillwinterNation 4 года назад +1

    you rock!

  • @ankamsarav
    @ankamsarav 3 года назад

    Multiple time came across NPM link, but I was not able to get it. This one makes it crystal clear and even I had similar requirement in our project too. Thanks a ton :)

  • @irlshrek
    @irlshrek 3 года назад

    Brad, I love you.

    • @bradgarropy
      @bradgarropy  3 года назад

      Haha I must have solved a problem for you with this video!

    • @irlshrek
      @irlshrek 3 года назад

      @@bradgarropy yeah man, I just started playing around with node and I'm not used to there being such overhead to creating a library for myself!