GitLab 12.9 Release Kickoff, 26 Mar 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: GitLab 12.9 Live Preview Improvements and possible Future Hosting Paths

Description

In GitLab 12.9 GitLab.com started hosting the required assets for Live Preview in the Web IDE - https://about.gitlab.com/releases/2020/03/22/gitlab-12-9-released/#gitlab-hosted-codesandbox-for-client-side-live-preview

This video shows how by using a pages project and modifying a file in GitLab we can host the required assets with GitLab Pages.

Pages Project: https://gitlab.com/phikai/pages-sandpack
File to Change: https://gitlab.com/gitlab-org/gitlab/blob/master/app/models/application_setting_implementation.rb#L357

In a future iteration we'll make the URL configurable in the admin settings: https://gitlab.com/gitlab-org/gitlab/-/issues/208161

If you want to get in touch about this change and what you might need for your organization to benefit, you can find my email https://gitlab.com/phikai - you can also comment on the projects or open issues if you try this out and have any issues.

A

Hi, my name is KY Armstrong I'm, the product manager for the editor group, in the create stage of the top cyclic etiquette, lab and I wanted to talk about a change that we made in twelve nine to how we're serving in code sandbox and what that might enable everyone to do, and so I'm gonna go ahead and share my screen. We're gonna walk through a few things. We've got going on and then kind of what we're thinking might work in the future. So let me pop this up.

A

You perfect. So in 12 nine we read we started. Kaleb calm is now hosting the assets required for our live preview in the web, IDE, which is powered by code, sandbox and so I'm, going to open my demo project here in the web. Ide I'm also going to open my developer tools, because this will be how we look at this.

A

So we're our own developer tools, check the network, request and I'm gonna go ahead and click on the live preview icon right over here which will launch our client-side live preview feature, and so, when I do that, you can see that this is now loading all of these assets from sandbox product, a web static, dotnet, and so that is get lab now hosting these assets and so party. Twelve.

A

Ninth, when you loaded this feature, we called these directly from code sandbox, which was great but did introduce some concerns for people who might not want to send their their project, or even you know, kind of inform, produce a message that project existed so now get lab. Comm is hosting that we've enabled this on. All of you live comm, so it's enabled for public and private projects in self manage instances. This feature still has to be turned on.

A

If you were to do this in a self-managed instance, you would reach out and you would talk to the get lab composted assets. We think that's a really good first step and enabling self-management since is to do this to at least retrieve some of these packages from a unknown trusted source which is get web.

A

One of the things we're thinking about for in the futures. How do we enable self managed customers to deal with this in a way that they might be more comfortable with, and so what I'm gonna do is I've got a couple of things that are going on over here. So one of these is my terminal. Over here, I've got the GDK, which is good, loves development. Kit running I've got a custom branch here. That actually is not even a branch I just want to find a file in my local master.

B

A

Get this started we're gonna load. This take a minute. Let me fire it up over here, so we can see the instance should be the right address, we'll just let that go, and then we see that come up and over here in my master, what we're looking for is a change that I've made to a file to change. Where we talk to this there's kind of two things: one. We put that in there's a vision configuration that you doesn't have an interface but there's a configuration, so you can set the URL.

A

That's how we set the URL to get a version of these what's more interesting is I have changed that to a github pages site that I'm hosting on github.com, so I'm hosting is the project I'll link it down in section below this video, but there's a comment: there's a project that I'm hosting that has a runs, get lab pages and has a basically a build script. That goes and gets the latest version of the packages that we need puts them in the public directory and then host them on get web pages.

A

I've got them running on a custom domain that way they're available over HTTP and so I've modified this tab. So this is the file that I've modified. So it's.

B

A

You can see in my version of my local version you get all this is running on custom domain of mine, and that way it's available, and this is going to change where we talk to this pages script. We come back over here. This is doing everything and running it in pages and if I go to the domain, that this is close to, that.

B

A

Can see you can't tell if it's sandbox, Pro sandbox and it's running, you can see the icon here and otherwise there's nothing to see here. So it's interesting about this is now if I go to.

A

Log into the gek here, so this is my locally running version of gitlab, which has my modified file down here and so wait for this to load. I've got my one-page demo project in here as well.

B

Should we get the right one, you this'll.

A

Work so we'll open this in the live ID as well.

A

And let me just open the Humber console again, so we can watch this at the network. Console we'll go ahead. The live previewer good.

A

You can see is right now are requesting from locally, and then you start seeing it request from my domain, which is hosted by get web pages.

A

So it's pretty interesting about this is this allows us to leverage get web pages, it's not installed or turn on by default out and get lab put in library web pages to then host required code sandbox scripts. So it's sort of self-contained which then would enable the live preview features of Kaitlyn so part of what we're thinking about here for future iterations, as we continue to work on this feature, is adding you know. Obviously we need to add a configuration field for configuring. The domain where you have this hosted.

A

The other possibility is that we include you, know this project or a project that the engineers put together. That gives us to the right spot in terms of kind of enabling this on pages, we're also gonna work on providing documentation to do this, wherever you might want to host. Essentially, the documentation will be a lot of you know, sort of this script. This is really what you need hosted somewhere in a static. Good point forget lab: we use it's in a Google bucket file bucket and then our CDN is serving it.

A

You could do this with an Amazon s3 bucket. You could you could host this anywhere, really that you could access a static and a root folder on a custom domain. So that's what we're thinking about for code sandbox, if you're interested in this in the future or you've, got some ideas about how you could make this work in your environment where you've got different requirements or you might not have internet access.

A

Let us know feel free to reach out to me either open an issue and get lab or you can find my email and might get web profile, but I just wanted to show off the a change in 12:9, which think is a really important change, and then we're definitely going to continue to iterate on this a little bit more and try and make this a little more user, friendly and self-image instances. So looking forward to it and got any feedback, please let us know Thanks.