GitLab Create Editor Group, 28 Jul 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Getting started on GitLab UI with GitLab Workspaces

Description

This is a quick introduction on how you can get the GitLab UI Storybook up and running in GitLab's Workspaces feature

A

Hello, um this is Enrique from the ID team and I'm recording a quick video to show you how you can get started up, contributing to gitlab UI using their awesome free mode development feature.

A

So we recently set up remote development for gitlab UI and it is super easy to start uh making changes in the project without having to set it up locally.

A

So what I'm going to do is to First create a workspace to create workspace for GitHub UI. You can go to the edit drop down and you will see here a new workspace button, I'm going to click here, and this is gonna.

A

Redirect me today create workspace screen where the gilapia project is pre-selected and you can choose a kubernetes cluster where, where to create the workspace, we should select the panoki workspace kubernetes cluster, these uh the one that we are making available for git Latin members to start doc, 14 remote development, so I'm going to create a workspace.

A

And once a workspace is created and running, we're gonna be able to open vs code and it starts contributing to a project right away. This is gonna, take uh probably less than a minute. It's super quick super quickly.

A

um So let's wait a let's wait. A moment.

A

So now the workspace is running um if we click the URL. That appears here in the preview column.

A

We are going to open uh instance of a vs code for the web that is pointing to the workspace and remote development environment that we just created when I say that I trust the authors here and as you can see, we we have the the working file uh file tree of the gitlab UI project.

A

The first thing that we have to do is follow the contribution guidelines line.

A

So let's go to a project and open the written file.

A

Let's go to the quick start development and there are a couple of steps here that we can Skip and we can just install the dependencies using yarn and then start the history book. So I'm gonna go ahead and open a terminal in vs code.

A

And now I'm gonna run yarn uh to install the the project uh the pre-ex dependencies.

A

Is also going to take um a couple of seconds after that we are going to start history book.

A

Now, besides installing the uh the dependencies, this is also compiling the um the SAS files, so I'm going to run yarn three book.

A

And let's wait until.

A

The history book instances um it's running.

A

So now you see that history book is finally drawing and he's running in the port, uh nine thousand one. uh So to open the history of history book instance: I'm gonna copy this URL I'm gonna paste it here.

A

I'm gonna change the the port in the start of the workspace URL.

A

Once I change that number, you can see an unexplore um gitlabs, UI history book and.

B

A

You can start making changes, um also manage your contributions to gitlab UI I hope. This is useful.