WEBVTT

1
00:00:00.710 --> 00:00:04.900
In this exercise we're going to make
use of the Express Generator to quickly
2
00:00:04.900 --> 00:00:07.800
scaffold out and express application.
3
00:00:07.800 --> 00:00:10.790
We'll replicate
the functionality that we did
4
00:00:10.790 --> 00:00:14.420
with the Express application
in the previous module.
5
00:00:14.420 --> 00:00:20.800
And support that REST API with
multiple application draws.
6
00:00:20.800 --> 00:00:24.487
So, this way you will learn how
to make use of the generator
7
00:00:24.487 --> 00:00:27.660
to quickly scaffold out
an Express application.
8
00:00:29.660 --> 00:00:34.000
The first thing that we need to
do to get started is to install
9
00:00:34.000 --> 00:00:39.170
the Express Generator as
a global npm package.
10
00:00:39.170 --> 00:00:42.971
So to do that at the command prompt,
11
00:00:42.971 --> 00:00:48.410
type npm install express-generator -g.
12
00:00:48.410 --> 00:00:53.361
So let's do that and then once it is
installed then we will scaffold out and
13

00:00:53.361 --> 00:00:55.500

Express application.
14
00:00:55.500 --> 00:00:59.220
So to do that,
we'll type at the command prompt,
15
00:01:12.897 --> 00:01:15.952
And then once it is installed, then,
16
00:01:15.952 --> 00:01:22.830
it's a very straightforward method to
scaffold out an Express application.
17
00:01:22.830 --> 00:01:26.600
At the command prompt,
at a convenient location on your computer,
18
00:01:26.600 --> 00:01:29.470
just type express and the name.
19
00:01:29.470 --> 00:01:31.990
In my case,
I'm going to call the application
20
00:01:31.990 --> 00:01:37.050
as node-express-gen
21
00:01:37.050 --> 00:01:41.050
continuing in the same format
that we have been labeling
22
00:01:41.050 --> 00:01:45.630
the folders that contain our
express applications earlier.
23
00:01:45.630 --> 00:01:47.840
So once we do that,
24
00:01:47.840 --> 00:01:51.720
Express generator will quickly
scaffold out the application for us.
25
00:01:51.720 --> 00:01:55.570
Let's go and
take a quick tour of the folder
26

00:01:55.570 --> 00:01:59.830

that was scaffolded out
by the Express Generator.
27
00:01:59.830 --> 00:02:03.850
When you go to the folder where you
scaffolded out the Express application,
28
00:02:03.850 --> 00:02:07.630
you'll find a folder
named node-express-gen.
29
00:02:07.630 --> 00:02:12.420
Just going into that folder,
you will see that a set of
30
00:02:12.420 --> 00:02:16.260
folders and files have already
been scaffolded out there.
31
00:02:16.260 --> 00:02:22.280
In particular, pay attention to app.js and
package.json there.
32
00:02:22.280 --> 00:02:25.170
Let's open this folder in brackets, and
33
00:02:25.170 --> 00:02:29.820
then have a look at the contents
of some of these files.
34
00:02:31.110 --> 00:02:38.630
Now, I have the package.json file in
the node-express-gen folder here.
35
00:02:38.630 --> 00:02:41.290
It shows that the dependencies
36
00:02:41.290 --> 00:02:46.420
that are going to be used by this
Express application, which means that
37
00:02:46.420 --> 00:02:51.250
I need to do an npm install in order
to install all these dependencies.
38
00:02:51.250 --> 00:02:54.950
We'll do that right after we examine

the contents of this folder.

39
00:02:56.410 --> 00:03:00.664
Then after,
having a look at the app.js file,
40
00:03:00.664 --> 00:03:05.585
you would notice that, this looks
like a typical Express application.
41
00:03:05.585 --> 00:03:10.655
So you see the usage of require express,
42
00:03:10.655 --> 00:03:15.507
and require for
many other node modules there.
43
00:03:15.507 --> 00:03:20.497
In particular, we are already
familiar with path, morgan and
44
00:03:20.497 --> 00:03:23.377
body parser that we have used all year.
45
00:03:23.377 --> 00:03:28.960
Two other ones that are being used there
is serve-favicon and cookie-parser.
46
00:03:28.960 --> 00:03:33.740
We'll look at those in more detail
in one of the later exercises.
47
00:03:33.740 --> 00:03:40.600
Also note the use of var routes require.
48
00:03:40.600 --> 00:03:45.940
And so
here we are requiring the file based
49
00:03:45.940 --> 00:03:51.000
node module that exists in the routes
folder and similarly var users.
50
00:03:51.000 --> 00:03:55.600
So our expectation would be
that the index store js file in
51

00:03:55.600 --> 00:04:00.620

the route folder implements something
corresponding to handling of the routes.
52
00:04:00.620 --> 00:04:07.620
And the users store js file should
be handling the user's information.
53
00:04:07.620 --> 00:04:11.520
So obviously, if you need to add
additional routers to this Express
54
00:04:11.520 --> 00:04:18.620
application, you would be putting
the files into the routes folder path.
55
00:04:18.620 --> 00:04:21.600
Thereafter, browsing
through the application,
56
00:04:21.600 --> 00:04:27.508
you would notice that there is
a view engine set up there.
57
00:04:27.508 --> 00:04:33.240
Now Express supports template
engines to be used for
58
00:04:34.420 --> 00:04:41.450
automatic generation of HTML templates
from an appropriate templating language.
59
00:04:42.950 --> 00:04:49.780
Express in particular, supports Jade,
Handlebars, Mustache, and EJS.
60
00:04:49.780 --> 00:04:58.790
These are templating engines
where you can describe a html
61
00:04:58.790 --> 00:05:03.740
file in a format used by
the particular engine, and
62
00:05:03.740 --> 00:05:07.230
automatically generate
the cross corresponding HTML.
63

00:05:07.230 --> 00:05:11.220

We will not be using this particular
functionality in this course, but
64
00:05:11.220 --> 00:05:16.260
in case you're interested in
templating engines It would be a good
65
00:05:16.260 --> 00:05:18.870
side trip for you to think about for.
66
00:05:20.130 --> 00:05:24.440
In our corse we have already scaffolded
out our applications in the form of
67
00:05:24.440 --> 00:05:27.400
Angular, applications
are Ionic applications, so
68
00:05:27.400 --> 00:05:33.480
we don't have a specific reason for
using the templating engines explicitly.
69
00:05:35.330 --> 00:05:43.240
Then after, you'll see a bunch
of app use statements there.
70
00:05:43.240 --> 00:05:47.220
So each of them is describing the middle
way of how it's going to be used.
71
00:05:47.220 --> 00:05:54.510
We are going to first apply the logger,
or the morgan module.
72
00:05:54.510 --> 00:05:57.871
Thereafter, we are applying
the bodyparser the JSON.
73
00:05:57.871 --> 00:06:01.540
Then we are applying
the bodyparser .urlencoded.
74
00:06:01.540 --> 00:06:03.440
Then the cookieparser.
75
00:06:03.440 --> 00:06:06.702
And then note the use of express.static.

76
00:06:06.702 --> 00:06:11.840
This express.static,
we have seen already in
77
00:06:11.840 --> 00:06:18.010
the previous module for
serving up static data.
78
00:06:18.010 --> 00:06:21.770
Also note the use of
path.join method there.
79
00:06:21.770 --> 00:06:26.910
So join is one of the path
methods that joins dirname with
80
00:06:26.910 --> 00:06:32.120
the public folder to create
the entire path from which
81
00:06:32.120 --> 00:06:38.310
the folder which contains
those static files.
82
00:06:38.310 --> 00:06:43.030
So this will end up generating,
referring to the /public folder that is
83
00:06:43.030 --> 00:06:47.720
part of this Express
application folder thing.
84
00:06:47.720 --> 00:06:51.740
Also note how we declare app.use/routes,
85
00:06:51.740 --> 00:06:56.921
meaning that any request to
the URL that ends with a slash,
86
00:06:56.921 --> 00:07:01.279
and the beginning will be
handled by the routes.
87
00:07:04.530 --> 00:07:09.602
File in there, meaning that
when you specify routes there,

88
00:07:09.602 --> 009:16.900 --> 00:19:21.580
I'm going to copy the AboutUs.html
in the index.html file from there.
246
00:19:22.800 --> 00:19:28.784
And then copy them to that node
express gems public folder.
247
00:19:28.784 --> 00:19:32.235
So I'm going to copy those two in here.
248
00:19:32.235 --> 00:19:36.935
So which means that if I issue
a requestor index these two
249
00:19:36.935 --> 00:19:41.699
should be served by this
express gem router also.
250
00:19:43.890 --> 00:19:44.820
Now.
251
00:19:44.820 --> 00:19:50.210
Now that we have completed that part,
we need to fix up the app .js file so
252
00:19:50.210 --> 00:19:57.330
that it uses the three new routers,
routers that we have developed.
253
00:19:57.330 --> 00:20:01.478
And then be able to handle those requests,
254
00:20:01.478 --> 00:20:08.230
the rest API-based requests
to those particular URIs.
255
00:20:08.230 --> 00:20:12.538
So /dishes/dishes/dishID or
256
00:20:12.538 --> 00:20:16.370
/ Promotions and slash leadership also.
257
00:20:16.370 --> 00:20:21.020
So to do that,
of course we need to fix the app.js file.

258
00:20:21.020 --> 00:20:24.170
So let's go ahead and
fix up the app.js file.
259
00:20:25.990 --> 00:20:30.625
Going to the app.js file,
I'm going to now require the remaining
260
00:20:30.625 --> 00:20:35.590
three Routes that I have
just included there.
261
00:20:35.590 --> 00:20:37.530
So I would say var,
262
00:20:42.335 --> 00:20:45.692
DishRouter.
263
00:20:45.692 --> 00:20:48.005
That is what we use there.
264
00:20:48.005 --> 00:20:51.959
So we'll say require
265
00:20:51.959 --> 00:20:57.235
./routes/ dishRouter.
266
00:21:01.155 --> 00:21:01.770
Similarly.
267
00:21:07.471 --> 00:21:08.608
Routes.
268
00:21:11.998 --> 00:21:17.238
PromoRouter, you should have implemented
this as part of your first assignment.
269
00:21:17.238 --> 00:21:26.746
Similarly Dot,
270
00:21:26.746 --> 00:21:30.496
slash, dot, slash.
271
00:21:34.826 --> 00:21:39.664
So after this we now need to mount

272
00:21:39.664 --> 00:21:44.503
these at the appropriate URLs so
273
00:21:44.503 --> 00:21:50.460
that these three routers can be used.
274
00:21:50.460 --> 00:21:55.150
So to do that we'll just browse
down to where we use this app.
275
00:21:55.150 --> 00:21:55.960
Use.
276
00:21:55.960 --> 00:22:00.257
So I'm going to mount them as app.use,
277
00:22:04.001 --> 00:22:06.138
Dishes.
278
00:22:06.138 --> 00:22:09.608
That's where the dish
router takes care of it.
279
00:22:18.744 --> 00:22:20.323
Promotions.
280
00:22:22.820 --> 00:22:25.002
PromoRouter takes care of that.
281
00:22:25.002 --> 00:22:33.883
And then Leadership should be handled by
282
00:22:36.517 --> 00:22:39.249
LeaderRouter.
283
00:22:39.249 --> 00:22:40.867
That's it.
284
00:22:40.867 --> 00:22:46.980
Our express generated application should
now be able to handle all those requests.
285
00:22:46.980 --> 00:22:48.580
Just like before.
286

00:22:48.580 --> 00:22:51.085

Let's go and
check this out using postmail.
287
00:22:52.940 --> 00:22:56.850
You may wish to restart
your Express router.
288
00:22:56.850 --> 00:23:01.575
To do that, go to the terminal
289
00:23:01.575 --> 00:23:07.140
vendor and then do npm start
290
00:23:07.140 --> 00:23:12.970
one more time to restart
your server crash.
291
00:23:12.970 --> 00:23:18.890
So once the servers is up and
running, then we will use
292
00:23:18.890 --> 00:23:24.960
the post men to send the request and
see the reply from this route.
293
00:23:24.960 --> 00:23:28.970
So again if you send the get
request to local host 3000,
294
00:23:28.970 --> 00:23:33.950
you will see that the index.html
File has been returned.
295
00:23:35.110 --> 00:23:40.850
And again, let us send the request
about us start.html and
296
00:23:40.850 --> 00:23:44.100
then you should the about
us.html file being returned.
297
00:23:44.100 --> 00:23:48.610
So these two files were put
into the public folder.
298
00:23:48.610 --> 00:23:51.220
And you can see that the static extra

299
00:23:54.050 --> 00:23:58.070
servers are able to serve
up the starting resources.
300
00:23:58.070 --> 00:24:04.750
Now let's start sending requests
to local host 3000 dishes,
301
00:24:04.750 --> 00:24:09.770
and then it says we'll send
all the dishes to you.
302
00:24:09.770 --> 00:24:17.200
We'll say post to localhost:3000/dishes
and then send the request.
303
00:24:17.200 --> 00:24:21.680
And then you notice that it is
sending back saying we'll add
304
00:24:21.680 --> 00:24:25.450
the dish:newDish with details:
some detailed description.
305
00:24:25.450 --> 00:24:30.809
Let's do a delete and
then it should send deleting all dishes.
306
00:24:31.890 --> 00:24:38.380
Let's do a delete on dishes/2.
307
00:24:38.380 --> 00:24:41.380
Which is deleting dish 2.
308
00:24:41.380 --> 00:24:45.640
Let's do a put 2 dishes/2.
309
00:24:45.640 --> 00:24:50.630
And then it should, see,
updating dish 2 just like before.
310
00:24:50.630 --> 00:24:55.370
So all this part is
working just like before.
311
00:24:55.370 --> 00:25:00.030

Let's now send a request to promotions and

312
00:25:00.030 --> 00:25:03.910
you will see that it is
updating the promotions.
313
00:25:07.230 --> 00:25:09.470
And specific promotions.
314
00:25:09.470 --> 00:25:13.890
You can do leadership similarly and so on.
315
00:25:13.890 --> 00:25:19.270
So all the previous features of
316
00:25:19.270 --> 00:25:25.230
our Express router is also
supported by the new router here.
317
00:25:25.230 --> 00:25:32.180
Taking a look at the console,
you can see that logger margin,
318
00:25:32.180 --> 00:25:38.490
the output that is generated on
the console is very much similar
319
00:25:38.490 --> 00:25:43.279
to what we have seen with the express
application in the previous module.
320
00:25:44.680 --> 00:25:46.810
This completes this exercise.
321
00:25:46.810 --> 00:25:51.600
In this exercise we used Express
generator and then we were able to
322
00:25:52.760 --> 00:25:59.570
design the same Express application that
we did by hand in the previous module.