Original subtitles

1 1

So let's now manually deploy forkify project 2

2

to an amazing and free hosting service called Netlify 3

3

But before we can do that, 4

4

we now need to create the final bundle of, 5

5

our application by running this belt command. 6

6

So up until this point, 7

7

we have always used the start command here, 8

8

but that only works for development because the final output 9

9

will actually contain the development server. 10

10

And also the code is not being compressed and dead code is 11

11

not being eliminated while in development. 12

12

Now right? 13

13

So let's open up our terminal. 14

14

And so here we still have our start command running. 15

15

And so let's finish that now by hitting 16

16

Command C or actually 17

17

Control C 18

18

and alternatively, you can also simply 19

19

kill this terminal by clicking this button here. 20

20

All right. 21

21

So, right now we no longer have, 22

22

our development server running and parcel is now no longer 23

23

automatically creating the Built as we say for application. 24

24

And so now we are ready to run this belt command, 25

25

but before let's actually delete this parcel cash folder and 26

26

on this folder as well. 27

27

So I like to delete these 28

28

in order to basically get a fresh start. 29

29

Now this build command here is actually not yet complete, 30

30

because in the build command, 31

31

we actually need to manually specify that we want our output 32

32

to be here in the dist folder, okay? 33

33

And so if you're on version two of parcel, like I am okay. 34

34

So in that case specify the dist 35

35

DIR option. 36

36

So dash dash, dist D I R, 37

37

which stands for distribution directory basically. 38

38

And then we need to specify the folder that we actually 39

39

want to be created. 40

40

So just like before, let's call that the dist folder. 41

41

Now what's also very important is that here we need to 42

42

change from main to default. 43

43

So very important. 44

44

Otherwise this build command will not run in parcel two. 45

45

So again, change this main here to default. 46

46

And I believe that this is actually because of some bug that 47

47

currently happens in the better one version of parcel two. 48

48

But never mind with that, we actually fixed that problem. 49

49

Now, if you are using parcel one, for some reason, 50

50

then here instead 51

51

of dist directory, 52

52

it is called out directory. 53

53

So like this, but again, 54

54

that is only if you are on version one of parcel. 55

55

And so now this command here is ready for us to execute it. 56

56

So NPM run built 57

57

and then let's wait for it. 58

58

So as always, it takes some time here, but when it's done, 59

59

we are ready to then deploy it to folder that was just 60

60

created to, our Netflify server. 61

61

And here it is, 62

62

and now it contains the final code compressed and ready to 63

63

be shipped. 64

64

Okay. 65

65

Now, if you got any error during this build process, 66

66

while you're using a parcel two, then please make sure that 67

67

you really set this default here 68

68

and also make sure that 69

69

everything here is correctly spelled like this. 70

70

But if the problem still persists, 71

71

then it might be a good idea to downgrade, to parcel one. 72

72

And so you would do that with NPM uninstalled like this, 73

73

and then after that, 74

74

you would install it again at version one like this. 75

75

And so that should then work. 76

76

And remember that in that case here it is out DIR 77

77

and not dist, 78

78

and also you would have to go to all your views and change 79

79

the way you import the icons. 80

80

So you would have to remove this part here, okay? 81

81

So wherever you import the icons, 82

82

if you're using parcel one, 83

83

remember you have to take out this part. 84

84

Okay. 85

85

But then after everything is done, 86

86

and once you have this, dist folder, 87

87

we are ready to go to Netlify and actually deploy this. 88

88

So let's go back to our browser. 89

89

And here I already have netlifly.com open. 90

90

Now, Netlify is a free service 91

91

that lets us developers basically 92

92

deploy static webpages or static web applications. 93

93

And with static, 94

94

we mean that the application only contains HTML, 95

95

CSS and JavaScript files, as well as some images, 96

96

but no database or no server side code at all. 97

97

All right. 98

98

So basically Netlify only works for front end applications. 99

99

Like the one that we just built. 100

100

So Netlify is really an amazing service. 101

101

It's extremely easy to set up and to use. 102

102

It has a very generous, free plan, 103

103

and it contains a lot of great features that you can also 104

104

use for free. 105

105

And one of these features is called continuous integration 106

106

with git, which we will use a bit later in the section. 107

107

And I'm telling you all these great things about Netlify 108

108

not because I'm sponsored by them, not by any means. 109

109

It's simply because I really, really love this service. 110

110

It's just fantastic. 111

111

Now, if you need something even more simple, 112

112

without even having to open an account, 113

113

you can also use this surge service, 114

114

which is also free and it's even easier. 115

115

So here you don't have to create an account and you can 116

116

simply NPM install, surge on your computer. 117

117

And then once you're in the folder you want to publish. 118

118

So you want to deploy. 119

119

All you have to do is to run the surge command, 120

120

but anyway, 121

121

we will now use Netlify in the section. 122

122

And so if I convinced you that it's worth using it, 123

123

then please go ahead now and sign up for your free account. 124

124

Now, of course, I already have my account. 125

125

And so I will wait here until you're ready. 126

126

Now Okay, and so this is how it should look like once 127

127

you log in into your Netlify account, 128

128

now it might've changed 129

129

sometime after I recorded this video, 130

130

but in general, 131

131

this should be kind of what it looks like. 132

132

So you see, 133

133

I already have a lot of sites here. 134

134

So basically that's all the demo projects 135

135

that I have been showing you. 136

136

And so, again for that, 137

137

I use Netlify because it's so easy. 138

138

And speaking of easy, let me now 139

139

show you how easy it actually is to quickly and manually 140

140

deploy our forkify project. 141

141

So let's go to our project folder here. 142

142

So this one right here, 143

143

and then we take the disc folder 144

144

because that's the folder 145

145

that we want to deploy. 146

146

So our built that we just created, 147

147

and then we take that folder and we simply drag and drop it 148

148

here into the interface 149

149

and drop it there. 150

150

And that's it, or page is now deployed. 151

151

So you see how easy that was. 152

152

So we get to this page here with this random name that we 153

153

can click on, 154

154

and this is our webpage, 155

155

and now everyone can see it. 156

156

So it's now in fact deployed on this live server on this 157

157

URL now this is not ideal though. 158

158

So this random URL, 159

159

and so we can click here on site settings and change the 160

160

name of our site. 161

161

So come down here 162

162

and then change site name. 163

163

Okay, and so I'm calling 164

164

this forkify dash Jonas, 165

165

and you can then go ahead and call yours forkify and then 166

166

with your name. 167

167

And of course this name has to be unique. 168

168

And so just make sure that you're using some unique name. 169

169

Alright, now we can click here again and now, 170

170

our domain name here makes a bit more sense. 171

171

All right. 172

172

And that's actually it. 173

173

So this is how easy it really is. 174

174

But the great thing about Netlify is not only that 175

175

it's easy, but as I mentioned before, 176

176

also some of the great features and one of them is that 177

177

automatically our page 178

178

is now secured with an SSL certificate. 179

179

So if we check out the URL, 180

180

you see that it actually is HTTPS, 181

181

all right? 182

182

And all of that is automatically included 183

183

for free in our account. 184

184

And another thing that's great is that all our site assets, 185

185

so all the files that we just deployed were in fact deployed 186

186

to a so-called content delivery network or CDN. 187

187

And that means that instead of uploading the files only to 188

188

one server in one location in the world, 189

189

our site now actually lives in many locations. 190

190

So in many servers spread out across the entire world. 191

191

And so then when a user is trying to access our page, 192

192

they will then get diversion from the server 193

193

that is closest to them. 194

194

And so this will then greatly speed up the delivery time off 195

195

your page or your application. 196

196

So again, a lot of great features, really easy to use. 197

197

And yeah, that's why I recommend Netlify to everyone. 198

198

And I'm demonstrating all this using the forkify project, 199

199

but of course it will work the exact same way for any other 200

200

project that you might want to deploy. 201

201

So as long as it is a static project, this is how it works. 202

202

But anyway, 203

203

this is how we deploy a project manually to Netlify. 204

204

However, there is also a better way. 205

205

So basically a way which allows us to automate the process 206

206

of deploying the application and for that, 207

207

we will need something called version control and git. 208

208

And so let's take a look at that in the next video.