DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
NFairbairn
NFairbairn

Posted on

Making your first npm!

Since I've been working with javascript we’ve been using these crazy magical packages called npm that do things for me. Importing packages and getting new functions that allow me to do even cooler things in my programs is awesome, but as a programmer, I couldn't just accept that it was magic. So I set out to find out more about node packages and how they’re made, and how I could maybe make my own.

Throughout my time here at Flatiron, we’ve learned JavaScript ES6, and JSX to use in our various web applications. We use npm all the time but we can use the same code knowledge we have, to create our very own packages that we can share to making new and exciting applications.

To get started, we need to set up our directory to contain all of the files we're going to use for our package.

cd desktop
mkdir my-test-package
cd my-test-package
npm init

It will ask you a bunch of questions but after the init menu it will prompt you to choose different settings to generate a package.json file.

In your package.json you’ll specify the name and description of your package, and you’ll also specify the file that the package will get it’s code from.

There will be a key in the file called main and this points to the file that you’ll want to execute when using your package. By default it’s set to index.js

Now that your package.json knows where to look, it’s time to go into your index.js (or whatever file you set as main in your package.json). Here is where you’ll write the methods for your package.

For example, what if I wanted to make a package that contained the solution to a whiteboarding problem, and I wanted to be able to use those methods in another project.

In my index.js file, I’ll go ahead and add my function:

module.export = (string) => { return string.split('').reverse().join('')}

This module.export method allows us to import our function as a module, so that the other files in our app can use they methods if they require the file path.

Now we’ve got our package complete, and we can create a test app to see if our package imports correctly.

Go back out to your main directory and create a new project.

npm init -y

The -y flag just lets you skip all of the setup questions. After the directory is made, we want to npm install our newly created package!

npm install my-test-package

Since our package isn’t published, we’ll have to use the absolute file path of our package to tell our computer where to retrieve our files.

npm install User/desktop/test-package/npm/my-test-package

Now we need to link our imported package to our new app, we can do this by typing

npm link my-test-package

inside the console of our working directory.

Now that we’re set up, open up the app.js file and we can import out package to use in our current app!

const wordReverse = require(β€˜my-test-package’)
const input = β€œreverse me!”
const test = wordReverse(input)

console.log(test)

Now run

node app.js

in your current terminal and your output should be:

=> β€˜!em esrever’

Huge! Now we can import any local package I want to use in my projects!

From here you can host it on GitHub and you can share your methods with everyone! Or you can start an open source library! The possibilities are endless!

After you’ve successfully created your package, you can publish your package to npm! After that you can just run

npm install <your-package> 

from any machine and you can import your very own library!

Pretty Neat!

If you wanna read up more on node here are the docs

Here is a great guide to publishing npms by the npm docs

You can create an npm account here to start publishing all your amazing packages!

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›