DEV Community

loading...
Cover image for Create your npm package: design&tech πŸ˜‰

Create your npm package: design&tech πŸ˜‰

helleworld_ profile image DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« ・5 min read

Hello, users! πŸ‘‹

Today I'll be explaining (in an easy format) how to create and publish a npm package, no matter if it is for your styles or your logic.

I wanted to create this tutorial after the release of my first npm package πŸŽ‰πŸ₯³, you can see it here.

Let's do this, let's create your npm packageπŸ™Œ.

🟣. Create your account

I'm not joking, you need an account in npm, register your user here.

🟣. Create your npm source folder & your package.json

Go to your desktop, create a new folder, name it npm_yourname_test for example (or the name of your future package).

Open this folder in your terminal. First of all, type

npm init
Enter fullscreen mode Exit fullscreen mode

then, some questions will appear.

1. Name your package

// NAME OF YOUR PACKAGE
package name: (test)
Enter fullscreen mode Exit fullscreen mode

Type your package name. For this example, I used 'npm_desire_test', use a specific name since things like "test", "test1" and etc are probably taken. The result is as follows:

// NAME OF YOUR PACKAGE
package name: (test) npm_desire_test
Enter fullscreen mode Exit fullscreen mode

2. Version of your package

Set the default version (1.0.0).

// VERSION OF YOUR PACKAGE
version: (1.0.0) 1.0.0
Enter fullscreen mode Exit fullscreen mode

3. The description of your package

Create a short description of your package.

// DESCRIPTION OF YOUR PACKAGE
description: A test package for npm.
Enter fullscreen mode Exit fullscreen mode

4. The entry point of your package

Basically, we're talking about in which file your styles/logic will be placed. By default it's set to index.js, however this may cause conflicts with other index.js that the user has in its own project.

If you're using npm to create a logic package, (javaScript), create an entry point using the".js" extension. For example: util_functions.js.

If you're using npm to create a styles package (css, sass, css, stylus), create an entry point using the ".scs", ".sass", ".css" (etc.) extension. For example: myCardStyles.scss.

For this example I'll type test.js.

// ENTRY POINT (WHERE YOUR CODE WILL BE)
entry point: (index.js) test.js
Enter fullscreen mode Exit fullscreen mode

5. The test command for your package

A test command for your package. (I actually don't use this, but oh well).

// A COMMAND TEST
test command: test
Enter fullscreen mode Exit fullscreen mode

6. The Git repo for your project

The URL of the Git repo where your project is being kept.

For this example, I'm not using any, so I'll type "none".

// GIT REPO
git repository: none
Enter fullscreen mode Exit fullscreen mode

7. Keywords

The keywords for your package. Use commas between them.

// YOUR KEYWORDS
keywords: your, keywords, for, the, package
Enter fullscreen mode Exit fullscreen mode

8. The author of the package

Your name or the author's name.

// YOUR NAME
author: your name here
Enter fullscreen mode Exit fullscreen mode

9. The package's license

There are plenty of licenses around the internet. Check the licenses here and the SPDX code for the license you want here.

I'll pick a random license for the example.

// SEARCH FOR A CORRECT SPDX LICENSE NAME
license: (ISC) CC-BY-ND-4.0
Enter fullscreen mode Exit fullscreen mode

10. Checking the results

After finishing the initialization, the console will prompt your answers in a JSON. If everything's correct, go ahead.

🟣 Creating the entry point

Remember your entry point? The one where your logic/styles must be placed?

Open the folder where you just created the package.json for your npm package in Visual Studio or your favorite IDE.

Create the file for your entry point with the same name you wrote in the package.json.

In the case for this example, it was test.js.

Inside, create your code or styles.

Code example:

// test.js

function alertThis(){
    alert('Alert from my npm package')
}
Enter fullscreen mode Exit fullscreen mode

Styles example:

// test.css

.myOwnStyle {
    color: lightblue;
    font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

Styles example but with sass/scss:

// test.scss

.otherStyle {
    color: lightblue;
    font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

🟣 Creating your readme

Important.

Your package needs a file named readme.md, this readme is similar to Github's readme and etc., you can write it in markdown.

Your readme should contain some basics: what's your package about, info about you, how to install it, how to set it up in someone's code...

## What is this about? πŸ€”

Something!

## How to install this package?
...
Enter fullscreen mode Exit fullscreen mode

Once you've created what you needed, it's time to publish your npm package! πŸ₯³

🟣 Publish your npm package

Finally, time for it to see the light!

Let's go back to the console where the folder of your npm package is open.

First of all, you must login to npm through your console.

Type

npm login
Enter fullscreen mode Exit fullscreen mode

It'll ask your username, password and email, and will let you know once you're connected to npm.

Now, it's time: publish your package with the command

npm publish
Enter fullscreen mode Exit fullscreen mode

If it gives you an error:

  1. Maybe you're not logged in correctly. Close the console and try to log in and publish it again.
  2. Your package name is probably taken, go to package.json, and change it.

🟣 Install it and try it

Now it's time to set up how your package can be used in a project.

*You can also test it before publishing it, as you want.

Create a new project, (with or without a js framework), and check all the ways you can use and import your package.

It is important that you document in your package readme how to set up the package, or else anyone will understand how to use your package.

Here some examples (of projects where I'm not using any js framework):

Importing my test.js function

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- MY PACKAGE IMPORTED AS A JS FILE πŸ‘‡ -->
    <script src="node_modules/npm_desire_test/test.js"></script>
</head>
<body>

    <!-- MY PACKAGE FUNCTION INSIDE THE HTML πŸ‘‡ -->
    <button onclick="alertThis()">alerta</button>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Importing my test.css styles

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- MY PACKAGE IMPORTED AS CSS πŸ‘‡ -->
    <link rel="stylesheet" href="node_modules/npm_desire_test/test.css">
</head>
<body>

    <!-- MY CLASS IMPORTED USED IN AN H2 πŸ‘‡ -->
    <h2 class="myOwnStyle">
        Title affected by the styles in my npm
    </h2>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

If your package is made with preprocessors like sass or scss, make sure to try out how to set it up and running and document it in your readme.md so everyone (and yourself in +5 months after the last time you used your own package), know what to do to use your package.

🟣 Uploading a new version of your package

Whenever you change, improve or modify your package, you must again open the folder in your console, log into npm (in the console, as before) and type the command:

npm version patch
Enter fullscreen mode Exit fullscreen mode

before using again

npm publish
Enter fullscreen mode Exit fullscreen mode

to upload the next/new/improved/modified/etc version of your package.

🟣 Deleting your package

If you'd like to delete your package, open the package folder in your terminal, log in (in the console), and type

npm unpublish
Enter fullscreen mode Exit fullscreen mode

if it doesn't let you unpublish it, use

npm unpublish --force
Enter fullscreen mode Exit fullscreen mode

instead.

🟣 In conclusion

That's it for now!

I hope this was useful and you could create, test and publish your own npm package. πŸ₯³

Let's keep coding πŸ’»!

Discussion

pic
Editor guide
Collapse
donovan680 profile image
Djalma Chagas Bina

Great post you wrote I am very long time Full Stack Developer working most as C/C++ Programmer for 25 years but I did Node.js Red Hat Linux Certification recently and getting too many jobs in this area. I think it will be very usefull for me to build web and mobile apps. Thanks !

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

That's a quick and great tutorial! Will work on some NPM package in the future. 😊
Have a great day :)

Collapse
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« Author

Thank you!

Please let me know if there was any mistake!

Have a great day you too!

Collapse
timothyokooboh profile image
timothyokooboh

Thank you Desire. Will definitely use this guide as I do intend to publish a package very soon.

Collapse
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« Author

Happy to help, share your package when it's done! πŸ™Œ

Collapse
ar7max profile image
Maxim

At this point we definitely need npm-version of codinghorror's "Please Don't Learn to Code".

Collapse
stereoplegic profile image
Mike Bybee

This is a very well-written and comprehensive guide. Kudos.

Collapse
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« Author

Thank you Mike, hope it is useful for you! ✨

Collapse
macdvh profile image
macdvh

Well written. Would you consider either in the comments or perhaps another post, creating a list of things you would recommend creating an NPM Package for?

Collapse
rafipiccolo profile image
Raphael Piccolo

could you add a part for npx to directly run the package without installing it ?

Collapse
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« Author

Hi!

I don't know how to do that, do you have any reference?