Simple ways to create Gitpod workspace in GitHub

Reading Time: 3 minutes

Introduction

Gitpod is an open-source Kubernetes based platform which provides a prebuilt, development environment on your browser in the form of various IDEs like VS-code, PhpStorm, and IntelliJ called workspace.

Prerequisite

  • Github Id
  • Any browser ( preferably chrome )

Gitpod Registration

To use Gitpod we need to have an id on it. It is simple to make:

starting steps in registration
  1. Go to https://www.gitpod.io/ and click on Sign Up.
  2. Select Continue with GitHub.
  3. Sign in to your GitHub account.
  4. Allow giving basic permissions.
  5. Now you are registered and on your dashboard of Gitpod.
last steps in registration

Gitpod Workspace

The Workspaces are the Build environment of repositories that are deployed and running on Kubernetes, which are managed by the Gitpod team. You can have multiple workspaces running in parallel. Now you can create a workspace in three ways:

Using the dashboard for Gitpod workspace

There is a button on the dashboard New Workspace which allows for creating a workspace for every repository on your Github profile. You can also use the Keyboard shortcut CTRL + O to do the same thing.

Using Dashboard gitpod

Using the URL for Gitpod Workspace

You just need to be on the repository page of the browser. In the URL section of the browser, add the line ‘https://gitpod.io/# ‘ before your repository URL. For example, https://gitpod.io/#https://github.com/vaibhavkumar779/Docker-Compose-Flask-App

Using URL for gitpod

Using Browser Extension for Gitpod Workspace

In the prerequisite, it was asked to preferably use Chrome. As we can get the extension of Gitpod. This provides a button on your GitHub repository, Gitpod. You have to just click on it and it creates the workspace. But it will be only for that browser.

chrome extension gitpod
Gitpod  button

Bonus way for Gitpod Workspace

Now if we want anyone to create a workspace easily for your repository, just add the following in the README.md file:

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#<your-project-url>)

This creates an Open in Gitpod button to readme of the repository. Just click it to create the workspace.

README edit
README gitpod button

Next Steps

The workspace is created after completing predefined steps. The pulling of images, creating the containers, establishing the workspace and installing the required dependencies.

workspace creation

Now an IDE would be visible with all code will be visible.

workspace

A new file named ‘.gitpod.yml’ is added to this local environment. This file defines everything for creating the workspace. The tasks section defines tasks for a shell. A hyphen ‘-‘ defines one terminal. This whole workspace has a Linux environment. The terminal works with a Debian based OS. The ports define the port at which you could see the output on the browser when you run the project, using the URL and port number. A simple example:

tasks:
  - init: pip install -r requirements.txt

This installs all modules defined in the requirements.txt.

Conclusion

Here we have learnt various ways to add Gitpod workspace for the repository and modify workspace using the gitpod.yml file. There is more useful for this service like adding a Gitpod Dockerfile for other adding more dependencies not available in the current image.

References

  1. https://gitpod.io
  2. https://github.com/gitpod-io/gitpod
knoldus footer

Written by 

Vaibhav Kumar is a DevOps Engineer at Knoldus | Part of Nashtech with experience in architecting and automating integral deployments over infrastructure. Proficient in Jenkins, Git, AWS and in developing CI pipelines. Able to perform configuration management using ansible and infrastructure management using terraform. Like to script and do developing in Python. Other than AWS, have an experience in Google Cloud, Azure cloud services. Other than Jenkins, CI/CD in Azure Pipelines, GitHub Actions, Teamcity. Loves to explore new technologies and ways to improve work with automation.