Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,240 --> 00:00:04,540
All right, so let's now finally set up
2
2
00:00:04,540 --> 00:00:07,773
the continuous integration with Netlify.
3
3
00:00:09,370 --> 00:00:13,323
And to do that, let's go back to our Netlify dashboard.
4
4
00:00:14,540 --> 00:00:17,460
So right here, and we are still
5
5
00:00:17,460 --> 00:00:22,460
here in the settings part of this site, okay?
6
6
00:00:22,720 --> 00:00:26,033
And so then let's go here to build and deploy.
7
7
00:00:27,220 --> 00:00:28,190
And then from here,
8
8
00:00:28,190 --> 00:00:33,190
we can choose the option link site to git, all right?
9
9
00:00:33,200 --> 00:00:35,120
Now, we could also do this
10
10
00:00:35,120 --> 00:00:37,390
right from the beginning like this,
11
11
00:00:37,390 --> 00:00:41,410
so without the manual deploy that we did in the beginning.
12
12
00:00:41,410 --> 00:00:44,503
So that would be like in the very beginning,
13
13
00:00:45,370 --> 00:00:48,683
we could simply create new site from git.
14
14
00:00:49,820 --> 00:00:52,530
But in this case we already have this site,
15
15
00:00:52,530 --> 00:00:56,640
and so we can now simply change this here
16
16
00:00:56,640 --> 00:00:58,363
to continuous integration.
17
17
00:00:59,350 --> 00:01:00,840
Now, in a nutshell,
18
18
00:01:00,840 --> 00:01:03,740
what continuous integration means
19
19
00:01:03,740 --> 00:01:08,740
or continuous deployment as Netlify apparently calls it,
20
20
00:01:09,000 --> 00:01:13,350
that basically is to connect a site to a git repository,
21
21
00:01:13,350 --> 00:01:17,160
and then whenever we change the code in our repository,
22
22
00:01:17,160 --> 00:01:19,410
then that will automatically trigger
23
23
00:01:19,410 --> 00:01:22,000
a new deployment of our site.
24
24
00:01:22,000 --> 00:01:25,550
And so then everything happens really automatically.
25
25
00:01:25,550 --> 00:01:28,430
So all we will have to do then is to basically
26
26
00:01:28,430 --> 00:01:33,030
build our code locally, committed to our git repository,
27
27
00:01:33,030 --> 00:01:35,390
then push that git repository
28
28
00:01:35,390 --> 00:01:37,980
to or remote repository on GitHub,
29
29
00:01:37,980 --> 00:01:39,110
and then from there,
30
30
00:01:39,110 --> 00:01:43,130
the site will automatically be built and deployed.
31
31
00:01:43,130 --> 00:01:45,560
So let me show you how that works.
32
32
00:01:45,560 --> 00:01:46,983
So link site to git.
33
33
00:01:48,130 --> 00:01:52,280
Then here, we can select the git provider that we want.
34
34
00:01:52,280 --> 00:01:53,990
And so, as I mentioned before,
35
35
00:01:53,990 --> 00:01:57,600
there are actually more services beside GitHub,
36
36
00:01:57,600 --> 00:02:00,070
like GitLab and Bitbucket,
37
37
00:02:00,070 --> 00:02:02,333
but we will use GitHub, of course.
38
38
00:02:03,870 --> 00:02:07,560
Then here we have to authorize the access to GitHub,
39
39
00:02:07,560 --> 00:02:10,280
which in my case here was already done,
40
40
00:02:10,280 --> 00:02:14,430
but you will probably have to authenticate yourself again.
41
41
00:02:14,430 --> 00:02:17,080
And then here we have all the repos
42
42
00:02:17,080 --> 00:02:19,580
that I have in my GitHub account,
43
43
00:02:19,580 --> 00:02:22,280
and so let's now search for forkify, okay?
44
44
00:02:26,800 --> 00:02:30,710
And so this here is the one that I just created previously.
45
45
00:02:30,710 --> 00:02:32,760
So forkify-course-video
46
46
00:02:32,760 --> 00:02:35,300
is exactly this one that we created
47
47
00:02:35,300 --> 00:02:37,870
in the last video, right?
48
48
00:02:37,870 --> 00:02:41,820
And of course yours will have to have a different name,
49
49
00:02:41,820 --> 00:02:45,770
but simply select that one then right here, all right?
50
50
00:02:48,330 --> 00:02:52,290
Then we can change which branch we want to deploy,
51
51
00:02:52,290 --> 00:02:55,870
and so we have these two, right?
52
52
00:02:55,870 --> 00:02:59,480
But of course we want the master branch.
53
53
00:02:59,480 --> 00:03:02,490
But now here comes the question.
54
54
00:03:02,490 --> 00:03:06,730
So where is the code that we actually want to deploy?
55
55
00:03:06,730 --> 00:03:07,563
Right?
56
56
00:03:07,563 --> 00:03:11,450
Because remember, the code that we do want to deploy
57
57
00:03:11,450 --> 00:03:15,130
is in the disc folder of our code.
58
58
00:03:15,130 --> 00:03:17,050
So if you go back here,
59
59
00:03:17,050 --> 00:03:19,660
the code that we manually deployed before
60
60
00:03:19,660 --> 00:03:21,890
was this disc folder.
61
61
00:03:21,890 --> 00:03:26,890
However, this disc folder is not in our repository, right?
62
62
00:03:27,090 --> 00:03:29,430
But that's not a problem at all,
63
63
00:03:29,430 --> 00:03:32,260
because we can now tell Netlify here
64
64
00:03:32,260 --> 00:03:34,100
to run our build command
65
65
00:03:34,100 --> 00:03:37,200
whenever there is a change in the repository.
66
66
00:03:37,200 --> 00:03:39,943
And so this is really, really powerful.
67
67
00:03:41,320 --> 00:03:46,010
So let's come here to our package.json,
68
68
00:03:46,010 --> 00:03:49,010
and our build command is this one.
69
69
00:03:49,010 --> 00:03:53,200
And so here, let's just copy this build command.
70
70
00:03:53,200 --> 00:03:56,040
So Netlifyi will then basically install
71
71
00:03:56,040 --> 00:04:00,150
all these dependencies and also these dev dependencies
72
72
00:04:00,150 --> 00:04:04,200
and run this command, okay?
73
73
00:04:04,200 --> 00:04:06,340
So basically what we did manually
74
74
00:04:06,340 --> 00:04:11,103
also on our local computer, Netlify will do it for us, okay?
75
75
00:04:13,600 --> 00:04:16,163
And then finally, the publish directory.
76
76
00:04:17,360 --> 00:04:20,240
And so that is our dist folder.
77
77
00:04:20,240 --> 00:04:22,890
So this is where the code will live
78
78
00:04:22,890 --> 00:04:26,383
after this build command is executed, right?
79
79
00:04:27,340 --> 00:04:30,380
And now let's hope that everything works here
80
80
00:04:30,380 --> 00:04:33,883
because it's not always that smooth, but let's see.
81
81
00:04:36,400 --> 00:04:39,770
And it is starting up here.
82
82
00:04:39,770 --> 00:04:42,103
So let's wait what happens.
83
83
00:04:43,270 --> 00:04:45,810
So we can also click on the details here,
84
84
00:04:45,810 --> 00:04:48,053
and you see that it is doing something,
85
85
00:04:50,890 --> 00:04:54,383
so it's installing the NPM module, so apparently.
86
86
00:05:04,150 --> 00:05:07,323
Now it's building all of our assets here.
87
87
00:05:09,730 --> 00:05:11,453
So this is growing really fast.
88
88
00:05:12,640 --> 00:05:14,430
It's not really important also,
89
89
00:05:14,430 --> 00:05:17,070
what matters is that our build command
90
90
00:05:17,070 --> 00:05:21,423
was apparently understood, so it's doing all of this stuff.
91
91
00:05:22,620 --> 00:05:25,230
And here we get now the exact same message
92
92
00:05:25,230 --> 00:05:28,540
that we get previously also offline.
93
93
00:05:28,540 --> 00:05:31,960
So also on our local computer, right?
94
94
00:05:31,960 --> 00:05:33,387
So where is that now?
95
95
00:05:35,000 --> 00:05:36,090
So this one here.
96
96
00:05:36,090 --> 00:05:39,360
So it's exactly what we got before, right?
97
97
00:05:39,360 --> 00:05:44,360
And so then Netlify build was complete and the site is live.
98
98
00:05:46,890 --> 00:05:51,890
Okay, so let's reload here and everything works.
99
99
00:05:53,300 --> 00:05:56,760
And remember that our current site right now
100
100
00:05:56,760 --> 00:06:00,840
has in the controller this welcome to the application.
101
101
00:06:00,840 --> 00:06:04,580
And so in order to see if everything really worked,
102
102
00:06:04,580 --> 00:06:06,563
that should now be in the console,
103
103
00:06:07,500 --> 00:06:12,263
and bam, there it is, great.
104
104
00:06:13,130 --> 00:06:15,820
So everything worked just smoothly,
105
105
00:06:15,820 --> 00:06:18,683
and I hope that it did the same for you as well.
106
106
00:06:19,970 --> 00:06:20,870
So let's go back here,
107
107
00:06:20,870 --> 00:06:25,040
and here you now get this published tag.
108
108
00:06:25,040 --> 00:06:27,430
And also I think that on GitHub,
109
109
00:06:27,430 --> 00:06:29,423
you can see that if you reload.
110
110
00:06:31,390 --> 00:06:35,490
Well, usually it says something here on the right side,
111
111
00:06:35,490 --> 00:06:38,720
like that it was deployed on Netlify,
112
112
00:06:38,720 --> 00:06:41,660
but in this case, it doesn't happen,
113
113
00:06:41,660 --> 00:06:43,333
but it's also not so important.
114
114
00:06:44,610 --> 00:06:48,050
But anyway, just to make sure 100%
115
115
00:06:48,050 --> 00:06:52,290
that we really have the continuous integration now working,
116
116
00:06:52,290 --> 00:06:56,060
and also so I can show you how handy it actually is,
117
117
00:06:56,060 --> 00:06:59,820
let's simply change or code once again.
118
118
00:06:59,820 --> 00:07:01,870
So what I will do now is to again,
119
119
00:07:01,870 --> 00:07:04,093
get rid of this new feature.
120
120
00:07:05,550 --> 00:07:09,300
So this was really just a demonstration anyway.
121
121
00:07:09,300 --> 00:07:11,910
And also let's get rid here of some
122
122
00:07:13,160 --> 00:07:14,710
code that we don't really need.
123
123
00:07:15,740 --> 00:07:19,943
So some older code that was already commented out,
124
124
00:07:21,960 --> 00:07:26,750
this one as well, okay?
125
125
00:07:26,750 --> 00:07:31,750
And so let's save it and let's add this code as well.
126
126
00:07:32,020 --> 00:07:37,020
So git add all and then git commit
127
127
00:07:37,270 --> 00:07:42,270
with the message of cleaned up controller
128
128
00:07:45,280 --> 00:07:50,280
and then git push origin master, okay?
129
129
00:07:55,340 --> 00:07:57,683
There it is, if we reload here,
130
130
00:08:00,190 --> 00:08:02,960
you see we have this latest message here,
131
131
00:08:02,960 --> 00:08:06,623
and now if we come here, let's now reload here as well,
132
132
00:08:07,560 --> 00:08:10,560
and you see that it is now building here
133
133
00:08:10,560 --> 00:08:12,340
our latest commit as well,
134
134
00:08:12,340 --> 00:08:15,830
so the cleaned up controller, okay?
135
135
00:08:15,830 --> 00:08:19,290
And this is once again, gonna take some time,
136
136
00:08:19,290 --> 00:08:21,723
so I'm gonna be back when this is done.
137
137
00:08:23,370 --> 00:08:25,090
And there we go.
138
138
00:08:25,090 --> 00:08:28,480
So our latest change should now be published,
139
139
00:08:28,480 --> 00:08:31,733
let's reload, and so now this log should be gone,
140
140
00:08:32,930 --> 00:08:34,590
and yap, it is.
141
141
00:08:34,590 --> 00:08:36,800
And our application of course,
142
142
00:08:36,800 --> 00:08:40,523
should still be working the same, right?
143
143
00:08:41,720 --> 00:08:45,440
So I am still getting my own super pizza recipe
144
144
00:08:45,440 --> 00:08:49,940
because, of course, I'm still using my same API key here.
145
145
00:08:49,940 --> 00:08:52,190
Okay, and this actually brings us
146
146
00:08:52,190 --> 00:08:54,010
to the end of this section
147
147
00:08:54,010 --> 00:08:57,770
and also to the end of the forkify project.
148
148
00:08:57,770 --> 00:08:59,630
So it's time to say goodbye
149
149
00:08:59,630 --> 00:09:03,490
to this beautiful and big project that we built together
150
150
00:09:03,490 --> 00:09:04,990
in the last section,
151
151
00:09:04,990 --> 00:09:08,160
and that we now finally deployed for the internet,
152
152
00:09:08,160 --> 00:09:12,070
for everyone to see it together in this section.
153
153
00:09:12,070 --> 00:09:15,480
So make sure that for all your projects in the future,
154
154
00:09:15,480 --> 00:09:18,420
you do the same workflow as we did here.
155
155
00:09:18,420 --> 00:09:20,200
So adding them to GitHub
156
156
00:09:20,200 --> 00:09:23,090
and maybe even to a public repository,
157
157
00:09:23,090 --> 00:09:26,420
so that your potential future employers
158
158
00:09:26,420 --> 00:09:30,150
can actually see that you are active on GitHub.
159
159
00:09:30,150 --> 00:09:33,750
So for some developers and especially newbies,
160
160
00:09:33,750 --> 00:09:37,030
GitHub also kind of serves as a portfolio
161
161
00:09:37,030 --> 00:09:38,710
so that other people can see
162
162
00:09:38,710 --> 00:09:41,203
how active you actually are in coding.
163
163
00:09:42,260 --> 00:09:46,590
Okay, and that's really all that I had to tell you.
164
164
00:09:46,590 --> 00:09:49,330
And I hope that you're not yet sick
165
165
00:09:49,330 --> 00:09:50,980
of hearing my voice here,
166
166
00:09:50,980 --> 00:09:54,380
and I'm really happy that you came all the way
167
167
00:09:54,380 --> 00:09:57,110
until the end of this section here with me
168
168
00:09:57,110 --> 00:10:01,270
so that I'm not talking alone here all by myself.
169
169
00:10:01,270 --> 00:10:04,763
But anyway, see you soon in the next section.
14706
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.