Exercise (Video): Basics of Node.js and NPM

Loading...

En provenance du cours de The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

5 notes

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

5 notes

Cours 3 sur 4 dans Specialization Full-Stack Web Development with React

This course focuses on developing truly cross-platform, native iOS and Android apps using React Native (Ver 0.55) and the Expo SDK (Ver. 27.0.0). React Native uses modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with React Native UI and layout support and access the native mobile platform's capabilities from Javascript using the Expo SDK. You should have already completed the Bootstrap 4 and the React courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your React and Javascript skills, (c) Use various features of React Native and the Expo SDK to build truly cross-platform mobile applications, and (d) Use Redux to design the architecture for a React-Redux application

À partir de la leçon

Multiplatform Mobile App Development with React Native: An Introduction

This module introduces you to hybrid mobile application development. You will learn about React Native and explore some of the features of React Native to implement a mobile app based on the React application that was implemented in the previous course on React.

Exercise (Video): Setting up Git6:48

Exercise (Video): Basic Git Commands18:37

Exercise (Video): Online Git Repositories12:19

Node.js and NPM3:56

Exercise (Video): Setting up Node.js and NPM2:24

Exercise (Video): Basics of Node.js and NPM23:13

Rencontrer les enseignants

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

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.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2018 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play