WEBVTT

1
00:00:00.240 --> 00:00:01.660
Hi and welcome back.

2
00:00:01.680 --> 00:00:03.460
In this lesson, we'll be discussing how

3
00:00:03.490 --> 00:00:09.010
Node JS and Express JS are used together
to build mobile application servers.

4
00:00:09.040 --> 00:00:14.580
Node JS is a JavaScript runtime built
on Chrome's V eight JavaScript engine,

5
00:00:14.610 --> 00:00:20.200
while Express JS is a popular framework
built on top of Node JS that provides

6
00:00:20.220 --> 00:00:23.980
a set of features for building
web and mobile applications.

7
00:00:24.010 --> 00:00:28.860
So now let's talk about why Node JS
and Express JS are used together.

8
00:00:28.890 --> 00:00:31.420
Node JS and Express JS are often used

9
00:00:31.450 --> 00:00:36.060
together to build scalable, high
performance mobile application servers.

10
00:00:36.090 --> 00:00:40.020
Node JS provides the foundation
for serverside JavaScript code,

11
00:00:40.050 --> 00:00:45.300
while Express JS provides a powerful set
of tools and features for building web

12
00:00:45.330 --> 00:00:50.420
and mobile applications
and APIs on top of Node JS.

13
00:00:50.450 --> 00:00:53.060
One of the main benefits of using Node JS

14
00:00:53.090 --> 00:00:55.589
and Express JS together is the ability

15
00:00:55.789 --> 00:00:58.220
to write server side code in JavaScript,

16
00:00:58.250 --> 00:01:00.509
which is the same language used

17
00:01:00.709 --> 00:01:03.100
for our client side mobile application.

18
00:01:03.130 --> 00:01:05.806
This makes it easier for us to create full

19
00:01:06.006 --> 00:01:08.290
stack mobile application without having

20
00:01:08.320 --> 00:01:10.204
to switch between different

21
00:01:10.404 --> 00:01:11.740
programming languages.

22
00:01:11.770 --> 00:01:14.050
Express JS also provides a simple

23
00:01:14.080 --> 00:01:18.930
and intuitive API for building
mobile application servers and APIs.

24
00:01:18.960 --> 00:01:23.060
It has a vast library of middleware
available through NPM,

25
00:01:23.090 --> 00:01:26.980
making it easy to extend
the functionality of our applications.

26
00:01:27.010 --> 00:01:32.850
Express JS also provides a way to organize
our code using routes and controllers,

27
00:01:32.880 --> 00:01:36.100
which makes it easy to maintain
and debug our code.

28
00:01:36.130 --> 00:01:38.600
But right now, we don't want to talk too

29
00:01:38.630 --> 00:01:42.780
much about all of the fancy
functionalities that Express has.

30
00:01:42.810 --> 00:01:44.930
Let's just start using Express and node

31
00:01:44.960 --> 00:01:50.850
together and then we're going to create
a very simple server to show you how you

32
00:01:50.880 --> 00:01:55.180
can run a server on your local
development environment.

33
00:01:55.210 --> 00:01:56.980
So the first things first,

34
00:01:57.010 --> 00:02:02.240
what we're going to have to do is create
some kind of a directory in which we're

35
00:02:02.270 --> 00:02:05.660
going to be able to add
files for our servers.

36
00:02:05.690 --> 00:02:08.610
I created lesson one
inside desktop servers.

37
00:02:08.640 --> 00:02:11.940
Lesson one, you can call
it whatever you'd like.

38
00:02:11.970 --> 00:02:13.170
And once you do that,

39
00:02:13.200 --> 00:02:21.040
just open a terminal inside your folder
and run NPM install Express,

40
00:02:22.520 --> 00:02:26.640
wait for this to complete and you're going
to get the node modules and you're going

41
00:02:26.670 --> 00:02:32.340
to get a package JSON where the only
thing that you're going to see is Express.

42
00:02:32.370 --> 00:02:37.380
Now, once we have this, we're going
to have to create a server file.

43
00:02:37.410 --> 00:02:41.140
So let's create Server JS.

44
00:02:41.170 --> 00:02:42.890
You can call it whatever you want.

45
00:02:42.920 --> 00:02:48.140
You can call it your name JS,
or I could call it nata JS.

46
00:02:48.170 --> 00:02:49.540
It doesn't really matter.

47
00:02:49.570 --> 00:02:52.860
So you're free to use
whatever name you want.

48
00:02:52.890 --> 00:02:58.220
And the first thing that we're
going to do here is use Express.

49
00:02:58.250 --> 00:03:05.060
So let's create constant for Express
and say that we are requiring Express.

50
00:03:05.090 --> 00:03:08.500
Since we have it installed,
it's going to be available for our use.

51
00:03:08.530 --> 00:03:11.380
And then we want to create our application

52
00:03:11.410 --> 00:03:15.860
that is going to use all
the functionalities of Express.

53
00:03:15.890 --> 00:03:20.180
So I'm just going to save this and then
we're going to be starting to create

54
00:03:20.210 --> 00:03:24.140
a simple server with node
JS and express JS.

55
00:03:24.170 --> 00:03:30.140
So
now what we're going to do is add a route

56
00:03:30.170 --> 00:03:35.700
to our application
that is just going to use a get method

57
00:03:35.730 --> 00:03:40.460
on the app object
passing in a route path and a callback

58
00:03:40.490 --> 00:03:44.700
function to handle incoming requests
and sending back the responses.

59
00:03:44.730 --> 00:03:45.980
And this is very simple.

60
00:03:46.010 --> 00:03:49.420
All we need to do is say app, get

61
00:03:49.450 --> 00:03:54.980
the path of our routes,
let's make it the route and then we're

62
00:03:55.010 --> 00:04:04.520
going to have a callback function created
here with request and response arguments.

63
00:04:04.600 --> 00:04:10.500
And then all we're going to do is use
the response argument to send back

64
00:04:10.530 --> 00:04:15.780
data from our server that is
going to say hello world.

65
00:04:15.800 --> 00:04:19.740
Great.
So this is our basic setup for a route

66
00:04:19.770 --> 00:04:25.820
that is going to use a get method
to get back a response from the server.

67
00:04:25.840 --> 00:04:34.260
Now let's get into creating
a listener method on the app object.

68
00:04:34.280 --> 00:04:37.540
For this we're going to need
something called ports.

69
00:04:37.570 --> 00:04:41.300
And I want to explain
what a port is to you.

70
00:04:41.330 --> 00:04:43.700
In computer networking,

71
00:04:43.720 --> 00:04:50.900
a port is a virtual endpoint through which
a client can communicate with a server.

72
00:04:50.920 --> 00:04:53.380
And client here is going to be our mobile

73
00:04:53.410 --> 00:04:58.580
application and server is what we're
currently setting up and a port number is

74
00:04:58.600 --> 00:05:04.860
used to identify each endpoint through
which we can communicate to the server.

75
00:05:04.890 --> 00:05:09.780
For example, web servers
typically listen on port 80.

76
00:05:09.800 --> 00:05:13.100
Our Metro bundler, for example,

77
00:05:13.130 --> 00:05:19.260
listens on port 80 81 when we're
developing mobile applications.

78
00:05:19.280 --> 00:05:23.180
So when you create a server using node JS
and express JS,

79
00:05:23.210 --> 00:05:29.580
you need to specify which port your server
will listen to for incoming requests.

80
00:05:29.600 --> 00:05:34.780
And this is done using the listen method
on the express JS application object.

81
00:05:34.800 --> 00:05:37.180
So what we're going to do is say

82
00:05:37.210 --> 00:05:43.540
that we're listening to the port
number that we're going to define.

83
00:05:43.570 --> 00:05:44.700
It can be any number.

84
00:05:44.730 --> 00:05:49.160
Okay, so let's make it 3000 because

85
00:05:49.400 --> 00:05:54.460
this is used a lot in the examples
of ports and node JS.

86
00:05:54.480 --> 00:05:58.700
And then once we start listening to this
port, whenever we get connected,

87
00:05:58.730 --> 00:06:02.920
we want to console log

88
00:06:03.440 --> 00:06:11.260
server is running on port port.

89
00:06:11.290 --> 00:06:12.300
Great.

90
00:06:12.330 --> 00:06:17.060
So in this example, the server will listen
for incoming requests on port 3000

91
00:06:17.090 --> 00:06:21.020
and when a client makes a request
to the server, the request will be sent

92
00:06:21.040 --> 00:06:25.980
to this port and the server will process
this request and send back a response.

93
00:06:26.010 --> 00:06:28.900
So why do we need to specify a port?

94
00:06:28.920 --> 00:06:30.940
Simply put, a server needs to know

95
00:06:30.970 --> 00:06:34.740
which port to listen to in order
to receive incoming requests.

96
00:06:34.770 --> 00:06:36.500
If you don't specify a port,

97
00:06:36.530 --> 00:06:41.140
the server won't know where to listen
and you won't be able to connect to it.

98
00:06:41.170 --> 00:06:44.980
By specifying a port number,
you're telling the server where to listen

99
00:06:45.010 --> 00:06:50.700
to so that clients can connect to it
and communicate with it over the network.

100
00:06:50.730 --> 00:06:55.600
Okay, great.
So now we have a very basic setup and all

101
00:06:55.630 --> 00:07:02.860
we need to do to run this server on our
local environment is do the following.

102
00:07:02.890 --> 00:07:05.120
Go to the root of your folder where you

103
00:07:05.150 --> 00:07:11.340
have Server JS created and then
just run Node server JS.

104
00:07:11.360 --> 00:07:13.540
And you should have Node installed already

105
00:07:13.570 --> 00:07:16.500
because we needed it for react
native development as well.

106
00:07:16.530 --> 00:07:21.620
So you'll definitely have access
to node on your computer.

107
00:07:21.650 --> 00:07:26.500
So just running and we're going to see
that server is running on port 3000.

108
00:07:26.530 --> 00:07:31.860
However, we don't really see this
response appearing anywhere.

109
00:07:31.890 --> 00:07:37.680
And if you really want to see that,
all you need to do is go to your browser

110
00:07:38.680 --> 00:07:47.140
and then just open up localhost
and make it listen to 3000.

111
00:07:47.170 --> 00:07:50.340
Okay?
And you're going to see hello, world.

112
00:07:50.360 --> 00:07:53.500
Now, you wouldn't see this message popped

113
00:07:53.530 --> 00:07:59.260
up if you were to go here
and change the route to your name.

114
00:07:59.290 --> 00:08:02.060
For example, I'm going to write Nata here.

115
00:08:02.090 --> 00:08:06.540
Let's go back actually because
we don't have Nodemon running.

116
00:08:06.570 --> 00:08:11.180
I'm going to have to stop my server
and rerun it to see the changes.

117
00:08:11.210 --> 00:08:15.180
But we can fix that in
the upcoming lectures.

118
00:08:15.200 --> 00:08:17.780
I'm going to introduce something
more interesting to you.

119
00:08:17.800 --> 00:08:19.300
So let's refresh this.

120
00:08:19.330 --> 00:08:21.860
And now it says cannot get this route

121
00:08:21.880 --> 00:08:23.740
because we don't have
anything set up here.

122
00:08:23.770 --> 00:08:25.900
But if I'm just going to type in Nata,

123
00:08:25.920 --> 00:08:30.340
I'm going to see Hello World
response from our server.

124
00:08:30.360 --> 00:08:33.540
So this is how simple it is to set up

125
00:08:33.560 --> 00:08:38.140
a basic server on your computer
on your local environment.

126
00:08:38.170 --> 00:08:40.860
And we're going to get into more details

127
00:08:40.890 --> 00:08:44.180
and more complexities
in the upcoming lectures.

128
00:08:44.200 --> 00:08:45.620
Thanks so much for watching.

129
00:08:45.640 --> 00:08:46.640
See you in the next video.