1
00:00:02,280 --> 00:00:08,880
So let's dive into this deployment process, starting with a web application, a web site which has no server

2
00:00:08,880 --> 00:00:15,360
side code which is only powered by HTML, Javascript and CSS and which therefore needs a static host.

3
00:00:15,360 --> 00:00:21,030
Now we clearly wrote our code, we tested it throughout this course and if you're working on your own

4
00:00:21,030 --> 00:00:23,910
application, you of course also at some point tested it,

5
00:00:23,910 --> 00:00:26,750
now we need to optimize it and build it for production and

6
00:00:26,750 --> 00:00:29,400
then we can deploy the output.

7
00:00:29,400 --> 00:00:34,720
Here's this practice app we worked on and we wrote the code, we tested that,

8
00:00:34,800 --> 00:00:40,590
now regarding the optimization and producing the deployment output and so on, for that we've got webpack,

9
00:00:40,620 --> 00:00:46,620
we got our webpack configuration, both a production configuration and a development configuration for

10
00:00:46,620 --> 00:00:52,890
testing this, for bundling this and for production, for also optimizing this which webpack will do automatically

11
00:00:52,890 --> 00:00:55,050
if the mode is production.

12
00:00:55,050 --> 00:01:00,540
So here in package.json, we got this build prod script and now we can simply run this,

13
00:01:00,560 --> 00:01:03,310
we can run npm run build: prod

14
00:01:03,390 --> 00:01:11,010
and what this will give us is an output which we can ship to a web server to then host it there, to a static

15
00:01:11,070 --> 00:01:12,540
web server to be precise.

16
00:01:13,290 --> 00:01:19,830
So here, we got our dist folder and in the end we just need to take that entire dist folder content and

17
00:01:19,830 --> 00:01:20,810
deploy that.

18
00:01:20,850 --> 00:01:26,370
Now the only adjustment we specifically need to do here is our output, our Javascript files of course

19
00:01:26,370 --> 00:01:30,750
have this random hash in there and we should respect this in our imports.

20
00:01:30,750 --> 00:01:37,890
So on these Javascript files in the end, you can copy that file name and take the my-place file and replace

21
00:01:37,890 --> 00:01:46,140
this import here in assets index.html with this name here and do the same for share place.

22
00:01:46,140 --> 00:01:52,320
Now you can also set up more elaborate build workflows, where the HTML file is automatically adjusted

23
00:01:52,740 --> 00:01:57,810
but this requires advanced webpack knowledge and so on and therefore we'll take this manual approach

24
00:01:57,810 --> 00:01:58,940
here.

25
00:01:59,010 --> 00:02:06,750
Now once you did that, once you prepared these script imports in the two HTML files and you have your

26
00:02:07,260 --> 00:02:14,190
optimized script outputs here, you're ready to go and you're ready to upload it to a web server. We can

27
00:02:14,190 --> 00:02:19,830
ignore this warning here by the way, it basically warns us that our my-place output is pretty big,

28
00:02:19,860 --> 00:02:24,870
well that's the case because I'm importing the sanitize-HTML library there which is rather big,

29
00:02:24,870 --> 00:02:29,700
another reason for why you should do this on the server side and not on the client side by the way

30
00:02:29,910 --> 00:02:34,560
but we have it here for a good reason because in this app, we have no server side code, so we have to

31
00:02:34,560 --> 00:02:36,920
live with that.

32
00:02:36,960 --> 00:02:41,920
Now once we adjusted everything, we built everything, we're ready to ship this onto a static host.

33
00:02:41,910 --> 00:02:47,910
Now as I mentioned you could set up your own computer, connect it to the Internet, allow incoming requests

34
00:02:47,910 --> 00:02:50,390
as well and configure everything on your own,

35
00:02:50,400 --> 00:02:52,780
well this however is not easy to do.

36
00:02:52,800 --> 00:02:58,410
It's easy to do in a wrong and an insecure way so that your server could easily get compromised and even

37
00:02:58,410 --> 00:03:04,230
in that way, it still requires some network knowledge to set up such a computer and connect it to the Internet,

38
00:03:04,230 --> 00:03:09,120
therefore what you would typically do is you would go for paid hosting.

39
00:03:09,210 --> 00:03:14,260
You can search for a static web hosting for example and you'll find a couple of services, both in the

40
00:03:14,270 --> 00:03:20,280
advertisements as well as in the real search results which help you host a static web site, for example

41
00:03:20,340 --> 00:03:25,710
AWS, the Amazon Web Services have a service that makes that easy, the S3 service.

42
00:03:25,890 --> 00:03:27,300
There are other services as well

43
00:03:27,300 --> 00:03:33,210
and one service I like because it's really easy to get started with is Firebase hosting. Firebase is

44
00:03:33,210 --> 00:03:35,790
a Google service which offers more than just the hosting

45
00:03:36,060 --> 00:03:41,790
but here we just need the hosting so we can use that. You can click on that Firebase hosting search result

46
00:03:41,790 --> 00:03:47,120
here and it takes you to the Firebase documentation where you can learn more about Firebase, Firebase

47
00:03:47,160 --> 00:03:48,660
hosting and how to use it

48
00:03:48,720 --> 00:03:53,970
and of course here you can also learn more about the other Firebase services in case you should be interested.

49
00:03:53,970 --> 00:03:58,310
Now one important word about pricing, Firebase is free to get started with

50
00:03:58,320 --> 00:04:05,200
but it does have paid parts or paid services or certain usage limits after which it is no longer free

51
00:04:05,310 --> 00:04:09,290
and you can check the Firebase pricing pages to learn more about the pricing,

52
00:04:09,390 --> 00:04:14,040
you can get started for free without a credit card though and it will basically tell you when you need

53
00:04:14,040 --> 00:04:14,810
to upgrade

54
00:04:14,910 --> 00:04:18,990
but be aware that not everything is free there, of course you will have to pay for the more advanced

55
00:04:19,290 --> 00:04:23,250
services or more heavy usage but getting started is free.

56
00:04:23,250 --> 00:04:28,530
Now here, what we can do is we can simply click on get started here and we'll learn how we can get started

57
00:04:28,530 --> 00:04:35,160
with Firebase hosting and it all starts with installing the Firebase CLI for which you can click on

58
00:04:35,160 --> 00:04:41,670
this link here to be taken to a page where the installation is explained and you can simply download an installer

59
00:04:41,700 --> 00:04:48,030
here, an alternative to downloading an installer here is that you simply use npm for the installation

60
00:04:48,240 --> 00:04:51,780
and you run this command here on your machine anywhere.

61
00:04:51,780 --> 00:04:57,150
So here I'll run it in this built-in terminal but that really doesn't matter. On Linux and Mac, you might

62
00:04:57,150 --> 00:05:00,830
need to add sudo in front of this command to get the right permissions, on Windows

63
00:05:00,900 --> 00:05:02,400
this is not required.

64
00:05:02,400 --> 00:05:07,500
So after you hit enter, you might be prompted for a password and thereafter this Firebase package

65
00:05:07,500 --> 00:05:13,550
will be installed globally on your system and we'll need that package to then deploy our application.

66
00:05:13,590 --> 00:05:22,520
So let's wait for this to finish and once this is finished, we can run Firebase init here in our project

67
00:05:22,520 --> 00:05:23,020
folder,

68
00:05:23,030 --> 00:05:28,300
so make sure you navigate into your project folder or you use the built-in terminal in the Visual Studio

69
00:05:28,310 --> 00:05:35,570
Code which is automatically navigated into the project folder. Once you run init here, you might be prompted

70
00:05:35,600 --> 00:05:42,090
to log in first, so simply go back to Firebase and create an account there,

71
00:05:42,090 --> 00:05:46,990
you don't need to pay anything, it's free, just create an account or log in with your Google account

72
00:05:47,250 --> 00:05:52,750
and once you do have an account, log in here in the console by entering your email address and thereafter

73
00:05:52,860 --> 00:05:55,660
your password when you're being prompted for it.

74
00:05:55,860 --> 00:06:02,590
Once you did log in, you should see this menu here where you can choose from a variety of Firebase

75
00:06:02,600 --> 00:06:04,700
services and we need the hosting service,

76
00:06:04,740 --> 00:06:09,830
so navigate there and press space to select it and thereafter press enter.

77
00:06:09,870 --> 00:06:12,290
Now you can choose your option here and here

78
00:06:12,300 --> 00:06:14,210
I want to create a new project,

79
00:06:14,250 --> 00:06:20,490
this talks about Firebase projects which are created on Firebase servers and we don't have one yet

80
00:06:20,490 --> 00:06:21,800
and you can enter any name here,

81
00:06:21,840 --> 00:06:26,460
I'll name it js-static-hosting,

82
00:06:26,460 --> 00:06:28,720
you can choose any name you want here.

83
00:06:28,880 --> 00:06:33,090
Now this actually was the project ID, now you can choose a project name which can be the same though

84
00:06:33,120 --> 00:06:37,090
so I'll go with the default and just hit enter and not provide a different name

85
00:06:37,200 --> 00:06:42,570
and now this will set up this Google Cloud Platform, which behind the scenes powers Firebase project

86
00:06:43,020 --> 00:06:46,700
and make sure that this is all configured on Firebase servers.

87
00:06:46,710 --> 00:06:53,470
So let's wait for that to finish and once this finished, you're prompted to tell Firebase what your public

88
00:06:53,470 --> 00:06:54,230
directory is

89
00:06:54,260 --> 00:06:59,820
which in the end means which is the directory where your deployable files is seated and in my case that's not

90
00:06:59,820 --> 00:07:00,460
the default,

91
00:07:00,460 --> 00:07:01,850
a folder named public

92
00:07:01,900 --> 00:07:03,550
but instead it's this dist folder.

93
00:07:03,550 --> 00:07:09,040
So we should write this here to make it clear that the dist folder is the folder we wanted deploy.

94
00:07:09,730 --> 00:07:11,170
Now once you hit enter, you're asked

95
00:07:11,170 --> 00:07:16,440
if you want to configure this as a single page app, which means that anything the user enters in the URL

96
00:07:16,440 --> 00:07:21,480
is redirected to the root index.html file and here I don't want to do that,

97
00:07:21,490 --> 00:07:26,880
so I'll enter no here, an n because we have different folders with different HTML files,

98
00:07:26,890 --> 00:07:31,160
I don't want to redirect all requests to this top level index.html file.

99
00:07:31,300 --> 00:07:37,490
So enter n here and hit enter, you will also get a 404.html file now which is a default error

100
00:07:37,490 --> 00:07:42,900
page which you of course can customize in case the user enters an invalid URL and when you're

101
00:07:42,920 --> 00:07:47,090
asked if you want to override this index.html, you should choose no of course because we want to

102
00:07:47,090 --> 00:07:52,070
keep the existing index.html file in there and with that, we're done.

103
00:07:52,070 --> 00:07:59,600
Now you can run Firebase deploy here and it will go ahead and deploy this project which was just configured

104
00:07:59,870 --> 00:08:06,170
to Firebase servers, which means it uploads your files in the dist folder to Firebase servers and configures

105
00:08:06,170 --> 00:08:08,030
everything you need there and

106
00:08:08,060 --> 00:08:12,510
once this is done, it gives you the URL where where you can find your application.

107
00:08:12,530 --> 00:08:19,650
So now here if we enter a new tab, we can visit our application here, also check the console,

108
00:08:19,650 --> 00:08:22,770
the only error I'm getting there is the favicon which is not found and

109
00:08:22,770 --> 00:08:28,500
that's OK and now in here if I try to get my current location, I can allow this and check whether

110
00:08:28,500 --> 00:08:31,530
that works, whether I am being located here,

111
00:08:31,530 --> 00:08:40,460
yes that works. I can click share place and enter my shared place URL here to see this page.

112
00:08:41,030 --> 00:08:42,350
So this all works,

113
00:08:42,350 --> 00:08:44,160
this is our deployed project,

114
00:08:44,180 --> 00:08:50,300
our deployed static project I should say which only consists of HTML, Javascript and CSS files

115
00:08:50,660 --> 00:08:55,030
which we now deployed to Firebase and of course the exact deployment steps,

116
00:08:55,030 --> 00:08:59,990
for example the command line tool which we used here will differ from host to host,

117
00:08:59,990 --> 00:09:05,630
the general idea regarding the fact that you deploy everything in this dist folder and so on will always

118
00:09:05,630 --> 00:09:06,650
be the same though,

119
00:09:06,710 --> 00:09:09,440
so that's something which does not change.

120
00:09:09,470 --> 00:09:15,410
Also worth noting, in Firebase case you get a firebaserc and a firebase.json file which allows

121
00:09:15,410 --> 00:09:20,630
you to configure the exact hosting setup and you learned more about the available options there,

122
00:09:20,660 --> 00:09:24,140
of course in the official documentation in case you're interested.

123
00:09:24,290 --> 00:09:29,720
So check this documentation out if you plan on using Firebase, if you plan on using a different service

124
00:09:29,780 --> 00:09:30,950
which of course is fine too,

125
00:09:30,950 --> 00:09:32,530
there are many great services,

126
00:09:32,630 --> 00:09:38,600
check out this services documentation to learn about the exact steps you need to execute to get

127
00:09:38,600 --> 00:09:40,900
your code onto this services

128
00:09:40,910 --> 00:09:41,480
servers.