1
00:00:01,930 --> 00:00:06,910
In this election, we'll take a look at how you can use predefined environment variables when using

2
00:00:06,939 --> 00:00:10,530
it catalepsy and maybe just doesn't make a lot of sense right now.

3
00:00:10,540 --> 00:00:12,730
But let's imagine the following problem.

4
00:00:13,430 --> 00:00:20,470
Now we have this very beautiful and very simple website, and sometimes we can make changes to it and

5
00:00:20,470 --> 00:00:22,200
deployed, but not always.

6
00:00:22,210 --> 00:00:26,020
The changes that we make are really available to the website.

7
00:00:26,260 --> 00:00:32,350
So if we do not change a text or change an image or something like that, it will not be able to tell

8
00:00:32,380 --> 00:00:34,540
which version exactly is deployed.

9
00:00:36,030 --> 00:00:42,690
So one idea would be to include some are on the website, a small information like version to know which

10
00:00:42,710 --> 00:00:47,580
committee has generated this particular version that we are seeing on a production seper.

11
00:00:51,530 --> 00:00:57,620
Unfortunately, get already comes with a lot of predefined environmental variables that we can use,

12
00:00:58,160 --> 00:01:03,890
and at this page, which you'll find attached as a resource to this lecture, will find quite a lot

13
00:01:03,890 --> 00:01:05,480
of variables that we can use.

14
00:01:07,950 --> 00:01:16,340
One of the easiest way to include a short version is to use the commit hash and there's this variable

15
00:01:16,590 --> 00:01:24,270
I commit to short as page eight, and this will give us an eight characters from the commit sort of

16
00:01:24,270 --> 00:01:27,120
from the commit hash, which is quite short and good.

17
00:01:27,120 --> 00:01:33,030
And then we'll be able to identify which committee has generated a specific version on the website.

18
00:01:34,080 --> 00:01:41,070
And using predefined environment variables provided, but it's quite an easy way to do such dynamic

19
00:01:41,070 --> 00:01:42,250
things in our jobs.

20
00:01:42,780 --> 00:01:48,810
So whatever your needs are, it's definitely worth having a look at the variable reference to see which

21
00:01:48,810 --> 00:01:51,840
of these variables are interesting for your specific own cases.

22
00:01:52,350 --> 00:01:55,810
But for what we need right now, this one will do just fine.

23
00:01:56,250 --> 00:01:59,550
So let's take a look on how we can use it in our pipeline scripts.

24
00:02:01,260 --> 00:02:05,460
So in order to change something about the website, we need to take a look at the bills that because

25
00:02:05,460 --> 00:02:11,190
this is where the website is being built and this is where the artifact with the website is being published.

26
00:02:12,330 --> 00:02:16,620
So let's first take a look at what exactly this thing looks like.

27
00:02:17,820 --> 00:02:24,390
So what you can do here is simply type in echo dollar sign and then I can use the variable name.

28
00:02:25,050 --> 00:02:30,090
And when the script will be executed, it will display the value of the environment variable.

29
00:02:31,890 --> 00:02:37,550
But still, this will not help us really understand how we can include this in the fight.

30
00:02:37,920 --> 00:02:46,860
So for that reason, we're going to go inside a project and if we go into source code pages and let's

31
00:02:46,860 --> 00:02:52,320
have a look at the index page, which is actually responsible for generating the first page that we

32
00:02:52,320 --> 00:02:53,250
see on the website.

33
00:02:55,010 --> 00:03:01,760
Now, the idea would be the following we insert here inside a page, a marker, and we'll try to find

34
00:03:01,760 --> 00:03:05,790
a way to replace that marker every time we generate the website.

35
00:03:06,650 --> 00:03:12,200
So inside the repository, you will not have to commit anything, but this will automatically grate

36
00:03:12,200 --> 00:03:15,140
through place every time you build a new version of the website.

37
00:03:15,980 --> 00:03:18,140
So let's write here a new div.

38
00:03:19,310 --> 00:03:20,770
Let's say something like version.

39
00:03:22,860 --> 00:03:25,230
And we can use the mark or something like this.

40
00:03:29,310 --> 00:03:31,020
And we can even make it uppercase.

41
00:03:34,070 --> 00:03:39,590
This is a very simple way on how I decided to create this marker, but there's absolutely no rule on

42
00:03:39,590 --> 00:03:41,840
how you can make it just to know it.

43
00:03:41,860 --> 00:03:44,990
That's a marker and that will be later replaced.

44
00:03:46,430 --> 00:03:53,960
So now when Gatsby will generate the website, it will generate an index e-mail file and the index HTML5

45
00:03:53,960 --> 00:04:00,500
will look exactly like this will include version and then this marker and we need a way to replace it.

46
00:04:01,560 --> 00:04:10,490
Fortunately, unique system come with a lot of utilities and is one of those utilities, as Ed said,

47
00:04:10,610 --> 00:04:12,590
stents for 3M Ed.

48
00:04:12,620 --> 00:04:18,550
And one of the things said can do for us is to replace a string inside a file.

49
00:04:19,130 --> 00:04:22,550
So the syntax for replacing a string will look something like this.

50
00:04:23,660 --> 00:04:29,790
And we use the Desh e flac in order to edit this file in place.

51
00:04:29,800 --> 00:04:31,650
So we don't want to create a copy of the file.

52
00:04:32,000 --> 00:04:36,140
We simply want to use the same file for the output end.

53
00:04:36,380 --> 00:04:44,750
For example, work one in the simple example would be replaced with what tool we use s for substitute

54
00:04:45,290 --> 00:04:49,850
and the G flag at the end for a global replace.

55
00:04:54,070 --> 00:05:00,310
So what that means is that set, we'll look inside the file that we have specified and will replace

56
00:05:00,310 --> 00:05:03,220
overall word one with work to.

57
00:05:05,260 --> 00:05:08,890
Now, let's take a look at how we can replace this inside our pipeline.

58
00:05:10,690 --> 00:05:18,220
So this step has to happen after Gatsby has finished building the website and in our case, the command

59
00:05:18,220 --> 00:05:19,030
will look like this.

60
00:05:20,390 --> 00:05:24,050
So instead of what one, I have used our marker.

61
00:05:25,520 --> 00:05:33,020
And instead of what do I have used the variable that we want to use and I didn't use the global flag

62
00:05:33,020 --> 00:05:37,030
because it's only one occurrence, so we do not need to globally replace it.

63
00:05:38,420 --> 00:05:44,660
And finally, I have specified the location of the file, and that is in public and the name of the

64
00:05:44,660 --> 00:05:46,370
file is index that HDMI.

65
00:05:50,890 --> 00:05:54,090
So let's save this and see how our website looks right now.

66
00:05:55,930 --> 00:06:00,760
One or two, first thing that you will notice when running the built step is that Echo will display

67
00:06:00,760 --> 00:06:03,760
the strength that will be used in our case as operation.

68
00:06:07,700 --> 00:06:13,220
Now, going back to our pipeline, you will see that now the entire pipeline is successful, and this

69
00:06:13,220 --> 00:06:17,300
means that if we go back to the website and we do a refresh.

70
00:06:19,310 --> 00:06:24,470
We'll be able to see that now the version is being displayed now, it will be displayed only for a short

71
00:06:24,470 --> 00:06:31,400
second because actually what gets bidders is that it has some JavaScript and will replace the contents

72
00:06:31,400 --> 00:06:32,060
of the page.

73
00:06:32,360 --> 00:06:35,630
We haven't actually replaced this marker in all the files.

74
00:06:35,630 --> 00:06:41,840
We could do that as well, but we just wanted to see that we have something dynamically added to our

75
00:06:41,840 --> 00:06:42,320
pipeline.

76
00:06:43,790 --> 00:06:49,100
There's one more step that we can do, and that is to change our test to check for the specific version.

77
00:06:51,240 --> 00:06:57,180
And especially interesting is the test deployment job, because we now have deployed something and it's

78
00:06:57,180 --> 00:07:02,290
really important to see that the version that we have built is the one that is available to the public.

79
00:07:02,310 --> 00:07:03,750
That's the one that has been deployed.

80
00:07:04,630 --> 00:07:07,260
So what we can do here is to duplicate this command.

81
00:07:08,460 --> 00:07:14,850
And Carl will not be affected by the problem that we have previously solved because there's no JavaScript

82
00:07:14,850 --> 00:07:17,120
being executed when downloading the first page.

83
00:07:17,130 --> 00:07:18,080
So the index page.

84
00:07:18,390 --> 00:07:21,540
So for that reason, this has absolutely no reason not to work.

85
00:07:23,120 --> 00:07:27,650
So here, instead of high people, we are simply going to use.

86
00:07:29,300 --> 00:07:30,680
The variable from Gottleib.

87
00:07:35,940 --> 00:07:40,880
And that's about it, this is how you can use the predefined get variables inside your scripts.