Original subtitles

1 1

All right, so let's now finally set up 2

2

the continuous integration with Netlify. 3

3

And to do that, let's go back to our Netlify dashboard. 4

4

So right here, and we are still 5

5

here in the settings part of this site, okay? 6

6

And so then let's go here to build and deploy. 7

7

And then from here, 8

8

we can choose the option link site to git, all right? 9

9

Now, we could also do this 10

10

right from the beginning like this, 11

11

so without the manual deploy that we did in the beginning. 12

12

So that would be like in the very beginning, 13

13

we could simply create new site from git. 14

14

But in this case we already have this site, 15

15

and so we can now simply change this here 16

16

to continuous integration. 17

17

Now, in a nutshell, 18

18

what continuous integration means 19

19

or continuous deployment as Netlify apparently calls it, 20

20

that basically is to connect a site to a git repository, 21

21

and then whenever we change the code in our repository, 22

22

then that will automatically trigger 23

23

a new deployment of our site. 24

24

And so then everything happens really automatically. 25

25

So all we will have to do then is to basically 26

26

build our code locally, committed to our git repository, 27

27

then push that git repository 28

28

to or remote repository on GitHub, 29

29

and then from there, 30

30

the site will automatically be built and deployed. 31

31

So let me show you how that works. 32

32

So link site to git. 33

33

Then here, we can select the git provider that we want. 34

34

And so, as I mentioned before, 35

35

there are actually more services beside GitHub, 36

36

like GitLab and Bitbucket, 37

37

but we will use GitHub, of course. 38

38

Then here we have to authorize the access to GitHub, 39

39

which in my case here was already done, 40

40

but you will probably have to authenticate yourself again. 41

41

And then here we have all the repos 42

42

that I have in my GitHub account, 43

43

and so let's now search for forkify, okay? 44

44

And so this here is the one that I just created previously. 45

45

So forkify-course-video 46

46

is exactly this one that we created 47

47

in the last video, right? 48

48

And of course yours will have to have a different name, 49

49

but simply select that one then right here, all right? 50

50

Then we can change which branch we want to deploy, 51

51

and so we have these two, right? 52

52

But of course we want the master branch. 53

53

But now here comes the question. 54

54

So where is the code that we actually want to deploy? 55

55

Right? 56

56

Because remember, the code that we do want to deploy 57

57

is in the disc folder of our code. 58

58

So if you go back here, 59

59

the code that we manually deployed before 60

60

was this disc folder. 61

61

However, this disc folder is not in our repository, right? 62

62

But that's not a problem at all, 63

63

because we can now tell Netlify here 64

64

to run our build command 65

65

whenever there is a change in the repository. 66

66

And so this is really, really powerful. 67

67

So let's come here to our package.json, 68

68

and our build command is this one. 69

69

And so here, let's just copy this build command. 70

70

So Netlifyi will then basically install 71

71

all these dependencies and also these dev dependencies 72

72

and run this command, okay? 73

73

So basically what we did manually 74

74

also on our local computer, Netlify will do it for us, okay? 75

75

And then finally, the publish directory. 76

76

And so that is our dist folder. 77

77

So this is where the code will live 78

78

after this build command is executed, right? 79

79

And now let's hope that everything works here 80

80

because it's not always that smooth, but let's see. 81

81

And it is starting up here. 82

82

So let's wait what happens. 83

83

So we can also click on the details here, 84

84

and you see that it is doing something, 85

85

so it's installing the NPM module, so apparently. 86

86

Now it's building all of our assets here. 87

87

So this is growing really fast. 88

88

It's not really important also, 89

89

what matters is that our build command 90

90

was apparently understood, so it's doing all of this stuff. 91

91

And here we get now the exact same message 92

92

that we get previously also offline. 93

93

So also on our local computer, right? 94

94

So where is that now? 95

95

So this one here. 96

96

So it's exactly what we got before, right? 97

97

And so then Netlify build was complete and the site is live. 98

98

Okay, so let's reload here and everything works. 99

99

And remember that our current site right now 100

100

has in the controller this welcome to the application. 101

101

And so in order to see if everything really worked, 102

102

that should now be in the console, 103

103

and bam, there it is, great. 104

104

So everything worked just smoothly, 105

105

and I hope that it did the same for you as well. 106

106

So let's go back here, 107

107

and here you now get this published tag. 108

108

And also I think that on GitHub, 109

109

you can see that if you reload. 110

110

Well, usually it says something here on the right side, 111

111

like that it was deployed on Netlify, 112

112

but in this case, it doesn't happen, 113

113

but it's also not so important. 114

114

But anyway, just to make sure 100% 115

115

that we really have the continuous integration now working, 116

116

and also so I can show you how handy it actually is, 117

117

let's simply change or code once again. 118

118

So what I will do now is to again, 119

119

get rid of this new feature. 120

120

So this was really just a demonstration anyway. 121

121

And also let's get rid here of some 122

122

code that we don't really need. 123

123

So some older code that was already commented out, 124

124

this one as well, okay? 125

125

And so let's save it and let's add this code as well. 126

126

So git add all and then git commit 127

127

with the message of cleaned up controller 128

128

and then git push origin master, okay? 129

129

There it is, if we reload here, 130

130

you see we have this latest message here, 131

131

and now if we come here, let's now reload here as well, 132

132

and you see that it is now building here 133

133

our latest commit as well, 134

134

so the cleaned up controller, okay? 135

135

And this is once again, gonna take some time, 136

136

so I'm gonna be back when this is done. 137

137

And there we go. 138

138

So our latest change should now be published, 139

139

let's reload, and so now this log should be gone, 140

140

and yap, it is. 141

141

And our application of course, 142

142

should still be working the same, right? 143

143

So I am still getting my own super pizza recipe 144

144

because, of course, I'm still using my same API key here. 145

145

Okay, and this actually brings us 146

146

to the end of this section 147

147

and also to the end of the forkify project. 148

148

So it's time to say goodbye 149

149

to this beautiful and big project that we built together 150

150

in the last section, 151

151

and that we now finally deployed for the internet, 152

152

for everyone to see it together in this section. 153

153

So make sure that for all your projects in the future, 154

154

you do the same workflow as we did here. 155

155

So adding them to GitHub 156

156

and maybe even to a public repository, 157

157

so that your potential future employers 158

158

can actually see that you are active on GitHub. 159

159

So for some developers and especially newbies, 160

160

GitHub also kind of serves as a portfolio 161

161

so that other people can see 162

162

how active you actually are in coding. 163

163

Okay, and that's really all that I had to tell you. 164

164

And I hope that you're not yet sick 165

165

of hearing my voice here, 166

166

and I'm really happy that you came all the way 167

167

until the end of this section here with me 168

168

so that I'm not talking alone here all by myself. 169

169

But anyway, see you soon in the next section.