DEV Community

Cover image for The Cloud is Your Development Environment
Nader Dabit
Nader Dabit

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Update .gitpod.yml with the following code:

tasks:
  - name: Install and deploy
    init: yarn
    command: npm run dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

Discussion (4)

Collapse
ben profile image
Ben Halpern

This is some of the coolest stuff going on in open source.

gitpod.io/#https://github.com/fore... πŸ‘ˆ play around there.

Collapse
dabit3 profile image
Nader Dabit Author

100%, definitely feels like the future once you try it out

Collapse
abh1navv profile image
Abhinav Pandey

Nice article, Nader!
Will try GitPod today.

Does Co-pilot work on GitPod's VSCode setup?

Collapse
jolandgraf profile image
Johannes Landgraf

If you connect Desktop VS Code with Gitpod - yes. gitpod.io/changelog#vs-code-deskto... CoPilot and all other proprietary MS extensions work. If you want to work in the browser you can try tabnine.com/