Publish the Hook to npm

[00:00 - 00:13] Our hook is cleanly implemented, well documented, and contains a variety of above and beyond features that make the developer experience of using our hook a pleasure. It's time we finally publish our hook to NPM.

[00:14 - 00:24] We'll leverage NPM's scoped package ability, so each of us will be able to publish our own version of the hook under the same name React Use Please Stay. To get started, you'll need an NPM account.

[00:25 - 00:39] If you don't have one, you can sign up at npmjs.com/signup. Since I've already published React Use Please Stay under my Prince Fish Thrower account, I'll be publishing this version under my alternate account, FullstackCraft LLC.

[00:40 - 00:48] To get started, we'll install a helpful tool, NPMRC, that helps us manage multiple NPM accounts. So let's install that globally.

[00:49 - 01:05] And we can ensure that we are on the correct NPM account by calling NPMRC with your account name. Like I said, I'll be using my FullstackCraft LLC account.

[01:06 - 01:14] And as it turns out, I'm already on this account with NPMRC. If you've already been using NPMRC, then you're all set.

[01:15 - 01:29] If you want to use a different account, we can issue NPMRC-C. And just as an example, I'll switch to my Prince Fish Thrower account and back to my FullstackCraft LLC account.

[01:30 - 01:48] Let's also make sure that we're logged into NPM with this user, so we can issue NPM login. And then I'll provide my FullstackCraft LLC user and my password, my email.

[01:49 - 02:01] And if you have two-factor authentication, you'll also need to provide the OTP code. And if everything went okay, NPM will tell you that you're logged in, and we should be ready to go.

[02:02 - 02:19] Just to be safe, let's rebuild our hook one last time, NPM run build, and we should set the scope of our package to our desired user. So while we previously just had the name React use please stay, we should ensure that the name is scoped.

[02:20 - 02:34] And so I'm going to add the @ symbol and my account name, FullstackCraft LLC, and then a slash. We can save that. With that small change, we're ready to publish our package.

[02:35 - 02:48] To do so, we'll use the NPM publish command. And if you want your package to be public, you can pass the access flag with public.

[02:49 - 03:01] And as soon as this command completes, your package should be available on NPM. You can verify this by checking NPMJS.com/package and then slash this name.

[03:02 - 03:21] So for me, the full URL would be NPMJS.com, package, and then FullstackCraft LLC, React use please stay. And checking this out in the browser, by default, NPM will show the readme on the homepage of the package.

[03:22 - 03:33] And we can see all the changes we've made to our readme there. The only small change here is that I already previously published a 1.0.0 and N PM won't let you overwrite that.

[03:34 - 03:49] So I simply bump the minor version here, but yours is likely 1.0.0. And as another double check to really see if our package is on the NPM registry , we can move into the example folder.

[03:50 - 04:01] We can unlink our React use please stay package. And we'll install our very own package that we just published.

[04:02 - 04:16] In my case, it will be the FullstackCraft LLC, React use please stay package. So we install just as we would any other package.

[04:17 - 04:30] And if we check the package.json in our example application, we do see indeed that our package is installed. And the version I have, which I just mentioned is 1.0.1 was installed.

[04:31 - 04:46] And in app.tsx, we have to add the namespace to the package. And we can check that even when installed from NPM, our hook should work as expected, so we can issue NPM start.

[04:47 - 04:57] And of course, we get the same functionality we do as if it was installed locally. So well done. You've published your first React hook NPM package.

[04:58 - 05:07] In summary, we first set up NPMRC to manage multiple NPM accounts. We set our NPMRC to use the user account we want.

[05:08 - 05:19] We updated the root package.json name to our very own scoped name using the @ symbol and our NPM username and slash. We logged into NPM via the command line.

[05:20 - 05:38] We built our hook as a final double check and we published our hook to NPM. That's all for module 3. In the next and final module, we'll transform the existing example app into a fully fledged example page that developers can use as a live example to experiment with the hook.