GitLab Incubation Engineering, 30 Sep 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Incubation Engineering Jamstack -- Weekly Demo September 30th 2021

Description

https://gitlab.com/gitlab-org/incubation-engineering/jamstack/meta/-/issues/7

A

Hey I'm janice and I've just started in gitlab's incubation engineering department working on the jumpstack. This is my first weekly update, video, so hello and welcome.

A

There's a few areas. I'd like to work on in terms of improving the experience that jamstack developers have with gitlab.

A

That's a gitlab pages is an amazing feature for developers who want to deploy static sites with frameworks like next next gatsby or 11t. So I want to build on that. One of the things about pages is that the developer experience right now isn't too great. So the first thing I've been working on is to improve the onboarding experience. If you open the pages site for the first time in a project, this is what you're gonna see you'll, see a dialogue saying that it isn't configured yet and it'll. Send you right off into the documentation.

A

So the thing with pages is that its build pipeline is working from the github ci yaml file, which is great for configuring all kinds of details, but there are a lot of developers who may not be too familiar with that concept. So my goal is to flatten the learning curve on this.

A

So what I've been working on is a get started with pages site that will show when a young project doesn't have a pages deployment or a gitlab ci yaml file. Yet- and this is how it's looking right now, instead of redirecting you away from the pages site, you can remain on this webpage and get guided through building that yaml file.

A

On the left hand, side, we have the three most important settings that need to run to build and deploy an application.

A

The idea is that, instead of selecting a template that may or may not be available for the framework, the user uses we're using open input fields where the user can configure almost all common javascript frameworks and non-javascript frameworks.

A

In a later iteration, we could pre-fill those fields with some sensible defaults, but for now the effect that this approach will have is that it is just extremely generic.

A

So in our example, I input an installation command like npmci or, if I'm using yarn, I could be using yarn, install and see how this updates the yaml file on the right hand, side straight away, so give the user a great feeling of where they would make those same inputs uh inside the file.

A

Now we're adding a build command. This is a next application, so the build command is like npm run generate the nice thing about this is this is a source editor, so I can make some additional changes right here, even beyond what the input fields offer like adding a second build step. Npm cache cleans, for example,.

A

Once you're done, you can commit this file straight from this page, add a commit message, select a branch and done.

A

Obviously this needs a little bit of polishing, but this is a nice low effort, entry to the world of gitlab ci cd, and I hope it makes pages just a little bit better yeah. So this week my goal was to build a high level prototype I'll work on I'll work more on the details from next week onwards.

A

Until then, I thank you very much for watching and see you next week.