The Cloud is Your Development Environment

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 [email protected]: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:

Tomiwa Ademidun

Senior Software Engineer

1 年

This was so helpful. Literally making a PR at work that is referencing this article for why we should add Gitpod support to our repo. This is the second time in the last 2 weeks, I've directly benefitted from and referenced a Nader Dabit tutorial. The first one was your NFT marketplace tutorial.

回复

要查看或添加评论,请登录

NADER Dabit的更多文章

  • Ditching setState for MobX

    Ditching setState for MobX

    How to leverage observables, observers, computed properties, autorun & more to supercharge & simplify your React…

  • React Native Authentication in Depth

    React Native Authentication in Depth

    Implementing real world production tested multi factor authentication in a React Native application. This tutorial uses…

  • State Management with MobX State Tree

    State Management with MobX State Tree

    Introduction to MobX State Tree To see a completed React Native example using MobX State Tree and our example…

  • AWS AppSync?—?Up and Running with GraphQL in the Cloud

    AWS AppSync?—?Up and Running with GraphQL in the Cloud

    The AWS AppSync GraphQL service offers real-time updates and built-in offline support along with first class…

    1 条评论
  • React Native & iPhone X

    React Native & iPhone X

    Easily update and create iPhone X layouts with SafeAreaView In version 0.50.

  • Flutter for JavaScript Developers

    Flutter for JavaScript Developers

    Flutter is a cross-platform mobile app SDK for building high-performance, high-fidelity, apps for iOS and Android, from…

  • React Native - Cross Platform & Beyond

    React Native - Cross Platform & Beyond

    I have had the tremendous opportunity to speak at the only two React Native conferences in the world so far, both Chain…

    2 条评论
  • Deep Linking Your React Native App

    Deep Linking Your React Native App

    In this post, I’ll quickly walk through how to add deep linking to a React Native app for both iOS and Android using…

  • Introducing Create XP App

    Introducing Create XP App

    I've just released an open source project that will allow developers to leverage the ReactXP ecosystem much easier to…

    2 条评论
  • Managing State in React and React Native using ReSub

    Managing State in React and React Native using ReSub

    ReSub is a library released by Microsoft + Open Source for writing React components that automatically manages…

社区洞察

其他会员也浏览了