GitLab Incubation Engineering, 18 Jan 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: What can you do with Server Runtime Part 3 - Workspaces for Designers

Description

I wanted to do something new this week. I wanted to take the existing Server Runtime / Remote Dev architecture and see what we can do with it. I will mostly be making changes to Devfiles in these updates and therefore these changes should work both on DWO as well as Server Runtime.

This is a continuation of the "What can you do with Server Runtime Series?". This is **Part 3 - Workspaces for Designers**. In this example I create a workspace that runs [PenPot](https://penpot.app/). PenPot is an excellent OpenSource collaborative tool for designers. The PenPot architecture consists of several components including the frontend, backend and exporter (written in Clojure) and database (postgres) and a broker (redis).

The Devfile for this project can be found [here](https://gitlab.com/gitlab-org/incubation-engineering/server-runtime/penpot/-/blob/main/devfile.yaml).

0:00 - Introduction
1:05 - Devfile overview and creating a workspace
2:25 - Authentication
2:49 - Penpot

A

Hi, everyone welcome to another update from the server runtime sag for the 18th of January 2023. uh this week. I continue the series: what can you do with server on time? So this is part three of the series in which I talked about workspaces for designers.

A

um So recently, I came across this excellent, app called penpod, which is an open source uh app which for designers, basically it is like figma but open source uh it. It's got great design components. It's got a great UI, look and feel and everything so real time. So I was wondering whether I could incorporate that into our workspaces architecture. So penpoint itself has got a pretty complex architecture consisting of microservices it's written in closure and it's got a front-end. The back end. It's going to export the service to export to various formats.

A

It's got a databases postgres, it's called broker, which is redis. So it's quite a complex app and you know the four or five components here um so um so I was wondering whether I could actually go and incorporate this into a Dev file and it was a bit more complicated than I thought. It would be I'm going to GDK and go into this project.

A

I'll show you the def file uh here. So there's a def file which I created for penbot, which consists of a front-end, consists of a oidc provider so that, because we're already authenticating in the workspace needed something that could stub out the existing oidc provider needed by Ben bot I got redis and postgres in the back end a number of environment variables, an exporter app I also needed to create a bunch of custom attributes so to extend the dev file standard.

A

In order to support this, for example, that file doesn't support volume subpot, so I added an attribute for that. So I can inject a volumes up path um because the multiple components in pen pod each component needs to recite its own directory, and so I had to do that. I also needed to inject public Uris into places, and so that's what I've done by creating this inject URL attribute as well. um So uh so that's the customization that I had to do.

A

Do the dev file standard to actually make this work, but once this is uh once that's done, I can go ahead and create a workspace for band board. So I can go ahead and say open workspace, selected, ref I will not select an IDE because I pen part in a way acts as an IDE for us, so I can go ahead and say, create workspace and just wait for a few seconds for the workspace to start up.

A

So my workspace is actually running now. I can go ahead and open up. The workspace I will authenticate now. Pen pod by default needs some authentication. I've created a sample open ID provider with just access stub, so that I can log in as soon as I do that it automatically authenticates me into penpot and ask for a account creation, go ahead and do that and now I I have access to penbot, so I can go ahead and if I wanted to create a team, and things like that, I could do that immediately.

A

uh But what I'm going to do is is uh is actually go and just import an existing kit. uh So I'm going to just go ahead and import. This wireframing kit, which comes with penpod and I, can open that up as a draft again you'll see this. Has this wonderful design experience where you've got different layers and you can explore so I've got components here to explore. For example, I can have a look at those uh edit them, as I would in pen pod it's real time, so I could collaborate with multiple people.

A

So if you allow sharing of workspaces with other people, we could enable such experiences. You can also see a wireframe which has multiple screens, and this is a flow, so I can actually run the flow um and and and click on components and show their interaction. So again, pen part is a great open source project that enabled all this so we're able to successfully wrap penpot in uh in a workspace. Now I can go ahead and actually download a pen bot file if I wanted to so that I can use.

A

This I could take this wireframe and share it with people. I could also go ahead and and Export it as an SVG.

A

That's it for this one. Thank you for listening.