How To Create And Publish Your First NPM Package

Summary

In this informative video, Kyle from Web Dev Simplified demystifies the process of creating an npm package. He guides viewers through setting up a local development environment, initializing a package with a detailed 'package.json', coding a simple module, and testing it. The tutorial also covers linking the package for local testing, addressing common pitfalls like login issues and email verification, and finally publishing the package to the npm registry. Additionally, Kyle explains how to handle naming conflicts by using scoped packages, providing a comprehensive guide for budding npm package creators.

Takeaways

• 📦 Creating an npm package is not as daunting as it seems and can be quite straightforward.
• 📁 It's important to have a 'package' folder for the npm code and a 'test' folder for local testing before publishing.
• 🔗 Initializing a git repository early helps to include GitHub information in the package.json.
• 📝 The package.json file is crucial for describing the package, and it's recommended to fill it with as much information as possible.
• 🛠️ The script's main function, 'isWds', is an example of a simple module that returns true or false based on input.
• 🔗 Using 'npm link' allows for local testing of the package by creating a symbolic link to the package folder.
• 📜 The 'script.js' in the test folder demonstrates how to require and use the local npm package.
• 🔒 Before publishing, ensure you are logged into npm with 'npm login' using your npm account credentials.
• 🚫 Be aware that you may encounter a 403 error if your npm account email is not verified; verify it to proceed with publishing.
• 🔄 After resolving any login or verification issues, use 'npm publish' to make the package publicly available.
• 🔍 If the desired package name is taken, consider using a scoped package with a prefix like '@username/' to avoid naming conflicts.
• 📌 When initializing a new package and intending to use a scope, use 'npm init --scope' to set up a scoped package.json file.

Q & A

What is the main topic of the video?

The main topic of the video is creating and publishing an npm package.

What are the two folders mentioned in the video?

The two folders mentioned are the 'package' folder, where the npm package code is placed, and the 'test' folder, used for local testing of the package.

Why is it important to test an npm package locally before publishing?

Testing an npm package locally before publishing ensures that the package works as expected and helps to identify any potential issues before it is made available to others.

What command is used to initialize a git repository in the video?

The command used to initialize a git repository is not explicitly mentioned, but it involves copying code into a new repository and using the 'git init' command.

Why is a README file important for an npm package?

A README file is important because it provides information about the package, its purpose, and how to use it, which is helpful for users when they find the package on GitHub or npm.

What is the purpose of the 'package.json' file in an npm package?

The 'package.json' file describes the package, including its name, version, description, main entry point, and other metadata, which is essential for npm to understand and manage the package.

What is the name of the package being created in the video?

The package being created in the video is named 'is-wds'.

What does the 'is-wds' function do?

The 'is-wds' function takes a string as input and returns true if the string is equal to 'wds', and false otherwise.

How can you link an npm package for local testing?

You can link an npm package for local testing by navigating to the package directory and running the 'npm link' command.

What command is used to publish an npm package?

The command used to publish an npm package is 'npm publish'.

What error might you encounter when trying to publish an npm package and how to resolve it?

One might encounter a 403 error indicating a forbidden action, which can be resolved by verifying the email associated with the npm account. Additionally, for scoped packages, you need to specify '--access public' to publish them as public packages.

What is a namespaced or scoped package in npm?

A namespaced or scoped package in npm is a package that has a unique prefix, usually the username or organization name, followed by a slash, ensuring the package name is unique and avoiding conflicts with other package names.

How can you create a scoped package by default during initialization?

To create a scoped package by default during initialization, you can use the 'npm init --scope <scope-name>' command, which will automatically add the scope prefix to the package name in the 'package.json' file.

What is the significance of the 'main' field in 'package.json'?

The 'main' field in 'package.json' specifies the entry point of the package, which is the file that will be loaded when the package is required in a Node.js application.

What is the role of the 'keywords' field in 'package.json'?

The 'keywords' field in 'package.json' helps users find the package when searching on npm by providing relevant keywords associated with the package.

How can you ensure that your npm package is linked with your GitHub repository?

You can ensure that your npm package is linked with your GitHub repository by including the repository URL in the 'repository' field of the 'package.json' file.

Outlines

00:00

📦 Creating and Testing an npm Package

This paragraph introduces the process of creating a simple npm package, emphasizing its ease despite initial intimidation. The video's host, Kyle from Web Dev Simplified, guides viewers through setting up a package folder and a test folder for local testing. He demonstrates initializing a Git repository, creating a basic README, and manually specifying package details in a package.json file. The main file, index.js, contains a function that checks if a string equals 'wds'. The paragraph concludes with instructions on linking the package for local testing using npm link and testing it in a script.js file within the test folder.

05:02

🔗 Publishing and Managing npm Packages

This paragraph delves into the publishing process of an npm package. After writing the package code, the host explains how to publish it using npm publish but encounters a 403 error due to an unverified email. After resolving this, another error prompts the need for setting the package access to public when using a scoped name. The video then covers the process of publishing a scoped package, including setting the correct access rights. It also addresses the issue of package name conflicts by introducing scoped or namespaced packages. The host provides a tip for initializing a package with a scope from the start. The paragraph ends with a call to action, inviting viewers to watch another video about favorite npm packages.

Keywords

💡npm package

An npm package is a piece of reusable code that can be distributed and used in various Node.js projects. The video focuses on the process of creating, testing, and publishing an npm package. The example used is a simple package that checks if a string is 'wds', returning true or false accordingly. Understanding npm packages is central to the video's tutorial on contributing to the Node.js ecosystem.

💡package.json

The `package.json` file is a crucial component in any npm package, as it contains metadata about the package, including its name, version, description, entry point, and dependencies. In the video, creating and customizing the `package.json` file is a key step, as it ensures the package is properly defined and can be published and used by others.

💡npm init

`npm init` is a command used to create a `package.json` file interactively or with default settings using the `-y` flag. In the video, the creator opts to manually specify the values in the `package.json` to ensure accuracy and completeness, which is a recommended approach when developing an npm package.

💡npm link

`npm link` is a command that allows developers to link their local npm package to other local projects for testing before publishing. The video demonstrates this command to show how a locally developed package can be tested in a separate folder, ensuring that the package works as expected before it is shared publicly.

💡module.exports

`module.exports` is a Node.js feature that defines what a module exports for other files to use. In the video, the function `isWDS` is exported using `module.exports`, making it available for use in other scripts, which is a fundamental step in making any Node.js package reusable.

💡git repository

A Git repository is a storage space where your project’s files and revision history are kept. The video shows how to initialize a Git repository for the npm package, which is important for version control and collaboration, and it also links the package with the GitHub repository in the `package.json`.

💡scoped package

A scoped package in npm is one that is associated with a specific user or organization, denoted by an `@username/package-name` format. The video explains how to create a scoped package, which is particularly useful when a desired package name is already taken or when organizing packages under a specific namespace.

💡npm publish

`npm publish` is the command used to publish an npm package to the npm registry, making it available for others to install and use. The video walks through this process, including handling errors related to account login and email verification, which are common issues when first publishing a package.

💡test script

A test script is a piece of code written to verify that the npm package functions as intended. In the video, a `script.js` file is created to test the `isWDS` function locally using `npm link`, ensuring that the package behaves correctly before being published.

💡versioning

Versioning in npm refers to the practice of assigning a version number to a package using semantic versioning (semver), which helps manage package updates and compatibility. The video sets the initial version to 1.0.0 and highlights the importance of maintaining correct versioning in `package.json` for clarity and dependency management.

Highlights

Creating an npm package is easier than it seems, offering a streamlined process for developers.

The tutorial begins with setting up two folders: 'package' for the npm code and 'test' for local testing.

Local testing of an npm package before publishing is emphasized for reliability.

Using 'npm init -y' provides default package.json values, but custom specification is recommended for detailed info.

Package.json serves as a description of the package's purpose and should contain comprehensive information.

The 'is-wds' package example returns true or false based on the input string 'wds'.

The main file 'index.js' contains the core functionality of the package.

Node module exports are demonstrated with a simple function in 'index.js'.

Before publishing, linking the package locally allows for testing its installation and functionality.

The 'npm link' command is used to create a symlink for local package testing.

A 'script.js' in the test folder demonstrates requiring and using the local npm package.

After local testing, the 'npm publish' command is used to make the package available on the npm registry.

Logging into npm is required before publishing a package.

Email verification post-account creation is necessary to avoid publish restrictions.

Publishing a package involves potential errors, such as name conflicts, which can be resolved with scoped packages.

Scoped packages use a namespace to avoid naming conflicts and are published with the 'access: public' flag.

The tutorial concludes with the successful publication of the 'is-wds' package and its installation via 'npm install is-wds'.

Alternative package names and scoped packages are discussed as strategies for naming and publishing.

Transcripts

creating your first npm package may seem

incredibly intimidating

but it's actually surprisingly easy

[Music]

welcome back to web dev simplified my

name is kyle and my job is to simplify

the web for you so you can start

building your dream project sooner so if

that sounds interesting make sure you

subscribe to the channel for more videos

just like this

now to get started on the left hand side

of my screen you can see that i have two

folders one called package

and one called test folder this package

folder is where we're going to be

putting all the code for our npm package

we're going to create

and the test folder is just going to be

for testing it out locally and that's an

important thing to do anytime you create

an npm package you should probably test

it locally before you publish it

the first thing i want to do is i want

to cd into that package folder

that way we're inside the package folder

and on the right hand side here i've

created a brand new git repository and

i'm going to copy all of the code inside

here by clicking this copy button

pasting it down and it's just going to

initialize a git repository for us

and it's going to create a very basic

readme so inside this package you can

see we have a readme

if i refresh the page over here you can

see we have that readme the reason i'm

doing that before initializing my

package

is because that way when we initialize

our package json it's going to have all

of our github information

linked inside of it so now the next step

is going to be to create that package

json so normally you would type in npm

init dash

y and that will give you all the default

values but in our case we actually want

to specify all the values ourselves

that way we can have the most

information inside of our package json

and the package json is essentially just

a way to describe what your package does

so it's really important to put as much

information in here as possible

so as you can see we're going to give

this a package name in our case we're

going to be creating a package called

is wds and this package is just going to

return true or false depending on if we

pass it a string of wds

the version will start out at 1.0 for a

description

is the string wds it doesn't really

matter what we put for this our entry

point will just say index.js that's fine

we'll create that file in a little bit

we don't have a test command so we're

going to leave that blank our git

repository as you can see has already

been picked up automatically so we'll

leave that in there

and for keywords we'll just put wds in

here as our only keyword

author will be web dev

simplified and for license we'll just

leave that blank and

yes so now if we go into our package

json you can see all that information

we've specified is inside of here which

is exactly what we want

now the important thing is that our main

file here is index.js so we're going to

create a file called

index.js and inside here is where all of

our code is going to go

so the only thing we're going to have

inside of here is a single function

called is

wds it's going to take in a string and

we're just going to return the string

equal to

the text wds if it's equal to that it's

going to return true otherwise false

and then this is going to be a node

module so we'll just say module.exports

equals and we're going to export that is

wds

function super straightforward all it

does is create one single function

and now you may be thinking okay we

wrote all the code for our package

hopefully yours is a little bit more

intense than this now you're ready to

publish the package

but actually what you first need to do

is actually link the package so you can

test it locally

and the easiest way to do that is just

type in the command npm

link if you do this what's going to

happen is npm is going to essentially

say okay this thing in this package

folder

we're going to create a link for this

thing that way when you try to install

it somewhere else

it's going to install from this location

so that's where our test folder comes in

we're just going to create a simple

script.js file inside of here and in the

script file we're going to require

that is wds package

and we're just going to say const is wds

is equal to that

and then we're going to return

console.log

is wds and we're going to put in the

string wds so this should console log

true but how do we actually install this

package is wds because we haven't

deployed it yet all we've done is link

it

so what we can do is navigate into that

test folder

and what we can just type in is npm link

again and we just type in the name of

our package is wds

hit enter and that's going to actually

locally install our package if we look

in our node modules you can see we have

is wds and inside there is the package

that we already linked so as you can see

it installed that package locally for us

and now if we run this script js by just

saying node script js

you can see it returns true because is

wds is true

if we put in some random garbage in here

and run this script you're going to see

it returns false

so now we have successfully tested our

code we've written our code

it's finally time to publish so let's go

back into that package folder where our

package exists and we can type in npm

publish

but you're going to notice when we do

this we're going to get an error just

give it a second you can see we have an

error and essentially the problem is

that we aren't actually logged in at all

so what we need to do is log in

you can type in npm login and you need

to have an npm account to do this so

make sure you go to npm and create an

account but once you do you can type in

npm login

type in your username which in my case

is web dev

simplified and then you can type in your

password as well

and once you do that you can also type

in your email and this is public so just

make sure that you know that but i'm

just going to type in my email here

simplified.com and now you can see that

we are logged in as web dev simplified

so now if i try npm publish hopefully

this time we don't get any errors

so we just run that command and you'll

notice we're still getting an error so

let's see exactly what that error is you

can see that it's saying we have a 403

essentially saying that we're forbidden

to

make this package and the reason for

this is that you need to make sure you

verify your email after you create your

account

so i've gone ahead and i've verified my

email so now if i run npm publish it

should work this time so we're running

npm publish

as you can see it's doing all the

loading so this actually looks like it's

working and it's getting ready to

publish my package

and it looks like it just finished

publishing the package now if we go on

over to npm and we just search for

is wds we should be able to see our

package right here we can click

on it and as you can see we can view our

package as our homepage which links to

our github same with the repository and

so on so now we have our package

officially published

and we can install this package just

like you would install a normal package

with npm iwds

now sometimes when you want to actually

create a package the name is already

going to be taken for example

you couldn't create a package called is

wds because i've already created that

but the way you can get around this with

npm is by using a name spaced or scoped

package

this is something that babel for example

does as you can see everything is

prefixed with at babel at babel so they

can call their package

at babel core and even though core is

used other places

it's okay because it's within that babel

prefix if you want to do this all you

need to do inside of your package json

is just make sure you prefix the name of

your package with your username so we

could say at

web dev

simplified slash is wds and that's going

to create a namespace package

so now we go to publishes you're going

to see that it's able to publish this

package

you'll notice we get an error it's

saying that you must sign up for private

packages

the reason for this is because by

default when you have a namespace

package like this it tries to make it a

private package instead of a public

package that everyone can access

so instead when you publish this you

need to make sure you specifically say

that the access is equal to

public

now as you can see that was successful

and there were no errors so now we can

do as we can say is wds

and we have both the normal version as

well as this name spaced version which

we could call whatever we want

and an important thing to note is if you

want to make your package scoped by

default when you initialize it just use

npm

init dash dash scope and set the scope

equal to you know web

dev simplified and that's going to

create a scoped package json for you

which is going to give the name this at

in front of it

and that's all it takes to create your

very own npm package

if you enjoyed this then you're

definitely gonna love this video where i

talk about my six favorite npm packages

thank you very much for watching this

video and have a good day