1
00:00:02,040 --> 00:00:03,950
Now, for this course section,

2
00:00:03,950 --> 00:00:07,550
I prepared two example websites here.

3
00:00:07,550 --> 00:00:08,960
Two example websites,

4
00:00:08,960 --> 00:00:11,900
which on first sight look very similar,

5
00:00:11,900 --> 00:00:15,460
but which turned out to be quite different.

6
00:00:15,460 --> 00:00:17,540
Now, I also wanna note that of course,

7
00:00:17,540 --> 00:00:19,720
we built this big online shop.

8
00:00:19,720 --> 00:00:22,720
And I'm just not using that here for deployment.

9
00:00:22,720 --> 00:00:25,300
Because these examples which I prepared

10
00:00:25,300 --> 00:00:27,690
cover basically all the key concepts

11
00:00:27,690 --> 00:00:29,370
that we also had in the shop,

12
00:00:29,370 --> 00:00:32,150
but they are a bit easier to digest.

13
00:00:32,150 --> 00:00:35,330
What you learn here will also help you with deploying

14
00:00:35,330 --> 00:00:37,410
any kind of website though.

15
00:00:37,410 --> 00:00:40,140
Though I'll also will say that you should always

16
00:00:40,140 --> 00:00:43,390
also check out the documentation of the hosting provider

17
00:00:43,390 --> 00:00:46,940
you chose because, of course, concrete deployment steps

18
00:00:46,940 --> 00:00:50,300
will always differ between hosting providers.

19
00:00:50,300 --> 00:00:53,750
And depending on which kind of services they offer,

20
00:00:53,750 --> 00:00:56,720
certain things might be easier or more difficult,

21
00:00:56,720 --> 00:00:59,330
depending on which provider you chose.

22
00:00:59,330 --> 00:01:01,680
But we'll get back to that later.

23
00:01:01,680 --> 00:01:03,510
Here are the two example apps.

24
00:01:03,510 --> 00:01:07,440
And the difference here is that one of the two apps

25
00:01:07,440 --> 00:01:10,150
or websites is a static website.

26
00:01:10,150 --> 00:01:13,240
Whereas the other one is a dynamic website.

27
00:01:13,240 --> 00:01:14,660
And the difference really

28
00:01:14,660 --> 00:01:18,620
just is this liking feature here, which I added.

29
00:01:18,620 --> 00:01:19,453
Where on one website,

30
00:01:19,453 --> 00:01:21,610
you have this button, which you can press.

31
00:01:21,610 --> 00:01:24,120
And then we'll have a like counter go up here

32
00:01:24,120 --> 00:01:26,800
as soon as we do that, which we will do soon.

33
00:01:26,800 --> 00:01:28,720
On the other website, you don't have that.

34
00:01:28,720 --> 00:01:32,220
And therefore, this first website is fully static.

35
00:01:32,220 --> 00:01:34,020
There's nothing special on it.

36
00:01:34,020 --> 00:01:36,470
It's just a bunch of frontend code

37
00:01:36,470 --> 00:01:38,660
that's presented in the browser.

38
00:01:38,660 --> 00:01:40,020
Whereas on the other website,

39
00:01:40,020 --> 00:01:43,060
we actually have a database that stores the likes.

40
00:01:43,060 --> 00:01:47,560
And we will dynamically update the like number here soon.

41
00:01:47,560 --> 00:01:49,460
Now, you'll find the code attached.

42
00:01:49,460 --> 00:01:51,750
To be precise, you'll find a ZIP file

43
00:01:51,750 --> 00:01:53,800
with the two subfolders here,

44
00:01:53,800 --> 00:01:56,170
a static site and the dynamic site.

45
00:01:56,170 --> 00:01:59,140
And you can browse through the code on your own

46
00:01:59,140 --> 00:02:01,860
because there's really nothing fancy in there.

47
00:02:01,860 --> 00:02:05,680
Just an image, a bunch of CSS code with features

48
00:02:05,680 --> 00:02:08,220
you'll learn about, throughout this course.

49
00:02:08,220 --> 00:02:10,770
And then a little bit of HTML markup,

50
00:02:10,770 --> 00:02:14,880
which also doesn't contain any fancy new features.

51
00:02:14,880 --> 00:02:18,070
Just a little bit of Google Fonts being added here,

52
00:02:18,070 --> 00:02:21,710
our own styles imported, a header, a main section;

53
00:02:21,710 --> 00:02:24,933
some paragraphs, an unordered list, things like that.

54
00:02:26,250 --> 00:02:28,830
By the way, here, we also got a link, which leads nowhere.

55
00:02:28,830 --> 00:02:31,290
If you want to, you can of course plug in

56
00:02:31,290 --> 00:02:32,980
the link to the course you took,

57
00:02:32,980 --> 00:02:35,610
to this web development course on your own here.

58
00:02:35,610 --> 00:02:38,920
If you are an affiliate, you can even use an affiliate link

59
00:02:38,920 --> 00:02:41,290
because we will later deploy these websites.

60
00:02:41,290 --> 00:02:44,310
And you could then, of course, share that with others,

61
00:02:44,310 --> 00:02:46,320
but that's just something you can do,

62
00:02:46,320 --> 00:02:47,683
nothing you have to do.

63
00:02:48,730 --> 00:02:50,470
Now, this is the static site here.

64
00:02:50,470 --> 00:02:54,630
It's really just HTML, CSS, an image.

65
00:02:54,630 --> 00:02:58,420
And in this case, not even some JavaScript code.

66
00:02:58,420 --> 00:03:02,000
Though, we could have some frontend JavaScript code.

67
00:03:02,000 --> 00:03:04,293
And that wouldn't make any differences.

68
00:03:05,760 --> 00:03:10,040
Now, for that dynamic site here, it's a bit differently.

69
00:03:10,040 --> 00:03:13,560
Here, we have the MVC pattern with controllers,

70
00:03:13,560 --> 00:03:15,390
models, and views.

71
00:03:15,390 --> 00:03:16,750
I have routes.

72
00:03:16,750 --> 00:03:20,560
I have the data folder with the database connection code.

73
00:03:20,560 --> 00:03:25,330
I have app JS where I use Express, set up some middlewares.

74
00:03:25,330 --> 00:03:28,420
For example, for serving static files that we have here

75
00:03:28,420 --> 00:03:31,980
as well in the public folder, images, styles.

76
00:03:31,980 --> 00:03:34,303
These files are served statically.

77
00:03:35,190 --> 00:03:36,820
Then I register my routes.

78
00:03:36,820 --> 00:03:39,660
I have to error handler, and so on.

79
00:03:39,660 --> 00:03:43,530
Really nothing fancy, nothing we haven't done before.

80
00:03:43,530 --> 00:03:44,363
And of course,

81
00:03:44,363 --> 00:03:47,480
using the MVC pattern here also is a bit overkill.

82
00:03:47,480 --> 00:03:48,360
Because in the end,

83
00:03:48,360 --> 00:03:51,070
I have rather straightforward controllers

84
00:03:51,070 --> 00:03:54,670
and models with no fancy logic in there.

85
00:03:54,670 --> 00:03:57,570
Again, really just things we solved before.

86
00:03:57,570 --> 00:04:00,480
But I deliberately chose a simple example here

87
00:04:00,480 --> 00:04:02,840
because I wanna focus on deployment here

88
00:04:02,840 --> 00:04:06,623
and not get confused by too much code that's flying around.

89
00:04:07,790 --> 00:04:10,560
So these are the two examples sites that we got here:

90
00:04:10,560 --> 00:04:12,470
a static and dynamic site.

91
00:04:12,470 --> 00:04:16,250
And hence, we'll need two different hosting providers.

92
00:04:16,250 --> 00:04:18,180
But before we get to that

93
00:04:18,180 --> 00:04:21,730
and before we also start hosting the database somewhere,

94
00:04:21,730 --> 00:04:24,350
we wanna go through these preparation steps,

95
00:04:24,350 --> 00:04:25,500
which I mentioned here.