The Cloud is Your Development Environment

As a developer, one of the things I've grown accustomed to is constantly moving between various projects, their required dependencies, and versions of those dependencies.

Here is a typical workflow that you may be familiar with:

1. Select project
2. Check dependencies
3. Checkout branch
4. View readme
5. Install tools and dependencies
6. Run build
7. Run test
8. Start coding

We are seeing a rise in cloud developer environments that abstract and automate these steps away, removing friction, improving developer experience, and speeding up development time by just making things easier.

In contrast with the above workflow, what if it was this simple?

1. Select project 👩‍💻
2. Start coding 🚀

Over the years we've seen the iteration and maturation of this idea, with projects like Replit, StackBlitx, CodeSandbox, JSFiddle, and countless others improving over the course time.

The obvious end goal here was to make it so that anyone, on any machine, anywhere in the world, could jump in and start building, contributing, and collaborating on production codebases without having to go through monotonous, time consuming, and often complex environment setup and from any machine in the world that had a browser.

This vision is finally starting to come to fruition with projects like Gitpod and GitHub Codespaces being used in real production codebases, and as the case with Gitpod, free and accessible to anyone in the world today.

In this post, I want to show you how you can move your development environment to the cloud with Gitpod.

Gitpod Overview

Gitpod lets you automate the deployment of Github projects and start coding them directly in any browser with a complete VSCode setup.

You can spin up pre-configured, standardized dev environments from any git context when you need them and close them down (and forget about them) when you are done with your task. Dev environments become fully ephemeral.

The value proposition is this: I have a project that I want to work on, or see a project in a Github repo I want to try out. With Gitpod, you can click a button, or append the GitHub repo with gitpod.io/# and open it up in Gitpod.

Gitpod will read the Gitpod configuration file and run the steps to automatically set everything up for you. From there, you can immediately start writing code, running additional CLI commands, and testing your project (including running web servers for front end applications).

A couple of examples of some automations:

Blockchain app

1. Install the dependencies
2. Start local Ethereum node
3. Compile smart contract
4. Deploy the smart contract
5. Start the web server

Docker with a RUST API

1. Set environment variables
2. Start Postgres
3. Build the project - cargo build
4. Run the project - cargo run

Jamstack app

1. Install dependencies
2. Start the web server

Let's look at how we can get started automating these types of projects.

Getting started

There are two examples I'm going to give here:

1. Deploying and automating your own project to Gitpod
2. Deploying an existing project to Gitpod

Deploying and automating your own project

First, create a new Next.js app and create a .gitpod.yml file:

npx create-next-app myapp

cd myapp

touch .gitpod.yml

Update .gitpod.yml with the following code:

tasks:
  - name: Install and deploy
    init: yarn
    command: npm run dev

This configuration will do the following once the project is launched in Gitpod:

1. Install dependencies
2. Run the dev server after dependencies are installed and open port 3000

You can do quite a bit in the configurations, including async tasks. To learn more about what's possible, check out the docs here

Next, create a new GitHub repo and copy the project URI to your clipboard.

Using your own GitHub project URI, push your project to GitHub:

git init

git remote add origin git@github.com:username/myapp.git

git add .

git commit -m 'initial commit'

git push origin main

Now you can open your project and it will automatically be deployed and run whenever someone opens it with this URL pattern:

https://gitpod.io/#<your-project-uri>

Deploying an existing project to Gitpod

GitPod also has a handful of example projects that you can run and deploy as well here.

If you want to deploy this example Next.js app, check out my repo here

Next steps

If you want to learn more:

1. Check out the Getting Started guide
2. Follow Pauline and Mike on Twitter
3. Check out their YouTube channel
4. Here are a couple of video overviews of how it works:
   • Ethereum Development Environment
   • Next.js & Vercel