Using Lando with Gitpod

John OuelletJohn Ouellet|Thu, Feb 10, 2022

Local Docker based development has become a mainstay for most developers today. However, Docker requires a decent machine to run efficiently, and performance problems plague developers running virtualized Docker instances on Mac and Windows. Cloud development has come into the forefront as a way to get around upgrading your machine to handle your development tasks.

Gitpodopen in new window is one cloud solution that has become widely used by many developers. It allows developers to easily hook up a remote development environment from any computer to get the job done. Keep reading to see how you can hook up your Lando setup with Gitpod.

⚠️ Gitpod is still an evolving project. We have found a couple small caveats in our exploration of the product that we will address below. We will be continually adapting Lando to make Gitpod a better development experience for our users. Make sure you subscribe to the Lando newsletter or follow our Twitteropen in new window to get future updates.

What is Gitpod?

Gitpod allows users to spin up remote VM environments that utilize VSCode or any Jetbrains IDE to develop in their browser. Using a simple .gitpod.ymlopen in new window configuration file, you can quickly get up and running with a remote environment. I would read through the docs to get familiar with this file as it is the base for all your Gitpod needs.

We have also spent some time developing a universally easy way to get your Lando projects going within Gitpod as well. It won't take too long to hook up Lando to your Gitpod environment.

Setting up Gitpod with our Demo

Gitpod can work on a variety of git based providersopen in new window. For the sake of this article, we will be setting our repos up with GitHubopen in new window.

Step 1: Enable Gitpod for Your User/Org

The first time you are setting up Gitpod, you need to enable it so your repos can utilize it like any other third party app. The setup is fairly simple, just go over to the Gitpod apps pageopen in new window to setup the app to work with whatever repos you want.

Step 2: Fork the Demo Repo

For our drupal-dev-environmentopen in new window repo. If you've setup Gitpod properly, all you need to do is visit your repo at this url: https://gitpod.io/#https://github.com/YOURORG/drupal-dev-environmentopen in new window.

Step 3: Wait for Gitpod to spin up.

The initial build will be very slow (10 mins+), so go have a delicious snack in the interim. Gitpod uses a concept of prebuildsopen in new window which will be built during the initial start. Depending on your config, this may be very quick, or will take quite sometime.

Once Gitpod builds your environment, you will be launched into a VSCode instance on your web browser. Our demo repo will then launch a preview browser after the site demo finishes installs.

From here, you can code away and do whatever you want. Your demo site is good to go!

Using Lando in Gitpod

If you are not going to use our demo repo, we've created a Dockerhub imageopen in new window with the latest version of Lando installed and configured for you to use on your own projects.

The bare minimum you need to get going in your .gitpod.yml config file is:

image: devwithlando/gitpod:1

tasks:
  - name: Start Drupal
    command: |
      lando start

Very simple and straight forward. You can do so much more and a good base example of what to use can be found in our Drupal demo repo .gitpod.ymlopen in new window.

Various Caveats Using Gitpod and Lando

Proxy

It seems the proxy can cause weird issues from time to time. So right now, we disable it in our Gitpod Docker imageopen in new window. If you do have proxy based urls, you can just click the port defined via lando info to open a new browser window in Gitpod as a work around.

Localhost

Right now, Gitpod will only launch http urls. If you want to launch your preview browser dynamically, you can use the command we defined in our demo repoopen in new window to do so. If you do have multiple services that use the localhost url (like when using PHPMyAdmin), you will need to change which url via .urls[0] to the right index number. Usually it is only .urls[0] or .urls[1].

OR you can just click the port number in the Gitpod UI and open a browser manually.

Possible Network Issues

When testing, we noticed that if you use lando start within the prebuild init context, some strange things may occur when the instance times out. When the instance starts back up again, you may see issues like:

ERROR: for database  Cannot start service database: network 920aa31515a0eb982ce8f89dbdd500e9154a07669b35a97c9733a208eb00d11c not found

To address this you will need to do a lando destroy and 'lando rebuild to fix it.

You can avoid this by not putting lando start in your .gitpod.yml file's init command at the moment. Instead you can just pull the docker images locally in the init step like we do in our demoopen in new window to help speed up build times.

We're curious to hear about your Gitpod experiences! Give our demo repo a tryopen in new window and join the Lando Slackopen in new window to tell us how it went.

And if you're a visual learner, you can check out this short intro video I did on using Gitpod with Lando: https://www.youtube.com/watch?v=ZaXI6ooY8Akopen in new window