Lowering the boundary to Code Contribution

Thinking of using Gitpod as your Cloud IDE? Read this first...

I'm preparing for a hands-on coding workshop and wanted my participants to get coding as fast as they can. I decided to leverage Gitpod as a Cloud IDE. Here’s how I set it up including challenges I encountered and their remedies.

🧑‍💻 Gitpod

Gitpod is a tool I've been using to set up an isolated development (dev) environment for troubleshooting. I have relied on ready made repositories from the open source community, but now was a chance to dive deeper.

🐳 Docker Compose Ready

My repository uses docker and docker compose. Docker is great for providing consistent dev environments across multiple developers. It's also great for isolating your project from other projects on your machine so you can mix and match your tools.

I dived straight in and got my repository loaded on Gitpod. Gitpods default image  supports docker, docker compose, php, and node out of the box. So it was as simple as running ‘docker compose up’ in the console to get going.

🛠️Challenges and Remedies

🌐 Traefik

I use a traefik container so I can visit my project with a domain name rather than using localhost. It has the benefit that I can visit my other containers such as mailhog and phpmyadmin on their own domains too.

The first hurdle was getting traefik to recognise my cloud IDE domain. Gitpod assigns a unique domain to each port that you expose. I used port 8000 for my nginx container so my URL was https://8000-[gitpod-id].gitpod.io This was fixed with an easy update of my .env file.

🔑 Permissions

Next I had permission issues as I couldn't install composer packages. My containers are set up to run as user id 1000 and group id 1000. This is usually ok on a linux system but Gitpod uses user id 33333. The trick was to run my containers as root which wasn't straight forward. It took a couple of google searches but a solution was found using docker directives and commands.

Furthermore I couldn't create files in the root of my repository. The fix was changing the owner to Gitpod instead of user id 1000.

🔥Hot Module Reloading (HMR)

The hardest issue to resolve was HMR with Vite. Once you save your files, the browser  automatically reloads to reflect the changes. Gitpod provided docs on how to resolve this, but it was missing a critical instruction that I stumbled across by chance after 2 days of going crazy. The container running Vite needs to run as a public URL. So simple but not documented anywhere.

🚀 Laravel

There was a Laravel specific issue that I had to rectify in my code base for working with Gitpod. Luckily this was already documented.

🤖 Automation

I worked on the Gitpod integration a few minutes a day over several days and Gitpod would go into hibernation mode. I'd have to set things up again over and over. “Watta waste of time!”, I thought. Gitpod agreed. Using the .gitpod.yml file you can provision your dev environment and sets a base to start from when it comes out of hibernation. You can also add “most” of your favourite VsCode extensions.

🖥️ Bash Aliases

Once I got my basic setup going I wanted to make it feel like my local dev with my aliases set up as well as extra tooling for Gitpod. My .gitpod.yml file downloads some basic aliases and includes a bash file for installing git-revise.

🤖 What AI?

Are you wondering where AI is in all this? It wasn't helpful in this activity. After a lot of hallucinations I went back to basics and read docs and used search engines. Hopefully this article will help train them for the future.

 

📝 Summary

 

I'm really happy with the result. The Cloud dev environment is easier to setup than the local dev as the setup script handles downloading composer and npm packages, building a dev database and running Laravel setup commands. Now you can code from any device regardless of its hardware. 

👉 Try it out!

Github: https://github.com/sita-samoa/sita-membership