Welcome back, let's start using NPM.
I wanted to go over one more time exactly what's happening underneath it.
So now that we have a package.json file we're able to grab whatever packages we want from NPM
and the next section will be grabbing react
again a JavaScript library that will be using. and that file lives on NPM.
so using package.json file and the newly found NPM command,
We can grab react and have it as part of our project. So let's get started.
I'm going to minimize this and because we're using react in the next section I'm going to show you two
other packages that I really really like in NPM. One is called live-server and the other one is lodash.
I'm going to be going through each one of them so you know what they are.
But I pick these two because they're actually different in the way that you install them.
For example, with live-server, I have 'npm install -g live-server'
OK,
that seems fairly easy.
And then with lodash, if I go to the NPM registry, I see that it's
'npm i --save lodash'. Hmm, well, NPM allows you to install things two ways. One, globally or two, locally.
What does that mean?
In our project here our background generator, if we install something locally that means NPM will install
a package that is only able to run in this folder, in background-generator.
But if I downloaded globally and that is what '-g' means.
Well I can use live-server outside of this folder anywhere on my computer. As the name suggests,
globally means you can't run it everywhere and usually globally means you can run it on your terminal.
So remember that if you install it with '-g', that means it's going to give you a command that you
can run in the terminal.
If you don't install it with '-g', if it's locally then it will give you powers such as new abilities in
the JavaScript file. Let's actually go through this to demonstrate this point.
I'm going to install live-server by doing and 'npm install -g live-server' and again every time you install
an npm, it's the same thing. You run 'npm install' and the package name because I want this install globally.
I'll do '-g' and I'll say 'live-server'
It's going to run through the install here.
Ah and there you go.
We have what's called an
EACCES:
permission denied.
Remember what I said?
If you don't have correct permissions, you might have to run with sudo?
This is what it's saying -it's saying my user doesn't have access to install.
You need to have admin permissions and that just means you'll have to enter your username and password.
You can fix this on your computer after this, but for now you can run
'sudo npm install -g live-server'
and you see it ask me for my password and there you go, live-server has been added.
Let's clear this.
OK.
So if I look at my package.json file, well, nothing has changed.
And nothing should. Because we installed the package globally, it now lives on our computer but not
inside of our folder.
As I mentioned. We have a cool ability now we can run a command with live server
You can actually read through the documentation here.
But what it allows us to do is if I type in live-server while I'm in the background-generator folder,
Did you catch that? It automatically loaded our background-generator project.
What is happening here?
Well, we see over here live-server creates a server, a fake server for you and then watch for changes
so that if I go now to, let's do CSS and I'll do 'text-align: left'
and I saved. live-server does detects the change that says CSS change and it automatically changes this
without me refreshing it. Remember how annoying it was every time I changed anything on our project,
we had to hit refresh to make sure that the changes work? well, live-server creates a server that keeps
watching your files and every time a change is made it sees it and updates the project and you see over
here that we have 127.0.0.1
And then this is Port 8080.
And this is the default what we call local hosts.
That's something that I'll talk about later on in the course.
But as you can see is just saying you can open this test web site at this address.
If I actually type in here localhost which is you're local host, you're the server,
it's the exact same thing.
How cool is that.
I'm going to return this back to the way it was and again changes detected as soon as I save everything
is restored.
So live-server is really cool in the next section I'll show you something even nicer than that.
But again a really really great example of why NPM is great.
I was able to install something really quickly and now I have a server which is my computer that is
watching these files and serving up my project right here on my computer.
We didn't need to buy a server, we didn't need to put it on github,
Everything is here already.
Now that we've done that let me just close this.
I'm going to clear this.
So that was a globally installed package.
The other type of package you can intall is local, as I said.
and with a local package we can install something like lodash and it's actually one of the
more popular libraries.
Now for those that don't know lodash, you can think of it as an extension of JavaScript.
With JavaScript, we have all these methods that come with it.
We have -you know, querySelector,
We have getElementById,
But would it be nice if we had more functions that we can run? Well, lodash has a whole bunch of
them they can use.
And if you go to the Web site, if you go to documentation, you'll see that they have all these things
you can do with an array and they have really good examples as well.
So any time you have an issue, lodash is really really good instead of maybe writing your own.
I don't want lodash to be on my computer.
I just want it just for this project. What I'm going to say is, I'm going to say 'npm install lodash'
and I'm going to open up the package.json file to see if it changes while we do this.
I'm going to press enter.
Now if I go into my sublime text, we see that package.json just added a new line, it says "dependencies",
"lodash" and this is the version of lodash that we've downloaded.
And another thing you might notice is that we have something called node-modules folder that was just created.
what does that mean?
If we open this we see that lodash is installed.
And oh boy that's a lot of files of lodash that we just installed.
You see as soon as we do npm install then package name, it fits locally and we have a package.json file
since we did 'npm init',
It will add it to our dependencies which means packages that our website needs to work. And the way it
finds these is that all these packages live under the node modules folder and you can see that lodash is here
and now we can use all of their new methods.
So let's give it a try.
Let's see if we actually have a lodash working and our JavaScript.
I'm going to open up the script.js,
-
And the way we want to get lodash in here there's a few ways.
One is shows you the way to do it in Node.js,
but we're not using Node.js,
So if you remember with modules, we can just do 'import without' -which is a lodash function,
I think we can see it down here without.js,
and I'll just say 'from lodash', let's close that and just to check that we have lodash working,
I'll just do 'console.log(without)',
I'm going to save, and you know what, let's start up live-server, because it was working nicely for us.
Let's open up the console, hmm
Uncaught SyntaxError,
Unexpected token import
And if I actually do import here, Yep, the console doesn't recognize the import because as I said before
it's a new syntax that browsers haven't gone around to actually implementing.
So looks like I have to use the 'require' syntax and you might remember this syntax from this video where
we talked about moduling in JavaScript and we discussed that ES6 and this thing called a webpack is
what we use now.
But that's for the react section.
For now we want to be able to use require.
And the way we're able to do that is browserify.
Luckily for us we have something called NPM that we can install a global package, so I can do install
global,
And there's browserify
And again I have the access error, so I have to do 'sudo npm install -g browserify'
let me clear that everything's installed again.
Import syntax which comes from ES6 were able to use that with Webpack, but because that's for next section
I want to show you what we did before this.
We use something called browserify which allowed us to use this requires syntax.
So let's copy this the way they have it in NPM and now I'm going to say 'console.log'
underscore(_) but this won't actually do anything.
If you remember this is a module bundler, and it's a global package that we installed.
We give it a script file and it outputs another script file that we can use in the browser.
The command for that because we installed it globally we can use browserify now and I can say that
my script.js file should be bundle.js
Did you see that?
We now have a bundle.js file.
And if I click on this, well, I have a whole bunch of things it looks like a big file and that's because
we included lodash.
It has created for us a bundle file that adds what we wanted so that the browser understands it.
We simply go to index.html file and instead of the script.js file, we'll do bundle.js, I'll save
and let's try this one more time I'm going to do live-server, open up the console,
There you go.
It looks like it's working.
If I go back to my script file with lodash now in my project if I had an array Let's call it variable(var)
array that has 1 2 3 4 5 6 7 8. And I can use a lodash method that is without.
And I can do console.log, answer: within here will say lodash which is the underscore we have assigned
the underscore variable to lodash as the library suggests and we'll give it without which again is
a method that comes with lodash that
you can check on their Web site. Within here,
I will put my array,
And the second parameter will be what I want it to be without.
So let's say I wanted to be without the number 3.
In that case, I save this, change has been detected.
I open up the console and refresh, Ah- but you see, we don't see anything here because again we need to
put it into 'bundle.js',
I know it's annoying, but this is good practice for us to understand how all of this works.
So again bundle has been updated and now I can run my live-server, open up console and look at that-
I have an array with 1, 2, No 3, 4, 5, 6, 7, 8.
So I can use lodash.
So looking at this you might realize why NPM is called Node Package Manager. Because it was initially
created for node which accepted this require syntax but not for the browser. browserify allowed us to
use the syntax that would require syntax that was use in
node.js,
on the browser.
All we had to do was input our script files into browserify and then it outputs the bundle for us.
Very cool.
All right.
There has a lot of hoops to go through to show you a few things but you have some really really good
contacts of what we're trying to do here.
We've set up a system now where we're able to import all these different things that other people have
written to make our code better.
But you might notice two issues with the current setup.
One is the fact that I'm only using this without method that comes with lodash.
But if I look in the bundle.js file, well, it's massive because it's included this entire library
and that is something that you want to be careful with. When you're working with NPM,
A lot of beginners just start installing a ton of packages without thinking about how much weight they
add to a project.
It's a good idea to really assess whether you need that package as a team and add it to the project.
If it saves you time, if it's really well written, it has a big community around it.
It's something that you always want to consider.
The second thing is that now we have something called "dependencies" that is our project depends on
these things.
We need to make sure that our website or our app always has lodash in a certain version so that
it works with our website.
It also adds that extra layer of complexity that you should consider. But package.json file also
offers you a lot of great things.
Maybe they're not evident right now because our project is fairly small but when you are working on
big big projects it serves as a great documentation for what packages your project depends on.
You'll see that most big projects can have close to 100 dependencies and having just one location
package.json file to see all these packages to see what the project depends on is really really nice for all
all that are joining the team and it also allows you to specify the version here of your dependencies.
To lodash updates,
I can also update my version just from this one line without having to go to the lodash website, download
the file and add it into
my index.html script file.
Again another thing is we're not adding the script files over and over and over.
As we've spoken about before.
Now these numbers that you've seen before it's called and they each have a meaning.
The right most number is the patch release.
So that is if there's any bug fixes.
They will update it here if they find a bug and they need to fix it.
This will become five.
This one is the minor release.
That means there is some some new features that were added to lodash but there won't be any changes
that are major.
And then finally, this is a major release which means this is a fourth version of the fifth version of
lodash was released.
Well that's a major release.
That might be quite different from version 4 and it might break some of the websites that depend on
lodash 4. package.json allows you to really decide what versions you need for each of these
packages.
But probably the biggest benefit that you get with NPM, this project is much easier to share with other
developers.
I don't need to add script tags in html for these now, and for a developer,
in order for them to download all the packages or the dependencies that a project requires,
Well, I will never put the node modules into my github repo. because all you need is the
package.json file.
Let me show you what I mean.
If I delete my node packages here
and let's say somebody new started at the company and we want to make sure that they have the latest
version of the project so they can start working on it.
Well even though there's no node modules because we have package.json file, NPM is spawn enough
to say -let me clear this up, or let me stop this server, and I'll clear, as long as the new person does
'npm install'
And there is a package.json file.
Well, in that case all of the dependencies get downloaded.
So right away they can start the project with the exact same version of all the files that everybody
else has.
And that's why you won't see any known modules folders which can get really really big on github
because we don't need it.
We have it all described here in package.json.
Now one other thing.
There's actually another type of dependencies that you can have, these dependencies are what
background-generator depends on.
But there's another type of dependency called 'dev dependency' and a dev dependency are packages that
are only needed for development and testing.
So it will never be shipped to a website so that an end user can't see and you can do many many things
that again we'll get into the react section but we'll have a separate section called 'dev dependencies'
here that will have different things that only are use for the developers but are taken out automatically
when we release the product so that it doesn't add too much weight to our project.
Ok ok.
I promise this is the last thing.
Let me clear this. If I now run npm run test
So the syntax is 'npm run'
then whatever the script says-
in this case 'test', I get 'echo "error: no test
specified."
Now that's actually what is defined in here.
NPM scripts allow you to do comments from package.json file.
Let me show you. Remember how annoying it was that we had to do browserify to do the bundle? well, in here
I can say "build" and within this section
-let me make this bigger- within this section,
I can say "browserify script.js" to "bundle.js"
and I can run the scripts a build script that automatically runs this in my terminal.
Let me show you, if I save here.
need clear- and I'll say 'npm run' and then whatever the name of the script is 'build'
Look at that. I've just updated browserify and it runs the script.
Very cool.
Well, what if we also add the live-server too, command to it? '&& live-server' I save and
run the same command again.
Look at that. I have my array displayed, my website's running and it does all the commands right away from my terminal.
How cool is that?
All right.
I think that's enough for NPM.
It is a very useful tool.
We're going to use it a lot and you will use that a lot in your day to day and you will get more comfortable
with it.
The more use it. In the next section we're finally going to get to building a real life app with react.
We're going to use some of the knowledge that we've gathered up to this point.
We now have a complete view of Front-End.
Although you may not feel extremely confident you'll see that we've gotten to the point where we can
build really really nice apps and websites.
We have all the tools in our arsenal now to create some amazing things.
So I really really look forward to the next session with you.
I'll see you in that one.