GitLab Technical Tutorials for Product Designers, 10 Jan 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Setting a Simple Project with a CI Configuration in GitLab

Description

This is a guide on how to set up a small project that contains a static website and serves it through a review app every time we open a merge request.

This guide uses:
- https://glitch.com
- https://zeit.co

The boilerplate .gitlab-ci.yml used in this video can be found in this snippet: https://gitlab.com/snippets/1928598

A

Hello, my name is Juan Ramirez I am a product designer in the runner and testing teams, and what are we going to be showing today?

A

It's a QuickStart guide or like a demo on how to create a smaller project with a CI configuration, and the goal of this is that anyone that it's new to give that some employee or someone who's completely new to be lab, I supplied from, can get idea on how you can set up CI for basically anything which is one of the greatest things about the get last platform and another reason or another goal for this.

A

Is many people sometimes find find themselves trying to create small projects just to test out things, so these should probably help that people as well when I really want to test things. So this is gonna, be pretty simple. What we're gonna be doing is we're going to be using a sample project, a test project with nothing inside the project and then we're gonna find something to do inside this project while we're gonna put inside.

A

This is static side because it's the simplest fastest way to show something, and additionally, we're also gonna set up a review up. So we can see what static site looks like every time that you build the project to the develop CI. So with that being said, let's jump in into into the into the task at hand. This is gonna, be very simple, so I'm gonna start by creating a project, but I already created a project. So it's just a sample project. Nothing! Nothing!

A

Fancy here, I called it pretest or two and we're gonna need the project, because this is the project that we're gonna be using to set up our CI and testing and like hosting these static site. Alright, so the first thing that you wanna do it's basically bring up your terminal and then basically what you wanna do.

A

Let me just move back, so you want to create. Are they rectory to clone these repoint right, so I'm gonna create something called test, repos and then I'm gonna CD into that?

A

Alright? Okay! So now that I have that I'm gonna clone this product, so I'm gonna just basically create this template basic project that I created before I'm, just gonna clone these copy, the URL for SSH and then I'm, just gonna clone and I'm gonna paste this here, and this is basically gonna boy clone that the project from github into my machine and now they are both seeing my local with my upstream. So we can actually push things to the out later so that that's pretty much like the initial setup.

A

Now, as I mentioned at the beginning, the idea is to just set up a static site, so we're not gonna deal with that, like we're. Just gonna basically find something to already hold something. There exists like a good place to find things is glitch comedy that come it's a playground where people who one build HTML, CSS and J's apps. You can do it's pretty powerful. You can do a lot of things on one good thing that it has. You can actually clone these projects as good products as well.

A

So that's gonna make the process of like moving something that we see here here to our develop project very easy. So I was looking earlier at this one called mountain ridges, which is just like a very basic project that has like a J's file on HTML file, some stylesheet, some some some some stuff going on, and it's kind of a cool project because they have basically like some cool things with colors and whatnot.

A

So I thought that was pretty cool, so let's basically use this project so the way that you copy this project, like did you download this project as a deep project? It's big thing! Basically, you go! You gotta, go you gotta sign up first, actually, how I use these the way that I'm going to use it, but once we're saying that we're going to the project that you wanna clone and then, like you, click here in remix to edit.

A

This is basically gonna clone it. On my Kara, like own, correct, like on my profile within bleach and now what I'm gonna do it's basically I'm gonna find a function already here: that's skied import and export I'm, gonna click that and there's a URL again I give you RL for B. So basically we want to copy that and we want to clone that as well. All right so I'm going to deter me now.

A

We already have the quick tester clone there, so I'm gonna clone this one to eat, clone and I'm gonna call that guy and that's gone already. So now we have the two projects: the project in get lab and the project that I just got from glitch that we're gonna move into get lab and that we're gonna use to build or review up. So the next step will be basically to move those files from one to another, so I'm gonna, open the folder and then basically I have quick tester here.

A

I have something called aztlán pal stomp poppy seed, which has the project but I, just clone I'm gonna create a folder here called source and then I'm gonna move these guys into big tester and I'm gonna move everything except the license of the readme to the store, so these three guys in fear source going on there. This looks cute so now the next step will be going into that folder.

A

So I'm gonna go into quick tester and then basically move all those files I want to commit that and I want to push that to get lab. So the way to do that would be just by doing it add and then I'm gonna do git commit message and then I'm gonna say like quick in it.

A

Alchemy dad and then I'm gonna give who these to my origin, my, which is when I like push it to my remote, so I did that and now, if I go back to my good luck, project I shall have all those files there. Here's the last commit pretty neat pretty neat, pretty neat that looks pretty good alright. So now we have this thing going on here right when you see it in when you preview it in glitch.

A

Basically, this is loaded and started up what it's been its serving in static app. We want. What we want to accomplish with it lab is that whenever you push or make changes in that project, it builds something similar to these. So you can see the changes that were made making to the a bright. So for that we're gonna use the ACI CD, the built-in see LCD of github, and this is very, very simple. I'm gonna be using so on.

A

Some code already have for these that I made before but I'm gonna kind of explain that in a little bit. But what you want to do is basically click here on setup see ICD. That's gonna prompt you to create a GUID lab, see, I am on file and we actually wanna apply that template from the beginning. So no it would be the appropriate template for this, because basically, this has like some JavaScript things that we need to do like the process that I'm gonna explain a bit, so you want unknown environment right.

A

So the way to do that is by providing an image and telling what image you wanna. You want to clone for this environment, so we want to do the the node image the latest one. This thing you don't need to worry about these. You can delete these some matter of fact. You don't need this either way it cancel because we're gonna be writing our own lead, lopsy IMO file, so like the only relevant thing until this point is the image node. Ladies, we definitely want to do that.

A

Okay, we definitely do that and we definitely want to base anything that we're gonna do after these, on top of these node image all right. So that being said like the next step would be actually setting up. What's gonna happen here right, so there's a couple of things that you want to define in this file. So one thing the stages so I'm, just gonna use one stage here and I'm gonna call a review.

A

This is just a demo that we're creating that did some review up. So that should be enough.

A

One interesting thing about it get up see is that develop. Ci usually works with a lot of variables that are happening. There are coming from like the environment variables. Are you restoring your project or like that are coming from other places and those places sometimes are the file itself so like from disable? What we're gonna do here, I want to define a variable here that it's called repo name.

A

You repo name it's just kind of like something that I'm using as like as a placeholder to the configuration that I'm gonna do in a little bit. You don't need to care too much about this, because what I'm, gonna copy and paste in a BC speed is just like boilerplate code and I'm gonna explain it, but you don't need to worry too much about it. So the first piece of code, I'm, gonna copy and paste, is the first configuration for a job, so the first job that we want to set up for this.

A

It's a job call start with you and start with. You have some things going on here. So basically it's a job that it's gonna run under the review stage and it's gonna execute these commands. There are like note commands, so that's why we like are working on top of a note image. You don't need to worry about this stuff, basically like what I'm. What we're doing here is we're using a platform called site and psyches.

A

It's a static hosting platform that allows you to like push websites like like the ones that we are kind of like when our hosts or like the one that we have here. Basically so we're gonna use that to host our review ups, you don't need to worry about these.

A

Just boilerplate configuration I'm, gonna, add a snippet with all these scripts, but basically, what's going on here is like we're installing the node tool belt, which is required to like configure like the URLs that we're gonna be pushing to and like setting up things inside, and that's why we set up this repo name, because we will need it for like setting up the environment here and like we setting up like these alias here so like we needed the variable and there's other variables that are actually coming from runner itself.

A

So like this one is coming from runner. You don't need to worry about that. Those are things like there are reference it here, but like are coming from the runner itself like that, are very pretty fine by the runner and there's these now token, which is something that we need to create ourselves inside, and we also need to store these in our github CIA Yama file.

A

So, ok, now that I have that I'm, also gonna copy and paste an older stage that I have already set up here, which is the stop radio stop review, is gonna, be another job which is a manual job that it's gonna, stop the review up. Whenever, like we review something we we want to round this job to stop like that review up like basically destroy it, so it's not consuming resources, and these two things are kinda, basically, third, tethered to each other through like this. On stop stop reviews like basically to stop this environment.

A

We're gonna call this on stop, which is gonna, call this job, and it's gonna execute these things that basically destroyed that review site. So we have those two things going on here that basically it's already a full ballad get lab CI configuration I. Don't think there's anything else that we need to define, except in out talking they're now talking, there's two ways in which we can define that we cool actually right here, like now token and then I go and create a token inside and copy and paste that here, but that's not recommended like.

A

Usually this would be like a security leak. We will be showing credentials in a place where they shouldn't be shown, so we're not gonna use that we're actually gonna use the built-in variable functionality of the CI, which allows you to set up sensitive data and credentials and don't lick them here in the get labs, yeah Mel, so I'm going to explain that in a bit. But the first thing that we need to do is create a token, so we can actually set up that. So do that I'm just gonna go to site.

A

You will need to create an account inside as well, but when you have your account inside, you can go to settings tokens and then create and then you're back here that token that is called testing one or whatever you wanna call it. And now we have this token and, like you, got a copy and paste these and like once, you close these you're, not gonna, see this ever again, so make sure that you, like complete all the steps before closing these and I, was talking about setting those environment variables in a secure way.

A

So the way to do that is basically going to settings. I'm gonna commit this changes first commit and then you're gonna go to settings and you're go to CIC descends and in CI CD settings there are variables here. This is the section that you wanna use, 1, expand these and then actually we already have one set up here.

A

I did this earlier, but basically one of the wheels like basically now token, and then you want to basically copy and paste value there and you want to save the variables and that's pretty much it so now, whenever we're running our CR and you go to the geet lopsy IML file, the github CIA amo file is gonna, get these noun token from that variable, a storage secrets or that we have on the other side and they you're not like even sensitive information from the file.

A

You can still define variables here in the file and that's okay, but only do it when it's things like the one that is set up here, which is not very crucial like it's not very critical in terms of information. It's just like a basic piece of information.

A

This interesting it says that these configuration is in Bali all right. So let's fix it. There's something that's invalid! We will see what it is, so you edit these, usually when you copy and paste these things, there's small errors like in the kind of like white spaces and stuff, like maybe things, don't work well, I.

A

Think I know what's going on.

A

Oh never mind they even tell me the error here: I wasn't even reading well, so the error is very basic. I was like not using the right stage, because I copy and pasted this was coming from another configuration that I have here and in that one the stage test. What we want to do is review.

A

We just commit those changes, and now it's valid, so that's good now that it's valid now. Well, what you do is that this it's actually test that this actually works right. So don't the way that this is set up is this is going to work in any branch that is not master, so the issues way to do that is just to pray down anymore, so we're just gonna go here and we're gonna go to source and then I'm gonna, open index.html file and then I'm gonna go to web ID and I'm.

A

Just gonna actually believe a couple of Mahdi's here.

A

So these work and then I'm gonna commit this and then I'm gonna create a new branch. This is gonna call me called delete, emojis and.

A

Then I'm gonna station commit and then I'm gonna meet this merge request, which is gonna, definitely run the pipeline. Now the question is: is: is it gonna work or not? Hopefully it's gonna work because we copy and paste the configuration.

A

So what should happen at this point is this is gonna run the pipeline. This is gonna, execute all those steps that we had there, which is basically talking to now, like the analog service provided by site, and then it's gonna like do all these transactions and then it's going to upload the the website into the platform and then it's gonna serve it through a URL that it's gonna be displayed here in a minute. So we can actually check that here.

A

If you go to pipelines this one is running, we will start review and it seems that is running like it's doing its thing there, it's deploying the app it's working and it says that it's finalized is ready for deployment. I think it's already fully deployed. It says that the job should seal it. Okay, so that's good news. Now, if we go to the merge request that we just created, we should have in these delete emojis a review up and there you go. We have a review up.

A

So if everything went well, what's gonna happen is that if I click view up here, it's gonna open an app. That looks exactly the same as this one, without brief, very minimal differences that I deleted some of these Mountain emojis. So it should work exactly the same with the difference that there's gonna be like three or four less emojis. So, let's see that if that actually works, so you up and there you go, it works. So it's a sack same app.

A

Now, it's not being sure to bleach is being served through my own instance of now site.

A

That's why I set up the token and all the sudden you saw and, as you saw, here's my change they're like the last month, Mountain emoji is going on done in the one that we actually clone from the age. So that's pretty much it that wasn't that long and I basically show you how to set up lead lap CI from scratch for a static side, but there's so many more things that you can do with this. You can go ahead and basically, basically play with your pipeline.

A

You can like start, can like brainstorming what other stages you can add to these there's many things that you can do to experiment in terms of testing and security for whatever you're trying to do with gitlab either, because you are like trying to learn in terms of the work that we're doing a deed lab or if you are on contributor or community contributor, who is trying to understand how this works. This should be helpful.

A

I hope that it was clear, but if it wasn't clear, I'm gonna put also my email address in the description of the video, so you can reach out to me. If you have any questions, thanks for watching bye,.