Now that you have Node.js on your computer,you're obviously wanting to immediately start using it. 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. 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 that you are 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 that 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. The package.json file serves as the documentation on what all other packages that your project is dependent upon. 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. 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. Then that will take you through a set of steps which will enable you to configure your package.json file. Let's proceed with that for our Git test project. Here I am in the Git test folder in my terminal window. Make sure that you also open the terminal window on a command window and then go to the Git test folder. At the prompt type NPM init, and then follow along the questions that are asked. For the name of the project, we will just leave it as the default Git test. For version, we'll just leave it as 1.0.0, we can edit that that later. For description, this is a test directory to learn Git and Node. It doesn't matter, type some description there. Then entry point, I would 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 a index.html based folder, so that's why I just type in index.html. Test command nothing. Git repository, if we had already set up the Git repository in the previous exercise, it'll 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 repository. Some keywords for your project which I'm going to leave blank. Author, type your name. Let's be narcissistic. License and then it will show you the configuration of the package.json file in JSON format. So if you are familiar with JSON, does It look very very familiar to you. So, if those looks all good, let's just say okay. Then that results in the creation of the package.json file. Now, if you list the folder contents, you will see the package.json file in the folder contents. Open that 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. 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 the serve up this folder, then it will be a website and you can view the index.html in a browser. 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. This is a very good Node package that is very useful for this purpose. 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. 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. To do that, you're going to type in minus minus save dev. Now, the save dev option specifies that this lite-server is used for development dependency for our project. If you are installing a Node module on which your project is directly dependent on, then you would install it by simply saying minus minus save option. So, let's go ahead and install it. 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'll immediately notice that there is a folder there created named node underscore modules. Now, if you're going to the node underscore module, you will see a whole bunch of other sub folders in there which contain node modules which are necessary for the lite-server 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 subfolders there. Normally, you don't need to be venturing into the node modules folder. They just exist there because they are needed for the lite-server. So, as you browse through, you should notice a folder named lite-server here. Then 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 this folder comprises the lite-server node module, but those 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 will 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 these will not be more than a few tens of megabytes. So, it is not going to fill up your directory with 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 always go down to this GitHub site where the lite-server is hosted, 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 the additional resources are part of this lesson. Once you have completed that, then head over to the editor where you have the 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. So, and then it specifies the lite-server, and also notice it says at 2.2.2. So which means that this particular project depends upon lite-server that is at least version 2.2.2 or higher. 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. They would only be storing information of all the files that we have created. The node modules folder can always be recreated by typing NPM 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 that we are at package.json file, let's make a couple of edits so that they will be able to make use of the lite-server to serve up their content. So, right here in in this option called scripts, let's add in one more here, so we will say start. So start is a command that NPM supports which enables you to specify a bunch of things that will be started. So later on, we will see how we make use of this. So here, I'm going to say NPM run lite. 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, add the prompt. If I type NPM start, now you'll 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 specified that as NPM run lite, and the 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'll serve up the contents of this folder. Now, how do you access the contents of this folder? If you want to access locally, you will access it by specifying the URL as localhost:3000. This was 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. So, here, you can see that this is the contents of this. Then, now, let me add one more paragraph and save the changes. You would immediately notice that the changes 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'll be very appropriate for you to be able to see the changes immediately. So, when you make a change and then 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 are doing development of your project. That is the reason why I introduced you to the light 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, checking again, we will see that we already have three commits in our Git repository and those Git repositories already mirrored 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 NPM install 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 node 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? To do that, we will set up a file named.Gitignore. 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 file with exactly that name, .gitignore. So, let's create this file called .gitignore, and the first line of that file, we will type as node modules. What this means is that the node modules folder is going to be excluded from our Git commit. Once I create the.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 commits. Let's do 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 dot, and then do a Git status, and then you'll see that all these new files have been checked in into your commit. Let's do a Git commit, Git commit -m "forth 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 and.Gitignore would have been checked in into your Git repository. Going to my Bitbucket repository for the Git Test, 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. In this exercise, we have learned how to set up a package.json file using LPM in it, we have learned how to install an NPM module, and we have learnt how to use the light 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 web contents, your web application or your web site, so that you can see changes in real-time being reflected to your browser window. Then, we also saw how we can set up the .gitignore, so that some folders can be excluded from being checked in into our Git repository. This completes this exercise. So, with this, I'm sure you could 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.
