Blog Insights How to make small changes using GitLab’s Web IDE
Published on: May 28, 2020
4 min read

How to make small changes using GitLab’s Web IDE

A quick three minute demo shows how teams can deliver better apps faster using GitLab CI/CD.

web-ide-cover.jpg

It’s not enough to say something is quick and easy. To have a better understanding of some of the benefits of using GitLab CI/CD, it’s much better to show you.

In a short video, Itzik Gan-Baruch technical marketing manager, demonstrates how to submit a code change using GitLab Web IDE. In three minutes, teams can submit a code change and commit it, trigger a CI pipeline to scan for any errors, and ship the updated application to users.

Getting started with GitLab Web IDE

All code that gets automatically tested and deployed to production has a human at its source. In GitLab 10.7, we released the first iteration of our Web Integrated Development Environment (IDE) after observing how non-developers struggled with editing multiple files and committing those changes. Since we believe that everyone can contribute, building an editor that was integrated with GitLab that made it easier for anyone to contribute seemed like a natural fit. To access the Web IDE, just click the button from any GitLab project.

Web IDE

The Web IDE button

In this simple project with a job application, you can use the Web IDE to make a code change and push it to a feature branch. Select the file you would like to change from the menu on the left.

Selecting a file

Selecting a file from the Wed IDE

Once you’ve modified the text in that file, add a commit message and create a new branch. Click Commit to create a merge request.

Commit

Commit to create a merge request

Your commit generates a merge request, and from here you can add an assignee, tie this code change to a specific milestone, add labels, or add any additional information regarding the change.

Modify merge request

Submit merge request

A new continuous integration pipeline is triggered automatically. Click on the pipeline to see the stages.

Pipeline

Click on the pipeline from the merge request

In this project, the pipeline needed zero-configuration because it was generated through GitLab's Auto DevOps capability. The pipeline has stages and a few jobs within each stage.

Auto DevOps pipeline

A CI pipeline automatically configured with GitLab Auto DevOps

First, it builds a Docker image for the code and pushes it to the container registry. From there, it begins tests and scans jobs that run in parallel to help speed up the pipeline.

Pipeline jobs

Click on a job within the pipeline stage to get more information

By clicking on a job within the stage, you can see what happens.

dependency scan

Dependency scanning details

Once all tests are completed, all test results will be added to the merge request that was created. The merge request is really the key to using GitLab as a code collaboration and version control platform. It’s simply a request to merge one branch into another.

merge requests

Merge requests for this project

Review Apps are a way to visualize the changes that were made. Click View app once the pipeline has completed to access the staging environment.

Review apps

Select View app to access a staging environment once a pipeline completes.

In this environment, only changes that were made in the merge request will be displayed. This link can be sent to others so they can view the changes from a web browser.

staging environment

The Review App for this project

From the merge request, you can see the test results, including changes to code quality and the security scans. This scan detected 20 new vulnerabilities. If you’d like more information, just click Expand on the right.

pipeline test results

Pipeline test results

Once the results have been expanded, you can click on each one to get more details.

SAST scan

SAST vulnerabilities detected

By clicking on one of these results, you can see the file that caused the vulnerability as well as the problematic lines of code.

security report

Security report

From this menu, you can choose to dismiss the vulnerability or create an issue so that someone can fix it. Details from the test will be added to the issue automatically.

new issue

A new issue created to investigate a vulnerability

From your original merge request, you can collaborate with others and have them take a look at the proposed changes.

collaborate on merge request

Tag someone in a merge request to have them see your changes

Once you’ve gathered feedback and all pipelines have passed, click the merge button to trigger a new pipeline to deploy your application to production

Web IDE

Click merge to trigger a deployment pipeline

This workflow shows how anyone can contribute code without using a command line. The Web IDE makes it easy for anyone to make changes without introducing additional risks or quality issues, all from the GitLab interface.

To see this three-minute demo in real-time, just watch the video below.

We want to hear from you

Enjoyed reading this blog post or have questions or feedback? Share your thoughts by creating a new topic in the GitLab community forum. Share your feedback

Ready to get started?

See what your team could do with a unified DevSecOps Platform.

Get free trial

Find out which plan works best for your team

Learn about pricing

Learn about what GitLab can do for your team

Talk to an expert