1
00:00:01,140 --> 00:00:06,000
‫So, now, let's use our GitHub repo that we just created

2
00:00:06,000 --> 00:00:11,000
‫to set up a very simple continuous integration on Vercel,

3
00:00:11,850 --> 00:00:15,210
‫which is another very popular free,

4
00:00:15,210 --> 00:00:17,310
‫at least for small projects,

5
00:00:17,310 --> 00:00:19,680
‫and also very easy-to-use

6
00:00:19,680 --> 00:00:22,743
‫hosting provider for React applications.

7
00:00:24,420 --> 00:00:27,090
‫But, first of all, we could actually

8
00:00:27,090 --> 00:00:32,070
‫also set up a continuous integration here on Netlify.

9
00:00:32,070 --> 00:00:35,370
‫So for that, we would again, add a new site,

10
00:00:35,370 --> 00:00:37,657
‫and then here, this time, we would select

11
00:00:37,657 --> 00:00:40,257
‫"import an existing project."

12
00:00:41,550 --> 00:00:44,130
‫And so then, here it says exactly

13
00:00:44,130 --> 00:00:45,870
‫what I mentioned in the beginning.

14
00:00:45,870 --> 00:00:50,280
‫So basically importing an existing project from a Git repo.

15
00:00:50,280 --> 00:00:54,210
‫And so then, here you would connect your GitHub account

16
00:00:54,210 --> 00:00:57,120
‫and then just follow these steps.

17
00:00:57,120 --> 00:01:00,060
‫So if you want, you can do this here on Netlify.

18
00:01:00,060 --> 00:01:01,680
‫That's very easy as well.

19
00:01:01,680 --> 00:01:04,830
‫But I just want to show you another alternative.

20
00:01:04,830 --> 00:01:05,663
‫And so that is

21
00:01:07,471 --> 00:01:09,093
‫Vercel.com.

22
00:01:09,930 --> 00:01:12,420
‫So this is actually the company that created

23
00:01:12,420 --> 00:01:14,490
‫the Next.js framework.

24
00:01:14,490 --> 00:01:18,960
‫And so they're specialized on hosting Next.js applications,

25
00:01:18,960 --> 00:01:21,270
‫but we can of course, also,

26
00:01:21,270 --> 00:01:23,910
‫very easily host, basically,

27
00:01:23,910 --> 00:01:26,643
‫vanilla React applications here.

28
00:01:28,740 --> 00:01:32,190
‫So, you can just sign up for a new account,

29
00:01:32,190 --> 00:01:33,930
‫and then,

30
00:01:33,930 --> 00:01:36,813
‫well, here you just choose the hobby option,

31
00:01:38,340 --> 00:01:40,950
‫then your name, and,

32
00:01:40,950 --> 00:01:42,510
‫yeah, then this is the part

33
00:01:42,510 --> 00:01:44,250
‫that I wanted to show you.

34
00:01:44,250 --> 00:01:46,110
‫So here, you should now actually

35
00:01:46,110 --> 00:01:49,350
‫use your newly created GitHub account

36
00:01:49,350 --> 00:01:51,930
‫because that will then make it really easy

37
00:01:51,930 --> 00:01:56,930
‫to set up the new project that is hosted on GitHub.

38
00:01:57,210 --> 00:01:58,830
‫So just sign up here,

39
00:01:58,830 --> 00:02:01,563
‫and I will meet you once you're done with that.

40
00:02:03,210 --> 00:02:07,590
‫So, this is what Vercel's dashboard should look like,

41
00:02:07,590 --> 00:02:10,470
‫or maybe in the future, again, it will change,

42
00:02:10,470 --> 00:02:14,850
‫but somewhere you will find a button that says "Add New."

43
00:02:14,850 --> 00:02:19,850
‫So here we want to add a new project, and then it is as easy

44
00:02:19,920 --> 00:02:23,853
‫as selecting one Git repo from this list.

45
00:02:25,080 --> 00:02:27,930
‫So here should be all of your repos.

46
00:02:27,930 --> 00:02:31,680
‫And so, you can just select this one that you want

47
00:02:31,680 --> 00:02:33,813
‫and then configure it a little bit.

48
00:02:35,070 --> 00:02:38,790
‫So here, the framework has automatically been figured out

49
00:02:38,790 --> 00:02:41,880
‫as Vite, right?

50
00:02:41,880 --> 00:02:45,633
‫So that's exactly what we used to build this project.

51
00:02:46,560 --> 00:02:48,870
‫And then let's take a look here at the Build

52
00:02:48,870 --> 00:02:51,120
‫and Output settings.

53
00:02:51,120 --> 00:02:55,320
‫So here is where we specify that build command.

54
00:02:55,320 --> 00:02:58,980
‫And so here we can see again "npm run build,"

55
00:02:58,980 --> 00:03:02,250
‫which is exactly the command that we used earlier

56
00:03:02,250 --> 00:03:07,250
‫to create or bundle, so to create or production build right?

57
00:03:07,590 --> 00:03:11,130
‫And so, now, instead of having to do that manually,

58
00:03:11,130 --> 00:03:14,700
‫Vercel will do that for us each time that it detects

59
00:03:14,700 --> 00:03:17,430
‫a change in the GitHub repo.

60
00:03:17,430 --> 00:03:21,540
‫And so that's why we call this a continuous integration.

61
00:03:21,540 --> 00:03:24,870
‫So, again, with this project set up,

62
00:03:24,870 --> 00:03:28,680
‫each time that we commit something new to our repo

63
00:03:28,680 --> 00:03:33,120
‫and then push it to get up, Vercel will automatically detect

64
00:03:33,120 --> 00:03:36,810
‫that a change has happened, will run this command,

65
00:03:36,810 --> 00:03:40,563
‫and then deploy our application from the disk folder.

66
00:03:41,460 --> 00:03:44,451
‫And so here we can just leave all

67
00:03:44,451 --> 00:03:47,430
‫of these defaults and click on "Deploy."

68
00:03:47,430 --> 00:03:49,650
‫And so you'll see that it takes, like,

69
00:03:49,650 --> 00:03:52,830
‫one minute maybe to deploy this application

70
00:03:52,830 --> 00:03:53,883
‫to Vercel.

71
00:03:58,080 --> 00:04:00,450
‫And... beautiful!

72
00:04:00,450 --> 00:04:01,890
‫So we are done.

73
00:04:01,890 --> 00:04:05,400
‫We can see our confetti raining here.

74
00:04:05,400 --> 00:04:07,260
‫And so with this

75
00:04:07,260 --> 00:04:10,860
‫we have our project now successfully deployed

76
00:04:10,860 --> 00:04:13,500
‫to Vercel as well.

77
00:04:13,500 --> 00:04:16,870
‫So let's then continue to this project dashboard

78
00:04:17,790 --> 00:04:20,490
‫where we can actually see the domain.

79
00:04:20,490 --> 00:04:24,120
‫And Vercel actually chose this domain based

80
00:04:24,120 --> 00:04:26,190
‫on the name of the repo.

81
00:04:26,190 --> 00:04:30,120
‫So here we already have this nicely named domain.

82
00:04:30,120 --> 00:04:34,050
‫So, basically, exactly the same as earlier with Netlify,

83
00:04:34,050 --> 00:04:38,370
‫but here it is, dot Vercel instead of dot Netlify,

84
00:04:38,370 --> 00:04:41,943
‫but our project here just works in the exact same way.

85
00:04:44,280 --> 00:04:45,240
‫Alright?

86
00:04:45,240 --> 00:04:47,880
‫And so if you wanted to change this URL

87
00:04:47,880 --> 00:04:51,570
‫then you could do so right here in the settings.

88
00:04:51,570 --> 00:04:55,860
‫And then you can also change everything else that you want

89
00:04:55,860 --> 00:04:57,870
‫about the project here.

90
00:04:57,870 --> 00:05:01,950
‫So this is actually, in my opinion, the preferred way

91
00:05:01,950 --> 00:05:03,570
‫of deploying a project

92
00:05:03,570 --> 00:05:05,790
‫because it just makes it so simple

93
00:05:05,790 --> 00:05:09,123
‫to push updates to our application.

94
00:05:10,260 --> 00:05:12,450
‫Alright? And that does it

95
00:05:12,450 --> 00:05:16,650
‫for this video and for this application as well.

96
00:05:16,650 --> 00:05:18,960
‫So now we are really finished.

97
00:05:18,960 --> 00:05:22,590
‫And so once again, huge congratulations

98
00:05:22,590 --> 00:05:24,570
‫for making it this far

99
00:05:24,570 --> 00:05:28,110
‫and for achieving this really important milestone

100
00:05:28,110 --> 00:05:30,600
‫of having such a large

101
00:05:30,600 --> 00:05:33,600
‫and real world application now deployed

102
00:05:33,600 --> 00:05:36,060
‫to a real production server.

103
00:05:36,060 --> 00:05:39,120
‫So make sure to share this with all your friends

104
00:05:39,120 --> 00:05:42,270
‫and family and also tell them maybe

105
00:05:42,270 --> 00:05:46,290
‫where you have learned how to build something like that.

106
00:05:46,290 --> 00:05:48,090
‫And then I see you soon

107
00:05:48,090 --> 00:05:51,393
‫in the next video, in some next section.