1
00:00:01,450 --> 00:00:06,790
In this lecture, we'll have a look on how you can use a psi to build our project, though the exact

2
00:00:06,790 --> 00:00:12,760
step that we did on our own machine will try now to replicate using telepathy pipelines.

3
00:00:16,230 --> 00:00:22,740
I have now opened a project in an idea, and I'm using Visual Studio code, which is actually free to

4
00:00:22,740 --> 00:00:25,630
download and install, but if you want.

5
00:00:25,680 --> 00:00:33,400
You can still use the get kept at CNN.com interface to edit files if that's easier for you, so it really

6
00:00:33,420 --> 00:00:34,560
doesn't make a difference.

7
00:00:35,490 --> 00:00:39,690
So let's try to create a pipeline that will build of a project.

8
00:00:39,840 --> 00:00:47,970
And for that, you'll see here that we do not have a pipeline definition file, so we don't have a file

9
00:00:47,970 --> 00:00:48,960
that defines the pipeline.

10
00:00:48,960 --> 00:00:50,490
So let's go ahead and create one.

11
00:00:58,650 --> 00:01:04,500
And the first step would be to build a website, so let's define a step, build the website.

12
00:01:13,240 --> 00:01:14,800
And a script, no.

13
00:01:19,180 --> 00:01:22,710
And we have a couple of steps we need to do now.

14
00:01:22,750 --> 00:01:32,770
First of all, this is a JavaScript project using npm and this package Jason File defines a set of dependencies

15
00:01:32,770 --> 00:01:34,030
which should be installed.

16
00:01:34,030 --> 00:01:35,920
Otherwise the project will not work.

17
00:01:36,550 --> 00:01:42,520
So these dependencies are by default installed in this folder called node modules.

18
00:01:43,510 --> 00:01:48,490
And this isn't something that is being checked in with the repository wouldn't make sense.

19
00:01:48,490 --> 00:01:49,660
It would be a lot of files.

20
00:01:50,140 --> 00:01:56,590
So every time somebody needs to check out this repository and try it out to see how it works would first

21
00:01:56,590 --> 00:01:59,500
need to install all the dependencies needed.

22
00:02:00,400 --> 00:02:05,650
And this is a step GitLab needs to do as well, because otherwise, without its dependencies, it will

23
00:02:05,650 --> 00:02:07,450
not be able to build the project.

24
00:02:07,960 --> 00:02:12,550
And in order to install dependencies only need to do is use npm install.

25
00:02:16,750 --> 00:02:22,000
Now, the second tool that we are using is Gatsby. for generating this website, for building, for

26
00:02:22,000 --> 00:02:25,000
taking care of this build tools, everything that's happening there.

27
00:02:25,600 --> 00:02:30,400
And of course, by default, Gatsby isn't installed as well, so we'll need to install Gatsby.

28
00:02:33,180 --> 00:02:38,010
And I'll finally step that we actually wanted to run, is Gatsby built?

29
00:02:42,890 --> 00:02:47,480
Now, let's go ahead and commit these changes and see how our pipeline looks like.

30
00:03:14,470 --> 00:03:15,880
And now the pipeline is running.

31
00:03:15,930 --> 00:03:19,000
And let's take a look on how the output looks like.

32
00:03:38,670 --> 00:03:48,600
Unfortunately, we do have a problem with our pipeline and we have an error, and it is clear that problem,

33
00:03:48,600 --> 00:03:52,440
the command that is generating this error is npm install.

34
00:03:52,980 --> 00:03:56,100
The error is pretty clear command not found.

35
00:03:56,610 --> 00:03:57,960
So what does that mean?

36
00:03:58,860 --> 00:04:07,130
Well, by default, we are using a Docker image that is by default integrated with Typekit lapses.

37
00:04:07,130 --> 00:04:12,510
So what the runner is using is by default, this image ruby in version 2.5.

38
00:04:14,400 --> 00:04:19,140
And apparently, this image doesn't have node and npm installed.

39
00:04:19,860 --> 00:04:26,730
And because you remember locally, we had to install node and r.p.m. and in order to use npm install

40
00:04:26,730 --> 00:04:30,810
in everything, we sort of would need to do the same on GitLab.

41
00:04:32,040 --> 00:04:35,940
And the way we work with this is that we use Docker images.

42
00:04:36,210 --> 00:04:43,650
So the idea is not to take this image and manually start to install node every time, because that would

43
00:04:43,650 --> 00:04:47,370
be a possibility as well just to type in a comment in order to install node.

44
00:04:48,800 --> 00:04:52,100
But ideally, we'll take a Docker image that already has node installed.

45
00:04:52,610 --> 00:05:02,030
So a simple search on the internet for Docker image node or whatever else you're looking for will most

46
00:05:02,030 --> 00:05:04,100
likely lead you to website like this.

47
00:05:07,230 --> 00:05:14,310
Now I'm currently at Docker Hub, and this is like a repository with all the images that are being built.

48
00:05:14,670 --> 00:05:16,880
And anybody can publish these images.

49
00:05:16,890 --> 00:05:23,040
They are like official images from almost any software provider out there that's generating these images

50
00:05:23,040 --> 00:05:27,270
so that everybody can use it so that you do not have to worry about this additional steps.

51
00:05:28,410 --> 00:05:31,290
The name of this image is quite simple is node.

52
00:05:31,620 --> 00:05:37,590
And if we don't specify a version, it will always check out the latest version, but there's the possibility

53
00:05:37,590 --> 00:05:40,080
of specifying a specific version if that's needed.

54
00:05:50,670 --> 00:05:53,190
So let's go ahead and change our pipeline a bit.

55
00:05:55,890 --> 00:06:01,020
So in order to specify an image, all you have to do is go to your job and say image.

56
00:06:03,950 --> 00:06:05,210
And I'm going to write your note.

57
00:06:06,980 --> 00:06:09,860
Let's save it and see how this pipeline looks like.

58
00:06:13,420 --> 00:06:19,870
It will see now that when the pipeline is starting, instead of pulling the ruby image, it's pulling

59
00:06:19,870 --> 00:06:21,070
the Docker image node.

60
00:06:22,060 --> 00:06:24,880
And this is exactly the image that we have specified here.

61
00:07:07,550 --> 00:07:14,180
And probably noticed by now that GitLab CII is not so fast, especially if you previously have worked

62
00:07:14,180 --> 00:07:17,150
with continuous integration server like Jenkins.

63
00:07:17,990 --> 00:07:25,160
And the difference is how GitHub is working and especially the usage of Docker, and that everything

64
00:07:25,160 --> 00:07:31,640
that is being generated here is thrown away after this has been executed just after the job is done.

65
00:07:31,940 --> 00:07:34,190
All this information is no longer available.

66
00:07:34,730 --> 00:07:39,610
And if you have any experience with Jenkins and if you don't have don'tworry in Jenkins, you have somethingI

67
00:07:39,620 --> 00:07:45,470
workspaces and every time a job is running, it has its workspace and don't have to download all these

68
00:07:45,480 --> 00:07:47,090
dependencies over and over again.

69
00:07:47,510 --> 00:07:52,160
And later in the course will look on how we can make our jobs a bit faster.

70
00:07:52,160 --> 00:07:57,800
But generally, you don't have to worry now in the beginning, why your jobs take a bit to execute.

71
00:07:58,640 --> 00:08:05,060
Now our job was successful and then the static website has been generated.

72
00:08:05,600 --> 00:08:11,940
Unfortunately, as I have previously explained, once this job is done, you have nothing to see.

73
00:08:11,960 --> 00:08:16,970
So the execution is completed, but the work said that we have built isn't available.

74
00:08:18,200 --> 00:08:23,000
So what we need to do next in order to use the artifact that has been built.

75
00:08:23,000 --> 00:08:29,420
So the artifact in this case is the website that we are building is to specify where is the artifact

76
00:08:29,430 --> 00:08:31,100
so that we can save and inspect it?

77
00:08:34,070 --> 00:08:35,780
For that, we're going to use artifacts.

78
00:08:46,060 --> 00:08:51,280
And the path that we are interested in is inside the folder public.

79
00:08:52,930 --> 00:08:59,460
So I'm going to simply say public, but you can also specify it like dot slash and then you're referring

80
00:08:59,460 --> 00:09:01,500
to the current rectory where inside.

81
00:09:01,920 --> 00:09:04,770
This is a bit more specific than just saying public.

82
00:09:09,760 --> 00:09:16,840
Now, the job execution is done, you'll see that the artifacts have been generated and now uploaded,

83
00:09:17,470 --> 00:09:22,450
and here on the right side, you will be able to either download them to inspect them on your computer

84
00:09:22,930 --> 00:09:26,020
or for specific files you can view indirectly in the browser.

85
00:09:26,300 --> 00:09:27,580
So I'm going to click here and browse.

86
00:09:31,600 --> 00:09:34,840
And you will see the public folder that we have selected.

87
00:09:38,820 --> 00:09:44,670
And if I go inside it, you will see all the files and folders that are related to the website and you

88
00:09:44,670 --> 00:09:47,730
will not see anything like node modules or something of that.

89
00:09:47,880 --> 00:09:50,370
It's only the static website that we are interested in.

90
00:09:50,790 --> 00:09:53,310
This is the production build that we want to deploy.

91
00:09:53,310 --> 00:09:58,770
So the rest of the repository, what we have inside is something that we are not interested in deploying,

92
00:09:58,920 --> 00:10:03,270
and it will be a lot of files that will be totally needless because they are like private files.

93
00:10:03,330 --> 00:10:05,520
These are public files that have been generated.

94
00:10:09,240 --> 00:10:15,840
So this is how we have migrated this built job from our own computer to get lspci and have managed to

95
00:10:15,840 --> 00:10:16,710
build this artifact.

96
00:10:17,100 --> 00:10:24,900
Just to recap in order to use 21:00 A. We first have to use a Docker image that already provides node

97
00:10:24,900 --> 00:10:26,640
that has node already installed.

98
00:10:27,150 --> 00:10:31,950
And after that, the steps that are needed are pretty simple and are inside the documentation.

99
00:10:31,950 --> 00:10:33,660
We have to install all the dependencies.

100
00:10:34,110 --> 00:10:38,310
And then we're using Gatsby. Seelye to generate the build that.

101
00:10:38,520 --> 00:10:45,990
Now this gets Gatsby. website has and the artifact will be generated in the public folder and we are

102
00:10:46,140 --> 00:10:47,940
saving it instructing GitLab.

103
00:10:48,780 --> 00:10:49,740
This is the artifact.

104
00:10:49,740 --> 00:10:56,400
We want to save it for later stages, so make sure to keep it and not throw it away after this job has

105
00:10:56,520 --> 00:10:56,940
finished.