[MUSIC]
Now that you have Node.js on your computer,
you're obviously wanting to immediately start using it.
So in this exercise we will start using Node.
We will set up a package.json file for
our git-test folder that we have been working with so far,
then we will set up a Node module called as lite-server that
will serve up the contents of our git-test folder.
And then we can browse this index.html file and
other files in a browser.
And we will also see how the lite-server will enable
us to automatically see updates to our browser
window as we make changes to our index.html file or
any other files in our git-test folder.
The lite-server is something we're going to extensively use in this and
future courses to be able to see the changes in real time in
a browser window as you edit the files of your project.
As I mentioned, we want to set up the package.json file.
So what exactly is this package.json file that we're going to set up?
So here, I have some information from
the npmjs.org site which specifies what
exactly is the role of the package.json file.
So the package.json file serves as the documentation
on what all other packages that your project is dependent upon.
So for example, when you set up the lite-server for
your project, that will be recorded in the package.json file.
So that subsequently, you can also make use of that package in the future.
Also, it allows you to specify which specific version of a package
that your project is dependent on.
So even if the package that you depend on changes in the future,
you may insist that you want the user to install only a specific
version of the package for use within your Node application.
And also it makes your builds reproducible,
which means that when you share your code with others,
then they can also do installation of all the Node modules,
as we will see later in this exercise, on their own computer.
So obviously, your next question would be, how do we create this package.json file?
If you are starting a new project, where you want to initialize the package.json
file, then simply type npm init at the prompt in the project folder.
And then that will take you through a set of steps
which will enable you to configure your package.json file.
So let's proceed with that for our git-test project.
So here I am in the git-test folder in my terminal window.
Make sure that you also open a terminal window or
a command window and then go to the git-test folder.
And at the prompt, type npm init and then follow along the questions that are asked.
So for the name of the project, we'll just leave it as the default, git-test.
For version, we'll just leave it as 1.0.0.
We can edit that later.
For description,
This is a test directory
to learn Git and Node.
It doesn't matter, type some description there.
And then the entry point, I will just say index.html.
Usually if it is a Node package, the entry point would be index.js.
Now, this folder that we have set up is an index.html based folder,
so that's why I just type in index.html.
Test command, nothing.
Git repository, If we had already setup the Git repository in the previous
exercise, it will automatically prompt that for you.
If not, this would be empty and give you an option to type in the Git
repository URL in case you're using an online Git repository.
Some keywords for your project, which I'm going to leave blank.
Author, type your name.
Let's be narcissistic.
And license.
And then it'll show you the configuration of the package.json file in JSON format.
So if you're familiar with JSON, this will look very, very familiar to you.
So if this looks all good, let's just say okay.
And then that results in the creation of the package.json files.
So now if you list the folder contents,
you would see the package.json file in the folder contents.
Open the git-test folder in your favorite editor and
then take a look at the contents of package.json file in your editor.
As the next step, we will learn how we can install
a Node module using NPM, the Node Package Manager.
So we're going to install this node module called as lite-server.
The lite-server will serve up the contents of this git-test folder in
a server that it starts up, so that you can view the contents in a browser.
Given that we have an index.html file, if we serve up this folder
then it'll be a website and you can view the index.html in a browser.
So let's set up the lite-server and then we will see how we can make
use of the lite-server to serve up the contents of this folder.
This is very, very useful because if you are working on a web development project,
you want to see the live version of your web development project so
that as you make changes to your project,
you can see the changes immediately reflected in the browser.
So this is a very good Node package that is very useful for this purpose.
So let's set up the lite-server.
To do that at the prompt, type in npm install.
So notice, if you want npm to install a Node package,
this is how you're going to invoke it.
And then you'd say lite-server.
And then we also want to save the fact that our project is using the lite-server.
So we will save this information in the package.json file.
So to do that, we're going to type in --save-dev.
Now the save-dev option specifies that this lite-server is used for
development dependency for our project.
If you're installing a Node module on which your project is directly dependent
on, then you would install it by simply saying --save option.
So let's go ahead and install it.
And you wait patiently for the installation to take place.
It'll take all of a few minutes for that to complete its installation.
Once that is installed, then you would immediately
notice when you look at the contents of your folder,
you will immediately notice that there is a folder there created named node_modules.
Now, if you go into the node_modules you will see a whole bunch
of other sub folders in there which contain node modules which
are necessary for the lite-sever node module and so on.
So, let's take a quick tour of the node_modules folder to see
what the contents of these are.
Going to my git-test folder, if you're going to the node_modules folder,
you would see as I said, a whole bunch of sub folders there.
Normally you don't need to be rendering into the node_modules folder,
they just exist there because they are needed for the lite-server.
So, as you browse through you, should a notice folder named lite-server here.
When you go into the lite-server folder, note in particular the presence of
the index.js file and then a package.json file, and several other things.
So this contents of the folder comprises the lite-server node module.
But this lite-server node module is dependent on other node modules
to provide it with some additional functionality.
So that's the reason, when you install the lite-server node module, it'll in turn
install many other node modules on which the lite-server itself is dependent on.
So that's the reason why you see that explosion of
those folders inside the node_modules folder.
Don’t be too concerned about it, the sum total of all this will not be more than
a few tens of megabytes.
So, it is not going to fill up your directory with that junk.
This is all essential for node to be able to help you.
In case you're curious about the lite-server and how it works and so on.
You can alway go down to this GitHub site where the lite-server is posted and
then look up the documentation for lite-server.
I will introduce you to whatever you need to know about lite-server as we go through
this course and the remaining courses.
So you don't need to worry too much about it.
But just in case you're curious,
you can always go to this site to find out more details about lite-server.
The link is provided in your exercise instructions and
additional resources part of this lesson.
Once you have completed that, then head over to the editor,
where you have the folder, git-test folder, open and
then view the contents of the package.json file.
So you would see that the package.json file contains exactly the information that
you configured with your npm in it.
So you would see the name, version, and repository author,
and in particular, note this information here says devDependencies.
And then it specifies lite-server, and also notice it says, ^2.2.2.
So which means that this particular project depends upon
lite-server that is a at least version 2.2.2.
All high level.
So this is very useful for us.
Now, why do we need this information here, later on when you go to the other
exercises, you will notice that when you store this on an online repository.
You don't want to be storing everything in your node_modules folder.
We will only be storing information of all the files that we have created.
The node_modules folder can always be recreated by
typing nmp install at our command prompt.
And then based upon the devDependencies and
dependencies that are listed in the package.json file.
All the node modules that your project depends on will automatically be
installed.
We will see that later on,
on how to use npm install in this course.
Now, now that we are at package.json file, let's make a couple of edits so
that we will be able to make use of the lite-server to serve up that content.
So, right here in this option called scripts,
let's add in one more here.
So we will say, start.
So start is a command that npm support
which enables you to specify a bunch of things that will be started.
So later on, we will see how we will make use of this.
So here, I'm going to say, npm run lite.
And after the test, I'm going
to add in one more entry called,
lite which I will configure as lite-server.
Okay, with these changes, let's save the package.json file and
then now, our project is configured.
So that now, if you start the lite-server,
the contents of your folder will be now served up in your favorite browser.
Heading back to our command prompt and the prompt.
If I type npm start, now you see why
I put that entry called start into my package.json file.
So, if I say npm start, whatever that start is configured as,
in the package.json file.
We specify that as npm run lite, and then lite was specified as lite-server.
So essentially, we are saying start the lite-server.
So once I type, npm start, it will start the lite-server and
it will serve up the contents of this folder.
Now, how do you access the contents of this folder?
If you want to access it locally, you will access it by
specifying the URL as localhost:3000.
This is the default settings for the lite-server.
Furthermore, this should automatically open
the browser window of your default browser and
then show the contents of index.html in that browser window.
Here, you can see that I have opened my editor and
my browser window directed at localhost:3000
simultaneously side-by-side.
So that we can see how the browser window will immediately
reflect any changes that we make to our files in the git-test folder.
So let me go to index.html.
And then for the sake of space, I'm going to turn that over.
And then so here you can see that this is the contents of this.
And then now let me add in
one more paragraph,
And save the changes.
And then you will immediately notice that the change that
I made to my index.html file is reflected into my browser.
This provides a very nice way of being able to observe, in real-time,
the changes that you make to your code being reflected into your browser.
So when you are working on a project, it would be very appropriate for
you to be able to see the changes immediately.
So when you make a change and save the file,
the modified code is immediately loaded into your browser so
you can immediately see the change being reflected in your browser window.
This is a very useful tool while you're doing development of your project.
That is the reason why I introduced you to the lite server and
set it up so that we can make use of it as we develop the website in this course.
If you recall, we had already set up our git-test folder to be a git repository,
so that checking again, we
will see that we already have three commits in our git repository.
And this git repository is already to our online git repository,
which we have set up in the previous exercise, either at bitbucket or GitHub.
My git-test folder is synced to my bitbucket
repository in this particular exercise.
So what I'm going to do now is to show you how you can exclude some
folders from your project folder and
then make sure that they are not synchronized to your online repository.
Now as I said, the node modules folder can always be recreated
by typing npminstall at the prompt.
So that's why, when you upload the contents of
your folder to an online git repository or
when you do a commit of the folder to your git repository,
you don't want the note modules folder or all the subfolders
under it to be included in the, Commit.
So how do we exclude some folders or
some files from our folder from being checked in into our git repository.
So to do that, we will set up a file named .gitignore.
So that's the name of the file, .gitignore.
So to create this .gitignore file, we will go to our editor.
So in the editor in the git test folder, I'm going to create a new file.
And I will name it .gitignore.
Note that the name begins with a dot and
then the rest of the name is G-I-T-I-G-N-O-R-E.
So this is very,
very important that you set up the fille with exactly the name, .gitignore.
So let's create this file called, .gitignore, and
the first line of that file, we will type as node_modules.
So what this means is that,
the node module folder is going to be excluded from our git commit.
So once I create that .gitignore file and
then add node modules into the .gitignore file, let's save the changes.
And then we will now do a commit of the current state of our project
into our git repository.
I hope you remember your git commands.
Let's do a git status, and then when you do that,
you will immediately notice that you have the index.html file
marked as modified and then the two new files, .gitignore and package.json.
So we do a git add ., and then do a git status.
And then you see that all these new files have been checked in into your commit.
Let's do a git commit, git commit -m "fourth
commit." And the files are committed.
Let's push the new commit to our online repository.
So to do that, git push
-u origin master.
And wait for it to be pushed to our server.
Now if you go to your online git repository,
you will see that the package.json file and
.gitignore would have been checked in into your git repository.
Going to my bitbucket repository for the git-test.
You will see that when I look at the source,
you will see that the package.json file has been added,
the .gitignore has been added, and the new index.html file has been checked in.
So that completes this exercise.
So in this exercise,
we have learned how to setup a package.json file using npm minute.
We have learned how to install an npm module.
And we have learned how to use the lite server npm module to serve up
the contents of our project folder so that it can be viewed in a browser.
So this is a nice way of serving up your contents,
your web application or your website so
that you can see changes in realtime being reflected to your browser window.
And then, we also saw how they can set up the .gitignore so that some
folders can be excluded from being checked in to our git repository.
This completes this exercise.
So with this, I'm sure you would have gotten a good handle on
the use of both git and then also node and node modules.
Don't worry.
We will be using node extensively in various ways
as you go through the courses of this specialization.
This is just a start.
[MUSIC]