If you are a modern developer looking for a job, you have to understand one key piece of tooling software and that's npm, the node package manager. It's part of Node.js, but it's sort of its own separate component. In this episode, learn the basics of working with the Node Package Manager
- [Instructor] If you're a developer applying for a job today, there is one key piece of tooling software that you're going to need to know, and that's NPM, the Node Package Manager. It's part of Node.js, but it's its own separate component. So let's take a look at how it works, and use it to create a simple Bootstrap project. NPM allows you to create or use a variety of packages available to developers on the web. The main website where you can find these packages is npmjs.com. You can find tons of reusable code, including frameworks and libraries, like AngularJS, React, and Bootstrap, and easily install them through the terminal.
When you go to the site, you can do a search for a module. Let's go ahead and try looking for Bootstrap, and when you click on this right here, you can see that it gives you information about this framework, and how to install it with different methods. It also gives you a convenient link to the GitHub repo page. Now this might look a little bit different. Bootstrap might already be upgraded to version four when you see this, so just note that. In order to use NPM, you need to install NodeJS.
You can do that at this website. Once you install NodeJS, you'll have NPM installed. Now to work with NPM, you can use a terminal application. In Windows, it will be easier if you install a terminal, which allows you to use the Unix file system. Most of the examples you'll find online use Linux type commands. One terminal that is easy to install and use is the terminal that comes when you install Git, which you can find right here. Now as you go through the installation, make sure that you also install Git Bash if you're using a PC.
On a Mac, you can just use the terminal application. One note, if you've been following along with this weekly series, we've been using the practice environments to work through most of these examples. For this week, I'm not going to do that. I'm just going to use the terminal to show you how NPM works, and you should do the same. So let's take a look at how we can create a simple project using Node modules and NPM. I've already got NodeJS installed right here, so I'm just going to issue the command first to get to the desktop.
So I'll do a cd~/Desktop and after I do that I'm going to create a directory, so I'll do a directory with the mkdir command, and I'm going to call this masteringcode, and then I'm going to switch to that directory with the cd command. Once I'm in there, I can issue an NPM command called npm init. Npm init is going to ask you a series of questions, and it will create a file called package.json for you.
Now this file is super important in NPM. It keeps track of all of the modules that you're installing through NPM. So let's go ahead and go through this list. First, it picks up the name of the folder automatically, and that will work, so I can just hit return. Then it will ask for a version number. This is the first version of this project, so I'll just hit return again. And for a description, I'll just type A simple npm project. And the entry point is generally for NodeJS applications.
This is a simple web application, so I don't really need this. I'll just hit return and then I'll edit the file later. Test command, again I'm not running any tests with this project, so I'll hit return. I don't have a git repository or I would type it in here, so I'll hit return again. And keywords is if you're posting this project on the npmjs.com website, then you can type some keywords and make it easier for people to find your project. We don't have that, so we'll hit return again.
For author, I'll just put my name, and I'll hit return. License is for if you want to make this project an open source project, you can specify the type of license you're using. I'm not going to do that, and so I'll hit return. And then it gives me a preview of what my package.json file is going to look like. Is this ok? I can just say return, and it will create the file for me. So in here, I should have a package.json file. Let's open up this folder in a text editor.
I'm going to use Visual Studio Code, and you can see that we have our package.json file as well as this masteringcode folder. So let's go ahead and install some projects. First, let's go ahead and clear the screen, so I'll issue the clear command. That will get rid of all that text on the screen, and now I can start installing packages. So let's go ahead and install Bootstrap first. I'll do npm install and then bootstrap. I want to make sure that I get the third version of Bootstrap, so I'm going to use the @ sign, and then type in the number three.
Now Bootstrap four is about to release as a beta right now, but let's keep things safe and just use Bootstrap three. So once you do that, you'll see that it actually added a folder right here, and you can see there's a node_modules folder, and inside that folder, there's a bootstrap subfolder, and then that bootstrap subfolder, we have a series of files, which are essentially the bootstrap installation. And the important thing here is that there is a dist folder for distribution, and in that folder are the files that we would normally load into our index or other html page.
So you can see that bootstrap.css, the bootstrap.min.css, and then the java script files right here as well as the fonts. So if you see a dist folder or a distribution folder, that's usually the folder where you need to load things from. So let's go ahead and install Jqueries since Bootstrap requires Jquery. For that, we'll just use npm install jquery. And now you'll see that in this folder, there will be another folder here.
Let's go ahead and hit this refresh button, and that happens to be Jquery. It also has a dist folder, and all the files that we're going to need are right there. So next what I need to do is actually create a file to hold my index.html page, so let's go ahead and make sure that you're not clicking anywhere. Make sure you don't have the node_modules node folder selected. And I'm using Visual Studio Code, you can create a folder in whichever way your text editor allows you to do that, or use your operating system.
So the next thing I need to do is to create a file, and you want to make sure you don't have any other folders selected, or when you create a file, it'll just make them inside that folder. So I'm going to click over here. I'm using Visual Studio Code. Then I'll create this file by clicking on this icon, and typing in index.html. And so this will be just a regular text file, and I'm going to go to a Gist that I created with a bunch of codes.
So I've got all of this code right here. I'm going to hit the raw button, and then just select all this, and copy it, and then come back into our application. Let's go ahead and expand this window. And I'm going to paste this code in here, and you'll notice that where I'm calling the CSS and the Java Script for my project, I'm actually using a link to the node modules folder, and then I go into the subfolder, find the distribution folder, and then look for the file that I need.
So I'm loading up the bootstrap.min.css right here, and when you come down here, you can see you can see that I'm doing the same thing for jquery as well as the bootstrap java script. Let's go ahead and save this one, and then we can open this up in a browser. Let's make this window smaller, and I'll just double click on this index.html. It should open up a new browser. And you can see the results of the file. It's loading up jquery as well as bootstrap with the CSS. And that was really easy to do by just loading up some node modules.
And I didn't have to download anything from any website. I can very quickly create my project. So make sure that you learn how to use NPM. There are a lot of other more complicated and really easier to use installations and processes that you can use to make your life easier when you're creating a project. Here's some more pages where you can get more information about working with NPM and install NodeJS as well as Git if you have a PC and you need Git Bash.
There's also some courses where you can take your knowledge a little bit deeper, including learning NPM and also tooling specifically with NPM scripts. Now if you have some ideas for this weekly series, and maybe you want to share with me some questions you've been asked or have asked in interviews, connect with me at LinkedIn or just about any other social media network, like Twitter or GetHub at Planet of the Web.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.