Instructor: Hey there.
Let's now set up our development workflow
which will include npm scripts, webpack and Babel
by installing Node.js and npm on our computer.
So in order to install Node.js,
just head over to nodejs.org
and then down here you just have the buttons
for downloading Node.js.
And make sure to install the first one
which has recommend for most users.
And maybe you're on another version,
maybe it's not 8.10, which is the most current version
by the time of recording this video,
but anything above 8.10 should be fine.
So, I'm not going to download and install it right now
because of course I already have it installed,
but please go ahead and, and do that now.
Then after everything installs correctly and you're ready,
open up your terminal so that we can confirm
if Node.js actually installed correctly.
And in order to that, simply write,
"node" and then "-v",
and this will check the version that you have installed
of Node.
And so in this case, I'm on 8.9.4.
And if you see the version number of Node
that you just installed,
then it means that you were successful.
So everything's working fine.
Now if you get an error here,
then it means that Node is not correctly installed
and you should probably go back and try it again,
or something.
Also we can check out if npm was also installed
because npm, the node package manager,
automatically comes with Node.
And so we're typing "npm" also "-v",
so flag for, for version.
Then you should also get your version number
which in this case is 5.6.0,
but if you get anything above that,
it should work just fine.
Okay, and with Node now installed,
let's go ahead and create a package.json file
for our project.
And I'm gonna explain a bit later what exactly that is.
For now, let's just move into our project folder
and create that package.json file in there.
So here in the terminal, remember,
we use "cd" to move to the folders.
And I'm on "Desktop" and then I'm on "9-forkify"
Let's check it out.
And here we are with the dist and source folders
just as we saw in the last lecture.
Now to create our package.json file,
which is basically a file which contains
informations about a project for npm,
we just type "npm init"
and then it will start asking us some questions down here.
So we can say the package name,
now we'll just call it "forkify".
You see that here in parentheses, that's the default name
that is automatically taken if we don't write anything here.
And the version in 1.0.0 is okay.
The description I can say
something like "forkify project".
The entry point doesn't really matter at this point.
Test command, git, keywords, author,
you can put your own name here,
license.
And now, we have the final result here,
and we just hit the return again.
And so this will be our package.json file.
And if we hit "ls" again now,
we see that we already have this file in here now.
So let's now head over to our text editor.
And indeed, you see that it is already here.
So package.json.
So you see the name that we gave it, the description,
and the author.
Then we also have something called "scripts"
and we're gonna talk about that a bit later.
And again, I'm gonna explain a bit better
what this package.json file's all about,
but for now let's go ahead and install webpack using npm.
So I'm going back here to my npm.
And so in order to install packages,
rewrite "npm install webpack"
and then we also have to say "--save-dev".
"--save-dev".
And what this "--save-dev" option here means
is that it will save webpack as a
development pendency of our project.
So you will see this in our package.json file in a second
after the webpack has installed.
And so that's it.
Let's now go back to our package.json file,
and indeed, here it is.
So we saved webpack as a dev dependency,
by using the "--save-dev" option, right?
And so, now in our package.json it created this
dev dependencies field to which it added the webpack package
on the current version 4.2.0.
Okay?
So, remember, in the inter lecture about modern Javascript
that I mentioned that we basically have
two types of Node.js packages.
Ones are libraries and frameworks and stuff like that,
and others are development tools.
So libraries like React or jQuery, for example,
they are really dependencies
because we use this code in our,
in our product, in our app.
But something like webpack,
this is really just a development tool.
And so, it's here in the dev dependencies field.
Now imagine that we wanted to use something like jQuery here
then we can also go ahead and install it.
So let's say "npm install jquery"
but this time we only say "--save".
Okay?
And so this will not save it as a dev dependency,
but as a dependency.
So let's go ahead and check that one out.
And indeed, here it is.
So dev dependencies is webpack right now
and dependencies is jQuery, okay.
And so this file here now,
has all of these informations listing all of the packages,
so all of the dependencies that we use in our project.
And that's very important
because if you were to move this project to another computer
or work with another person on the same project,
then everyone's on the same page.
So everyone knows which dependency we're using in our app.
It's also important because it allows us to install
all of these dependencies here automatically
if you don't have the, this node module folder, okay?
So this folder here is where all the packages go.
So let's take a look at it.
And you see that these are all the packages right now
in our node modules folder.
And they are here because these are actually
the dependencies of these dependencies.
So for example, webpack or jQuery,
they themselves have lots of dependencies.
And so we need to install all of these here automatically
in order for webpack and jQuery to work.
Okay?
Now, if we went to share our entire project here
with someone else,
we wouldn't have to share this, this huge folder here
which has these thousands and thousands of files.
We really wouldn't need to share.
All we need to share is this package.json file
which has this information about our dependencies.
And the other person could then go ahead
and automatically install these dependencies.
And let me actually show how we could do that.
So let's actually go ahead and remove this folder.
Okay.
And so now all our dependencies are actually gone.
So we have no more dependencies.
But we have our package.json file which lists
the dependencies that we have.
So webpack and jQuery.
So if now go ahead and simply type "npm install",
then it will go ahead,
grab our dependencies from the package.json file,
and install all of them.
So let's go back and here it is again.
So here is the folder again,
with all the packages back in there.
Now one last thing is that we can also uninstall packages.
So right now, we don't really need jQuery here.
So let's go ahead and delete it.
So to uninstall it.
And all we have to do is to say "npm uninstall jquery"
and again "--save".
And so let's wait for it.
And if we go back, now you see that this,
this object here is empty.
So no more dependencies.
We have only this webpack dependency right now.
Okay?
So that's installing and uninstalling.
Now before we leave,
actually there's still one more thing that I want to mention
which is that these packages that we installed here
with the "--save-dev" and "--save" options,
they are locally installed.
So they are installed only for this project.
But we can also install packages globally.
Okay?
So basically in order to make them
accessible from everywhere on our computer.
Right now, this webpack dependency
only works inside of this project.
But if you wanted to install it globally
and make it accessible from everywhere,
we could also do that.
Let me show you how, and actually,
we're going to do that with another package.
Not webpack, but instead, let's use
something called "Live Server"
which is another package that I, that I really like
which allows us to create a very simple and local webserver
to, to serve some static websites.
So again "npm install" name of the package,
and then, instead of "--save" or "--save-dev",
we can simply say "--global".
And now let me show it to you.
And yeah, so we got this error here
which is basically because we don't have
permissions to do this.
So on Mac and Linux, you have to prefix this command here
with "sudo" in order to give permission to do this.
On Windows, maybe it is not necessary,
but usually on a Mac,
this is what happens when you install global packages.
So let's try it again.
I will put in my password,
and now it should install globally.
Okay.
And so remember that this was installed globally,
and so I should be able to run this command now
from everywhere.
So let's move out of this folder, actually.
And so now, I'm back on the desktop.
So on a completely different folder.
And I can now run disc command, just like any other command,
here in the command line.
So "live-server",
and now, this is not going to work actually,
but let me show what happens.
And actually it did work.
So it opened here a local webserver here on this port
showing me the folders that are in the current directory.
Okay?
So let's go back to the terminal and here see,
"Serving users" and then here the URL.
Now to exit this program here, let's hit Control C.
And so in order to move out of this program.
Okay?
So this was just to show you that
there are locally installed packages with "--save"
and "--save-dev"
and then we can also use globally installed packages,
like we did here with this Live Server example.
Okay?
Now let's move back into our project folder,
clear this console,
and yeah, I think that's all that I had to show you
in this video.
So we installed Node.js,
then we used npm package manager
in order to install dependencies.
And remember they are dev dependencies
which are only tools that we use for development.
And then there are like real dependencies,
so code that is actually used in our app.
So imagine we're building a React app,
then of course we need to use the React API,
and so that's going to be a real dependency, okay?
And besides these two locally installed packages
we have the global packages
which we installed using the "--global" flag here
in the command line which can,
instead of global you can also write;
so instead of writing this, you can also simply use
the "-g" flag, okay, which is a lot easier.
So, that's it.
In the next lecture, we're then going to go ahead
and configure webpack.