GitLab Create Editor Group, 29 Apr 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Investigating images issue with Live Preview in Web IDE

Description

https://gitlab.com/gitlab-org/gitlab/-/issues/197206

A

So we're gonna walk through some research on this issue. We have a live preview feature in the web IDE, but if you use relative URLs for like loading images, all those images don't work, so we're gonna walk through why that is and why this is a interesting technical problem. So here I have the web ID running locally I have a little static, HTML page, where I'm referencing, a image, I'm gonna load the image up.

A

It's Alice before she's waking up from her dream and let's open up the live preview, all right things are happening and you'll notice that the image is not there now I think I left the console log for I did okay for what we send to the manager and what I want to emphasize is that we do send to this code, sandbox manager, our image file. So how comes not working? Is it a bug on code sandbox? Is it something that we're not sending correctly?

A

The issue is a little more involved in that. If I inspect this and the way that the this client-side sand pack library works is it's hosted the it hosts some assets for loading up these this iframe and these different and then injecting it with different HTML and stuff from here. All that comes out is static and there's nothing new, that's being generated per app, there's a lot of bundling logic that gets dropped into this iframe. So the source of this iframe is our get lab sandbox code sandbox host.

A

So if I go to the body of my site here, you see them loading this image. If I go to view that image, let me copy the link to the image.

A

Let me do that: I'll, open link in new tab see here's the image I'm trying to load, but look at the host, of course, that image isn't going to be there. This is something we're using to host those code. Sandbox assets, not this specific app.

A

So this whole solution, it's questionable. If we can even use this code, sandbox bundling library to have it behave the way we expect, because even look at this HTML HTML doesn't match actually here what I'm sending it it's it's a little bit massaged and that's just the nature of this sandbox library. So it leaves to beg the question: how come it works on code sandbox, so I opened up Kies cool static, HTML project here, let's just refresh it just for fun,.

A

So here we have all the files. We have a cool HTML page, that's making references to different images, as you can tell, and it works. How come it works if I go to inspect the element and I go to the iframe I see this has a different source, and this is a significant difference between how that embedded code. Sandbox thing works versus this here.

A

I can actually just visit this source and I see my application, so what's happening the way code sandbox works here is it's uploads all of these assets to some sort of bucket and I have a third proxy, or it's an individual bucket that is now accessible through this unique host. If I start making changes, I think it's gonna change my my host, let me see if I can save this, did it. Let me save it.

A

Anyways, oh yeah, you see and now I'm on a different app, and this whole thing has changed now because I kind of forked it, but that's how all these things work nicely in integration is because these assets are hosted uniquely per app quote unquote over here we don't host assets here at all we're sending raw data to a bundler, which is then writing it to this iframe.

A

So it's an interesting problem of why there's disparity between this embedded code, sandbox versus the native code sandbox, and let's check out the comment for lands of action thanks for watching.