Let's talk about how we can set up NPM on our computers so we can start using it. If we wanted to
learn react, well,
React is actually a package created by Facebook that we're going to be using in the next section.
We need to get it and then how do we do that.
First thing we need is this. We need to download Node.js which comes with NPM you can see over here that
the Latest LTS, which means Long Term Support version 8.9.1 includes NPM and
you have the version numbers here as well.
So for Windows you can install here, Mac here,
Anything else you can use the source code as well.
You simply click on your operating system of choice and you'll have your node package install
You simply click and it will install everything for you and take you through the whole process.
This should be very quick.
You can do it in less than a minute.
Now why do we need Node
And what is Node is probably what's going through your head right now.
And don't worry we'll get through it.
The simple version of it is that Node allows us to run JavaScript outside of the browser.
I mean up until this point every time we wanted to use JavaScript we either wrote it here in the console
or we attached a script file to HTML and loaded the HTML file in the browser.
As you know each browser has a JavaScript engine such as the V8 engine that Chrome has. But that was
the only thing that was able to read JavaScript. Outside of a browser,
we need something to read it to understand it and Node.js was created actually using the V8 engine
that the Google Chrome browser uses to read JavaScript and run JavaScript outside of the browser.
But like I said, we'll get into that later.
For now let's download
Node.js
which automatically installs NPM for you.
And don't worry in the next section I have resources for you to go through this step line by line both
for Windows and Mac and also some troubleshooting in case you run into errors.
Now after you've installed everything there is a simple way to check that everything is working.
You just go to your terminal and you type in 'npm -v' and this should give you a version number.
If that didn't work, well then go through the steps that I've listed for you and you should be able to
get it.
So you want to make sure that if you're watching this video and going on through the rest of the course
when we're building our projects, you want to make sure that NPM our version is higher than
5.5.1
Otherwise it might not work.
And we also want to make sure that we have Node and we simply do 'node -v'
And again we want to make sure that our Node version is higher than 8.9.1
Now let's say that for some reason these are lower.
Well, Node -you simply go to the Web site and they'll have the latest version for you which should be
fine with this.
With NPM, if for some reason this is lower, you can simply run 'npm install npm@latest -g'
I don't think you'll run into there so you should be good.
Finally, while running through NPM commands which is why we'll use to download things and I'll show you
how to do that in the next video.
You might run into some permission errors where you're running a command like 'npm install react' for example.
When you press enter you might get some permission errors. In that case,
that means that your user whatever you're logged into to your computer doesn't have permission rights.
Maybe they're not the administrator at all the computer in which case you'll have to run these commands
as the administrator which simply means running 'sudo npm install react' and it'll ask for your username
and password.
you're going to have links to this after this video.
If you're on Windows there is a different command and sudo again both found and the
resources after this video.
All right.
So we have NPM and Node installed.
Everything looks good.
How can we start using NPM and even getting that package.json file that I keep talking about.
It's very easy all you do is 'npm init' and any time you start a project you want to do the 'npm init'
And this command creates a package.json file in your directory.
So we have the background generator here.
You'll see that after I run this command, it'll ask me a few questions and then package.json file
will appear here.
Let's go through it. And you can see over here it's going to walk me through the set up.
I can name my package if I want.
In this case I'm just going to keep pressing Enter because unless you are publishing an NPM package.
You don't really need to worry about it, so I'm just going to keep pressing enter.
But you can see I can add a few things about the author of the license of the project.
I just keep pressing enter. And I don't know if you noticed but if I clear here and on the left,
look at that, we have package.json file.
Let's open it up.
I'm going to minimize this a little bit so we can see it clearly and we have package.json.
There you go.
We have our name "background-generator"
It's version 1.0.1, main is "script.js"
It actually finds out where our main JavaScript file is and we have a couple of other things that we'll
go through in the rest of the section.
But one question you might be having is 'What is .json?'
Up until this point, we've had
.html .js .css
Well, json is a file format.
You can see over here on the right hand side of the bottom that Sublime Text says this is a JSON(NPM) file.
it's just a format and it looks kind of like a JavaScript object except for the fact that it has double
quotes for properties.
All right with this comes a lot of power so I'm excited to show you what we can do with this.
I'll see you in the next one.