GitLab Create Editor Group, 2 Oct 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Gitpod Cloud Dev Environment in GitLab Demo

Description

Taking a look at the community contribution which adds a Gitpod button to GitLab. - https://gitlab.com/gitlab-org/gitlab/-/merge_requests/37985

You can check out Gitpod at https://www.gitpod.io - the Gitpod project is available here: https://github.com/gitpod-io/gitpod

Demo Project: https://gitlab.com/gitlab-org/project-templates/gitpod-spring-petclinic

GitLab Design project MR - https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/2100

GitLab GDK Image MR - https://gitlab.com/gitlab-org/gitlab-development-kit/-/merge_requests/1583

A

Hi, my name is kai armstrong, I'm the product manager for the editor group of the create stage here at git lab, and I wanted today to talk about a community contribution that was made into git lab from the folks over at github and sort of give you a primer on what that looks like and how you might be able to use that for your project.

A

So let me share my screen: uh we'll quickly toss up a little bit about git points, so git pod allows you to build dev environments, but for the cloud it's based on the thea ide and then the github server technology, which is both of which are open source. You can check those out on their their project pages, maybe put some links down below in the video. But the idea is very similar to vs code. It operates much the same. It can use some of the same extensions.

A

um So it's a real familiar environment if you're using vs code locally and then gitpod allows you to orchestrate these and run these online they've got a sas service or you can self-host that so we'll we'll take a look at it now, so uh I want to start a new project and the reason I'm going to start a new project is because git product can be a little bit of a challenge to get started with for some users, and so it requires in some cases a specific gitpod configuration file.

A

That shows you um what image needs to run. Startup commands need to run what ports need to be open for the application to work and those kinds of things, and so we've added a new template. This will be available in 13.5. The github feature will be toggled on in 13.5 for everyone it's online on gitlab.com. Already.

A

This template should land on gitlab.com for general availability. You know later today, early next week, um it's in gitlab next now. So, if you're using our gitlab next program, you can take a look at it now. So um I'm going to click, use, template we're going to create a project so we'll call this demo 3, because clearly I've made a few others and we'll click create. So this is going to duplicate a project that the github team created that is pre-configured and ready to go.

A

We've built this in as a gitlab template to make it easy for you to sort of get a feel for this and what happens um sort of with the get pod features on you'll notice that there's a new button up here. This could defaults to the web ide. But once you change and you decide, you want to use git pod, we can change that over the github button.

A

You'll see that they've added some badges to this project that show you that their skip setup is automated, that you can open it in gitpod and then we'll quickly look at this file. This is really the special file for github projects, which is the gitpod.com.

A

So this shows you what ports need to be open, what happens when it's open and then any startup tasks that need to run in order for your project to compile or build successfully. So we'll go back to this and we will click launch, and this will be the first time I've launched it. I've reset some of my permissions and preferences.

A

I haven't reset my oauth, but um when you launch and try and use github for the first time, um we just want to make sure that you know that, and so we've there's an additional user preference that you'll have to enable by clicking enable we enable it for you and we sort of bring you back to this page and you've got to do that again.

A

uh We're looking at that flow to see if we can make that more clear and do that, but just as an fy, that's what will happen and actually the first time you load into git pod you'll have to authorize gitpod to use your gitlab account, and so there will be an additional sort of olaf step that you have to perform for that.

A

So let me click the gitpod button and you'll see it's starting up. It's going to be a little bit faster for this demo than it would be, I think, for in normal cases, because this docker image was already pulled into my name space, so I already have a local copy of it. um It's so that's a little bit faster. uh If you were starting fresher, you get a large docker image or a large build.

A

Hence that might take longer um and so you'll notice that that booted pretty quickly and then you'll see down in the bottom down here in the terminal. It's instantly kicking off all those build tasks which is going and fetching the maven project, the maven dependencies and building building the project like we've asked, but you'll also notice up here, I'm already able to sort of look at the code. um This is a copy uh or this is not a copy. This is the readme.

A

uh So I've opened this file in the browser I can browse around and we can go look at the source and sort of see what else might be in here that we wanted to take a look at so we could look at some of the css and we could see you know, background colors that are defined in the border colors and make some changes there if we wanted to and then just like, just like our normal editor. So it's really nice to see sort of this is a very familiar environment.

A

You can also configure the the ide with any extensions or other things that you wanted. So if you wanted to uh and then an extension you could have that preconfigured and boot up. I could actually go ahead. Maybe while this is doing this, I can see if we can, we could add an extension now.

A

um I might have to actually do that through.

A

Yeah, I think you might need to add extensions through the build process. So, oh there we go. We can search extension, so um the gitlab extension is published in the openvsx registry. So we can see it here. um It's got five stars and 830 downloads, so we'll install it and- and you can choose, we can now make a decision. We can install it for this project or we can install it for the user, um which is good so like as a user.

A

There might be certain extensions that I want sort of in all the projects that I use in github as a as a project. There might be certain things that you want installed because of the language or the dependencies that are available so um I'll install it for all of it.

A

It's installing um I'm not going to go authorize it because I don't want to go grab an access token, but you can see down here that this works very much like it would in vs code, where you get the git lab extension, you need to have to authorize it and then you'd be able to see over here issues and merge requests and all kinds of stuff like that. That was assigned to you, and so you get that you know sort of extra level of integration uh with gitlab.

A

While this is also downloading I'll point out a couple, other projects that are given projects that we're already sort of working to see what we can do with gitfund and how we can help enable our users here, and so one of those is design.gitlab.com.

A

So this is where we store our design components and our design libraries and how we track design sort of across the organization, and so uh one of our designers contributed the initial startup files and you'll see they had to create a get.gmo file on the project, define what ports needed to be open, what tasks needed to run, but now this project. If I were to go here and I were to click the fun button- that's been this code's been merged into master.

A

um I would be able to launch this and get get pod and have you know, sort of that complete running environment, and so that's really cool that you can um you know it's just a few lines in this file and once you get it set up, then anyone can easily sort of just click. This button launch the environment and be ready to sort of contribute to that project without needing to go through. You know any of the steps that might.

A

Involve getting started locally like cloning, the repository installing making sure you've got yarn installed, yarn, install yarn start and then opening this local host. All that can sort of eliminate it away, and then you can just click the browser tab and do that from from any computer versus making sure that you've got all those dependencies installed.

A

The other one that's exciting is we're working on this for the the gdk, and so that's the gitlab development kit and so for the gitlab development kit. The same thing we're working on building, it's obviously a much more complicated um setup than some other simpler projects, but um for this we're building a new registry image, so we've got to have a new docker image that built into into the gdk that gets built. That has some of these commands run that we need run for gitpod.

A

um It's based on another gitpod image, and so we've got to do that and then it's there's a ton of startup commands that have to be run, and so we've gotta all those have to get packaged up into this docker build to get started and so they're working on the image. Once the image gets done, then the gitlab project will also have some configuration.

A

That has to be done in order to do this, but we're excited to sort of see if that, what opportunities and what new workflows we can unlock by making it easier to start a startup gitlab and actually contribute to it without needing to sort of go through that that setup process.

A

So, let's check back into here, uh we can see that yeah up here about the time we pushed away it sort of finished uh piling dependencies and then it built successfully, and so it's just sort of running here and so what's really great is now it's running. We've got a complete preview of the application here, so we can not only have access to the code and the files, so we can make changes and edits. We also have the application running here and it's you know fully functioning application. I can do a find owners.

A

I can you know everything. That's built into this application. I'm able to do. I could add a new pet, so um we could add a dog.

A

My dog's name is watson, so we'll we'll just add, watson watson was born last year on that day and it's a dog so.

A

There we go and I've added my dog to uh to harold, but that's all right, so um you can see the application is sort of fully working here. We can go and find you know vets whatever this application may do. We can also pop this out and see it in a full browser. Tab which is, could be nice and convenient if you wanted to work.

A

So all kinds of you know really great things that you can do with this uh and we're excited to have the github folks team, um contributing you know these features and continuing to work on this and improve this and sort of seeing what we can do with it so um encourage you to check it out, it'll be releasing fully in thirteen five on gitlab.com. The instant settings are already enabled to work with gitpod.io if you're self-managed, gitlab you'll have to toggle this on and either configure for gitpod.io or run your own gitpod infrastructure and self-management.

A

So that's um there's some options for that favorite box. For that this, I believe, that's a number of documentation as well, how to at least start that process and look at that um so feel free to take a look. Let us know what you think: um keep an eye out on the gitlab gdk project, if you're interested in contributing gitlab, that's a going to be a great way to get started with that and um look forward to it in 13th thanks.