Original subtitles

1 1

Let's now quickly go over the basics of Git. 2

2

And this video is by no means 3

3

gonna be a complete overview of Git. 4

4

All I want to do here is to get you started 5

5

as quick as possible with Git, 6

6

so that we can then push our project to GitHub. 7

7

All right, now before we can do anything else with git, 8

8

in each repository, 9

9

we should have a git ignore file like this. 10

10

So if VS code didn't create it automatically for you, 11

11

as it did for me in the last lecture, 12

12

then please go ahead and create this file right now. 13

13

So it starts with a dot, 14

14

and then Git ignore. 15

15

And inside of this file, 16

16

we can put all the folders and also files, 17

17

which we want Git to ignore, 18

18

or in other words, folders and files 19

19

that we do not want to get into our repository. 20

20

And node modules is a perfect example of that. 21

21

Because, well, we can always get 22

22

this code back from NPM, right? 23

23

It is not part of our original source code. 24

24

And so therefore, we don't need it in our Git repository. 25

25

And actually, the same is true for our dist folder. 26

26

Right, so the dist folder, 27

27

essentially only contains code 28

28

that was built from our source code. 29

29

And so again, this is actually code 30

30

that we do not need in our Git repository. 31

31

So usually, in the repository, 32

32

we only want like the original source code, 33

33

and everything that is necessary 34

34

in order to basically compile our final project later. 35

35

So let's actually also exclude the dist folder here. 36

36

Now, this is not mandatory, 37

37

and some people want also to keep their dist folder 38

38

in the Git repository. 39

39

But personally, I think it's a good idea not to include it. 40

40

And so you see that now, it got grayed out here as well. 41

41

And the same for the parcel cache folder. 42

42

So that we also don't want. 43

43

So .parcel-cache. 44

44

So that's gone now. 45

45

And now here, VS code shows us 46

46

that there are basically 28 files 47

47

in our repository that are pending changes. 48

48

So this here is enough for our Git ignore. 49

49

Now only if you're using the Mac, 50

50

you can add one type of file here, which is the .Ds_Store, 51

51

which is some kind of weird file 52

52

that Mac OS sometimes adds to our directories. 53

53

But with this here, 54

54

I think we're already at a good starting point, okay? 55

55

So let's now run a Git command called git status. 56

56

And so this shows us here, 57

57

that all of these files are untracked files. 58

58

And we can also see that we are on branch Master, 59

59

and that there are no commits yet. 60

60

So all of these files here are untracked. 61

61

And so now we need to track them, 62

62

which in terms of git means to add them 63

63

to the so called Staging area. 64

64

So you can also see here in VS code, 65

65

that these files are now untracked. 66

66

So that's what this U stands for. 67

67

Okay, but now, let's add all these files 68

68

to the staging area by saying git add, 69

69

and then dash A, which stands for all the files. 70

70

Now, we could also add files manually. 71

71

So one by one, but usually that's never necessary. 72

72

So I will simply add all of my files now. 73

73

And so these files are now basically part of the repository. 74

74

Okay, and so now here it says, edit. 75

75

And so these files are now basically tracked, 76

76

they are active. 77

77

Okay, then let's say we do some change in one of them, 78

78

let's say in the controller, 79

79

let's just log something to the console 80

80

in the init function, let's say welcome. 81

81

And so now you see that this file was modified, right? 82

82

And also immediately here on the sidebar, 83

83

VS code tells us that something has changed. 84

84

And so green here means that something was added. 85

85

And when we click that, we can actually see the change. 86

86

So the plus here means that something was added. 87

87

And if we see git status now again, 88

88

you will see that all of these files here, 89

89

are ready to be committed. 90

90

So they are being tracked, 91

91

and then there's this modified file. 92

92

And so in order to now commit all these files 93

93

to our Git repository, I need to run git add all again. 94

94

So now you see that it is back to just being added. 95

95

And also this green bar here is gone. 96

96

All right, and so now we're ready 97

97

to finally commit these files. 98

98

And committing the files basically means 99

99

that we really save the modifications 100

100

of all the files to the repository. 101

101

So adding the files, like this here, 102

102

is basically just a pre step before the commit. 103

103

So a commit is gonna be like a snapshot 104

104

of your code at a certain point in time. 105

105

So each time before you make some 106

106

significant changes to your codebase, 107

107

you should always commit. 108

108

And so then, if necessary, 109

109

you can go back to past commits, 110

110

and delete any modifications that you did 111

111

that were maybe wrong. 112

112

And we will see how to do that actually later 113

113

in this lecture. 114

114

But for now, let's commit what we already have here. 115

115

So git commit, then dash M, which stands for message. 116

116

And then here, we need to specify a string, 117

117

which is the commit message. 118

118

And so usually, the first commit is always 119

119

gonna be called initial commit, like this. 120

120

Now, okay, and that's it. 121

121

Now, they're all committed. 122

122

And you see that all the files, 123

123

now look normal here again. 124

124

All right, and if we now take a look again, at git status, 125

125

then you will see that there is nothing to commit, 126

126

and the working tree is clean. 127

127

Alright, so in summary, 128

128

whenever we initialize a new Git repository, 129

129

usually I immediately add all the files, 130

130

so I do git in it, then after that, 131

131

immediately I run this command. 132

132

So Git at all the files. 133

133

And then immediately after that, 134

134

I commit everything as the initial commit, all right? 135

135

Now, let's say that we do some modifications here, 136

136

in multiple files. 137

137

But we actually introduce some kind of a bug, 138

138

not writing any real code, 139

139

I will just put a bug here now. 140

140

And it turns red, because I have 141

141

a special VS code extension for that. 142

142

And let's say I also have now some error 143

143

here in the model. 144

144

Okay, and so this is just to simulate 145

145

that we introduced some real bucks. 146

146

So if you wanted to go back on all of these files 147

147

to the previous commit, 148

148

then you could simply write git reset, 149

149

then dash dash, hard, and then HEAD, 150

150

all in uppercase like this. 151

151

And now watch what happens to this file 152

152

as this command is executed. 153

153

So, you see that it's gone. 154

154

And to two files here that previously had the M, 155

155

for modified, are also now back to normal. 156

156

And debug that we introduced here, is also gone. 157

157

All right, and so this is the easiest way 158

158

to going back in time, basically, to the previous commit. 159

159

But now, let's say that you actually had already committed. 160

160

So let's say that here, you now had an alert, 161

161

which says, hacked. 162

162

And it doesn't really matter what code it is. 163

163

But let's say this is another bug 164

164

that you introduced for some reason. 165

165

But you didn't really notice that it was happening. 166

166

So let's say here as well. 167

167

All right, so you see now 168

168

these two files are modified. 169

169

And now you want to commit these changes. 170

170

So you think you added a great new feature. 171

171

But actually, you just introduced a bug, 172

172

which allows users to get hacked. 173

173

But anyway, you don't know that yet, let's say. 174

174

And so you add all the files to the staging area, 175

175

and then you do git commit 176

176

with the message of new feature. 177

177

Okay, and so now these modified here are gone. 178

178

And our code is now committed. 179

179

Now, let's say you keep working on the code. 180

180

But eventually you notice that you have these bugs here, 181

181

which allow users to get hacked. 182

182

And so you want to basically now delete 183

183

the last commit that you did, right? 184

184

So you want to go back to the previous commit. 185

185

So to do that, 186

186

you need to take a look at that previous commit 187

187

and you can do git log for that. 188

188

So here you have basically a log 189

189

of all the commits that you did. 190

190

So this one is the last one. 191

191

So the new feature. 192

192

And it has basically this ID here. 193

193

And so this has currently the head. 194

194

And so that's why previously 195

195

we could reset using this head keyword. 196

196

But now you want to go back to this commit, 197

197

so to the initial commit, right? 198

198

And so let's copy this ID here, basically. 199

199

And it would be enough to take the last seven here, 200

200

but I like to simply copy everything. 201

201

So select and copy. 202

202

And now to get out of this log here, 203

203

you need to type a Q, so Q for quit. 204

204

Okay, so Ctrl C will not work there, 205

205

you have to use key like this. 206

206

And sometimes you even need like, colon and Q. 207

207

But anyway, let's now do again, git reset, 208

208

hard, and then the ID of that commit. 209

209

So let's see. 210

210

And now that hacked log is gone from here, 211

211

and from here as well. 212

212

And so we are now back in that initial commit. 213

213

And indeed, that's what is set right here. 214

214

So the head is now at the initial commit. 215

215

However, moving between commits like this 216

216

is a little bit dangerous. 217

217

And so instead, when we plan on doing a lot of changes, 218

218

usually, we simply create a new branch. 219

219

So let's write git branch. 220

220

And this will simply list 221

221

all the branches that we currently have. 222

222

And so right now, we only have the master branch. 223

223

And the star here means that that's the branch 224

224

that we are currently in. 225

225

And now again, to close this, you need to write a Q. 226

226

Okay, but now let's create a new branch. 227

227

And so that new branch is then basically 228

228

going to be a copy of the current master branch, 229

229

in which we can develop new codes and adding new features, 230

230

but without affecting the codes 231

231

that is in the master branch. 232

232

So it's basically a parallel track 233

233

in which we can develop new code, 234

234

but without affecting the original code that we had before, 235

235

and which we knew was already working. 236

236

And so this is a great way of preventing bugs 237

237

in our main code base. 238

238

So we create a new branch, 239

239

by writing again, git branch, but then here, 240

240

we can also specify now the name of the branch. 241

241

So let's call this one new-feature. 242

242

Okay, so we created a new branch, 243

243

but we didn't switch to that new branch yet. 244

244

So to switch to that branch, 245

245

we write git checkout, and then the name of the branch. 246

246

And so it says switched to branch new feature. 247

247

So let's quickly add some modifications here, 248

248

let's add a new function. 249

249

Newfeature is simply a function 250

250

which logs to the console 251

251

Welcome to the application. 252

252

Okay, and we also delete this code from here. 253

253

And then we want to call that function down here. 254

254

So, nothing significant. 255

255

This is again, just to simulate. 256

256

So this one turned now a green 257

257

because we changed something from the original code. 258

258

And here it is orange, because we changed something. 259

259

And if we were to delete something, for example, 260

260

then it should turn red, which right now is not happening. 261

261

But anyway, if we click here, 262

262

we can see exactly what the code looked like before. 263

263

So these two lines of code are gone 264

264

and this one is new. 265

265

And so this in itself, can be very handy 266

266

and a great use case of Git. 267

267

But anyway, let's put this very important line here back. 268

268

Okay, and so let's now add this change to the staging area. 269

269

So Git add all. 270

270

So we always have to do this before committing, 271

271

and then git commit message, 272

272

then edit new welcome feature. 273

273

All right, and that's it. 274

274

So we just created a new feature, 275

275

but this new feature is now in this new feature brand. 276

276

So let's check that out again. 277

277

So git branch, 278

278

and so now we have these two branches. 279

279

So master and new feature, and this one is the current one. 280

280

Then again, Q to Exodus. 281

281

And now once we are done with this new imaginary feature, 282

282

let's switch back to the master branch, 283

283

so that we can then integrate these changes 284

284

into our main code base. 285

285

So which again, is in the master branch. 286

286

So that is git checkout, and master. 287

287

And so now, as I execute this, 288

288

you will see this code here going away, 289

289

because that is the way the code looked like 290

290

in the master branch. 291

291

Okay, and so this proves 292

292

that there are now really like two different tracks 293

293

with different versions of the code. 294

294

So in the master branch, we have this code. 295

295

And in the other branch, we have that code that we just saw, 296

296

and that just disappeared. 297

297

But now we can then merge these changes together. 298

298

So when we are in the branch 299

299

into which we want to add the new code, 300

300

we can use Git merge, and then the name of the branch, 301

301

which contains the new code 302

302

that we want to merge with the current branch. 303

303

And so that is the new feature branch. 304

304

And so now watch what happens here. 305

305

Okay, so you see that this code here was just added. 306

306

And down here is also this small summary. 307

307

So you see, there were six modifications, 308

308

five additions, so five lines were added, 309

309

and one line was deleted. 310

310

And now just to make sure that our working tree 311

311

is still clean, 312

312

so that we don't have to commit anything, 313

313

let's again watch git status. 314

314

And you see there is nothing to commit, 315

315

the working tree is clean. 316

316

And so the code that we have in this branch, 317

317

so in the master branch, 318

318

is now the same as in the new feature branch. 319

319

Okay, so this is a great feature to basically build code, 320

320

but without affecting our original code, 321

321

which might break with the changes that we are introducing. 322

322

And so usually, we never work in the master branch, 323

323

and simply add features in a different new branch. 324

324

And then once we're done, 325

325

we merge these two branches together. 326

326

And then if there is some error, or something not working, 327

327

we can always go back to what it was before. 328

328

All right, and that's all I had to show you 329

329

in this short introduction to Git. 330

330

And if you want to learn even more, 331

331

or maybe have all of these commands that I just showed you, 332

332

in one nice overview, 333

333

there's actually a very handy cheat sheet forget, 334

334

that was developed by GitHub, which I really like to use. 335

335

So let's search for GitHub, 336

336

Git Cheat Sheet. 337

337

Okay, and this one is probably it. 338

338

This one looks a bit different than the one I mean. 339

339

Yeah, this is the one that I have. 340

340

And actually, when I first found this, 341

341

I even printed this out and put it on my desk, 342

342

because there's a lot of stuff that we can do. 343

343

So here is what I just showed you with the branches, right? 344

344

Then here is Git status, Git add, Git init. 345

345

And, yeah, also Git reset-hard. 346

346

And so you see, there is a lot of stuff that we can do. 347

347

And in the next video, 348

348

we will then actually use these commands here. 349

349

So Git push and Git pull, 350

350

so that we can basically copy 351

351

our local repository onto a repository 352

352

that lives in the cloud on GitHub. 353

353

And this will then allow us to basically keep a backup 354

354

of our repository online. 355

355

And it will also enable us to automatically deploy 356

356

or site from this repository 357

357

by setting up continuous integration on Netlify. 358

358

And so let's learn how to do that. 359

359

So how to push our code to GitHub right in the next lecture.