1
00:00:00,000 --> 00:00:04,686
[MUSIC]

2
00:00:04,686 --> 00:00:09,110
Last question that might arise in
your mind is how do I build and

3
00:00:09,110 --> 00:00:11,590
deploy the Angular application?

4
00:00:11,590 --> 00:00:15,787
If you recall,
in the earlier course on Bootstrap 4,

5
00:00:15,787 --> 00:00:19,801
we learned about how to use
the MPM scripts or grand or

6
00:00:19,801 --> 00:00:26,560
culp to build the distribution folder,
in order to build our web application.

7
00:00:26,560 --> 00:00:31,504
Now, with Angular application that we
have been developing in this course,

8
00:00:31,504 --> 00:00:33,797
we have the help of the Angular CLI.

9
00:00:33,797 --> 00:00:39,402
The Angular CLI provides a build command
that enables us to build our Angular

10
00:00:39,402 --> 00:00:45,010
application, build the distribution
folder and then have all the files for

11
00:00:45,010 --> 00:00:50,286
our Angular application compiled and
ready to deploy to a server site.

12
00:00:50,286 --> 00:00:53,497
So that is what we're going to
learn in this exercise.

13
00:00:55,477 --> 00:01:00,065
To go forward with building and
deploying our Angular application at

14
00:01:00,065 --> 00:01:04,969
the prompt type ng building -- because
we want to develop the production

15
00:01:04,969 --> 00:01:09,935
version of our Angular application
that can be deployed to a server.

16
00:01:09,935 --> 00:01:13,925
So to do that, at the prompt,
as I mentioned, type ng

17
00:01:15,045 --> 00:01:19,935
build --prod, and
then let the build process complete.

18
00:01:22,225 --> 00:01:26,755
This will take a little bit of time for
the build process to be completed.

19
00:01:26,755 --> 00:01:28,924
After the build process is complete,

20
00:01:28,924 --> 00:01:32,391
you will see that the distribution
folder will now be ready.

21
00:01:32,391 --> 00:01:35,860
Once the building process
completes successfully, so

22
00:01:35,860 --> 00:01:41,111
you can see that it's all green there, so
the distribution folder is now prepared.

23
00:01:41,111 --> 00:01:44,829
Now how do we deploy Angular application?

24
00:01:44,829 --> 00:01:50,789
Now in this case if we have a server where
you can deploy your web application,

25
00:01:50,789 --> 00:01:54,547
then it is just a matter
of copying the contents of

26
00:01:54,547 --> 00:01:58,420
the distribution folder
directly to the server.

27
00:01:58,420 --> 00:02:02,770
And then your Angular application
will be up and running in no time.

28
00:02:02,770 --> 00:02:06,842
Now, fortunately, we already have
our JSON server running there.

29
00:02:06,842 --> 00:02:09,411
So we're going to use our JSON server and

30
00:02:09,411 --> 00:02:14,468
the public folder of our JSON server,
so they will copy the entire contents

31
00:02:14,468 --> 00:02:19,057
of the distribution folder to
the public folder of our JSON server.

32
00:02:19,057 --> 00:02:23,317
Going to the conFusion folder,
where our application is stored,

33
00:02:23,317 --> 00:02:26,370
we'll move now into
the distribution folder.

34
00:02:26,370 --> 00:02:28,720
You'll see that the distribution
folder has been created.

35
00:02:28,720 --> 00:02:31,390
So you'll go into
the distribution folder and

36
00:02:31,390 --> 00:02:36,450
you'll see that a bunch of files have been
created by the Angular CLI build process.

37
00:02:38,015 --> 00:02:43,199
Let's just copy the entire
contents of this folder, and

38
00:02:43,199 --> 00:02:50,327
then we will go to the JSON server, which
is in the json-server folder here and

39
00:02:50,327 --> 00:02:54,760
go to public folder of
the json-server folder.

40
00:02:54,760 --> 00:02:59,597
And then we'll simply copy
the contents into this public folder.

41
00:02:59,597 --> 00:03:05,596
Now your Angular application should be
available at localhost:3000 because

42
00:03:05,596 --> 00:03:12,031
your JSON server will serve up whatever is
in the public folder at localhost:3000.

43
00:03:12,031 --> 00:03:18,886
Going to a browser, now in a new tab
I'll just type localhost:3000 and

44
00:03:18,886 --> 00:03:26,080
you will see that your Angular application
will now be up and running in no time.

45
00:03:26,080 --> 00:03:29,230
So this is how you would deploy
your Angular application.

46
00:03:29,230 --> 00:03:32,970
Now, of course, in this case, since
we have our server under our control,

47
00:03:32,970 --> 00:03:36,270
it's just a matter of copying
the files into the server side.

48
00:03:36,270 --> 00:03:42,030
Now, if you are going to be doing this
deployment on a real server in the Cloud,

49
00:03:42,030 --> 00:03:46,395
then you just need to follow
the directions that are given by

50
00:03:46,395 --> 00:03:51,056
the Cloud service provider in
order to step up the server side.

51
00:03:51,056 --> 00:03:56,982
So they might have a public folder that
might be supported on their cloud server.

52
00:03:56,982 --> 00:04:02,706
So in that case, you might simply
need to copy your distribution

53
00:04:02,706 --> 00:04:09,920
folder's contents to the public server
folder at your cloud service provider.

54
00:04:09,920 --> 00:04:14,204
Of course you also need to
ensure there is a back end

55
00:04:14,204 --> 00:04:17,982
server running that supports the REST API.

56
00:04:17,982 --> 00:04:21,266
In our case,
the JSON server is serving the purpose.

57
00:04:21,266 --> 00:04:25,719
When you complete the final
course in this specialization,

58
00:04:25,719 --> 00:04:30,434
where we deal with the server
side development using Node-JS,

59
00:04:30,434 --> 00:04:36,370
you will learn the procedure for
building your own custom REST API server.

60
00:04:36,370 --> 00:04:41,240
So in that case, then within the REST API
server there will be a public folder that

61
00:04:41,240 --> 00:04:43,870
will support it, and then you'd

62
00:04:43,870 --> 00:04:48,360
need to copy your Angular application to
the public folder on your server side.

63
00:04:49,490 --> 00:04:53,170
That is how you would deploy
your Angular application.

64
00:04:53,170 --> 00:04:55,860
With this, we complete this exercise.

65
00:04:55,860 --> 00:05:00,300
In this exercise we have learned
how to deploy our Angular

66
00:05:00,300 --> 00:05:02,341
application to a server.

67
00:05:02,341 --> 00:05:07,124
And how to make use of the Angular CLI
to build a production version of our

68
00:05:07,124 --> 00:05:11,352
Angular application before we
do the deployment of our Angular

69
00:05:11,352 --> 00:05:13,604
application to the server side.

70
00:05:13,604 --> 00:05:19,459
[MUSIC]