A .gitpod.yml Legend

Using Gitpod.

Here you have it.

Everything was built.

You should consider Gitpod.

I didn’t need powerful hardware

Not like I could. Lol.

To get sh*t done.

Just the cloud;

& Gitpod.

Monday, 4 November 2024, 9:06 AM - UTC+1

Yahya Abulhaj: Your video on gitpod extension (opens in a new tab) changed my life. I barely knew what is like working on IDE back then and I even feared accessing vs code. Your tips on getting a button on GitHub for any repo that gets you straight to an IDE in the cloud—a CDE was a game changer.

Monday, 4 November 2024, 10:12 AM - UTC+1

Pauline P. Narvas: Hey Yahya! Appreciate all your nice words, thank you so much for your support. I see you!

Entry to Code

Gitpod is a powerful platform that provides instant, ready-to-code development environments in the cloud. The heart of Gitpod's configuration is the .gitpod.yml file, which defines how your development environment should be set up.

This guide will walk you through creating a comprehensive Gitpod configuration that sets up a robust development environment for a full-stack application using React, Flask, AWS services, and more.

Tasks

Tasks in Gitpod are used to automate the setup of your development environment. Each task can install dependencies, start servers, and perform other initialization steps.

AWS SAM CLI Installation

- name: aws-sam
  init: |
    cd /workspace
    wget https://github.com/aws/aws-sam-cli/releases/latest/download/aws-sam-cli-linux-x86_64.zip
    unzip aws-sam-cli-linux-x86_64.zip -d sam-installation
    sudo ./sam-installation/install
    cd $THEIA_WORKSPACE_ROOT

This task installs the AWS Serverless Application Model (SAM) CLI. SAM is an open-source framework for building serverless applications. It provides shorthand syntax to express functions, APIs, databases, and event source mappings.

Key Points:

• Downloads the latest version of AWS SAM CLI
• Unzips and installs it
• Returns to the workspace root directory

CloudFormation Tools Setup

- name: cfn
  before: |
    bundle update --bundler
    pip install cfn-lint
    cargo install cfn-guard
    gem install cfn-toml

This task installs various tools for working with AWS CloudFormation:

• cfn-lint: A tool to validate AWS CloudFormation templates against the AWS CloudFormation Resource Specification
• cfn-guard: A policy-as-code evaluation tool for AWS CloudFormation templates
• cfn-toml: A gem for working with TOML in CloudFormation templates

Key Points:

• Updates the bundler
• Installs cfn-lint using pip (Python package manager)
• Installs cfn-guard using cargo (Rust package manager)
• Installs cfn-toml using gem (Ruby package manager)

AWS CLI Installation

- name: aws-cli
  env:
    AWS_CLI_AUTO_PROMPT: on-partial
  before: |
    cd /workspace
    curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
    unzip awscliv2.zip
    sudo ./aws/install
    cd $THEIA_WORKSPACE_ROOT

This task installs the AWS Command Line Interface (CLI), which is a unified tool to manage your AWS services.

Key Points:

• Sets up auto-prompting for improved usability
• Downloads and installs the latest version of AWS CLI
• Returns to the workspace root directory

React.js and CSpell Setup

- name: react-js-w-cspell
  command: |
    ruby "./bin/frontend/generate-env" &&
    cd frontend-react-js
    npm i && npm install -g cspell

This task sets up the React.js frontend and installs CSpell, a spell checker for code.

Key Points:

• Generates environment variables for the frontend
• Navigates to the frontend React.js directory
• Installs npm dependencies and CSpell globally

PostgreSQL Client Installation

- name: postgres
  before: |
    curl -fsSL https://www.postgresql.org/media/keys/ACCC4CF8.asc|sudo gpg --dearmor -o /etc/apt/trusted.gpg.d/postgresql.gpg
    echo "deb http://apt.postgresql.org/pub/repos/apt/ `lsb_release -cs`-pgdg main" |sudo tee  /etc/apt/sources.list.d/pgdg.list
    sudo apt update
    sudo apt install -y postgresql-client-13 libpq-dev  
  command: |
    export GITPOD_IP=$(curl ifconfig.me)
    source  "$THEIA_WORKSPACE_ROOT/bin/rds/update-sg-rule"

This task installs the PostgreSQL client and updates security group rules for RDS access.

Key Points:

• Adds the PostgreSQL repository
• Installs PostgreSQL client and development libraries
• Updates security group rules for RDS access

Flask Backend Setup

- name: flask
  command: |
    ruby "./bin/backend/generate-env" &&
    cd backend-flask
    pip install -r requirements.txt      

This task sets up the Flask backend.

Key Points:

• Generates environment variables for the backend
• Navigates to the backend Flask directory
• Installs Python dependencies from requirements.txt

AWS Fargate Setup

- name: fargate
  before: |
    cd /workspace
    curl "https://s3.amazonaws.com/session-manager-downloads/plugin/latest/ubuntu_64bit/session-manager-plugin.deb" -o "session-manager-plugin.deb"
    sudo dpkg -i session-manager-plugin.deb
    cd $THEIA_WORKSPACE_ROOT
    cd backend-flask

This task installs the AWS Systems Manager Session Manager plugin, which is useful for connecting to Fargate containers.

Key Points:

• Downloads and installs the Session Manager plugin
• Navigates back to the backend Flask directory

AWS CDK Setup

- name: cdk
  before: |
    npm install aws-cdk -g
    cd thumbing-serverless-cdk
    cp .env.example .env
    npm i

This task installs the AWS Cloud Development Kit (CDK) and sets up a serverless CDK project.

Key Points:

• Installs AWS CDK globally
• Navigates to a serverless CDK project directory
• Copies an example environment file
• Installs npm dependencies for the CDK project

VS Code Extensions

vscode:
  extensions:
    - 42Crunch.vscode-openapi
    - cweijan.vscode-postgresql-client2
    - ms-azuretools.vscode-docker

This section specifies VS Code extensions to be installed in the Gitpod workspace:

• 42Crunch.vscode-openapi: Provides support for OpenAPI (Swagger) specifications
• cweijan.vscode-postgresql-client2: A PostgreSQL client for VS Code
• ms-azuretools.vscode-docker: Adds support for Docker in VS Code

Ports

ports:
  - name: frontend
    port: 3000
    onOpen: open-browser
    visibility: public
  - name: backend
    port: 4567
    visibility: public
  - name: xray-daemon
    port: 2000
    visibility: public
  - name: postgres
    port: 5432
    visibility: public

This section defines the ports to be exposed and their visibility:

• Frontend (3000): For the React.js application
• Backend (4567): For the Flask application
• X-Ray Daemon (2000): For AWS X-Ray, which provides request tracing
• PostgreSQL (5432): For database connections

All ports are set to public visibility, allowing access from outside the Gitpod environment.

Best Practices

1. Version Control: Always keep your .gitpod.yml file under version control along with your project code.

2. Regular Updates: Periodically review and update your Gitpod configuration to ensure it's using the latest versions of tools and best practices.

3. Environment Variables: Use environment variables for sensitive information instead of hardcoding them in the .gitpod.yml file.

4. Task Dependencies: Be mindful of task dependencies. Use the init and command attributes wisely to control the order of execution.

5. Documentation: Add comments in your .gitpod.yml file to explain complex setups or decisions.

6. Testing: Regularly test your Gitpod configuration by creating new workspaces to ensure everything sets up correctly.

Thank Git in Pod

A well-crafted Gitpod configuration file is a powerful tool for creating consistent, efficient development environments. By following this guide, you've created a comprehensive setup that includes:

• AWS development tools (SAM, CLI, CDK)
• Frontend (React.js) and backend (Flask) environments
• Database tools (PostgreSQL)
• CloudFormation and serverless tools
• Necessary VS Code extensions
• Properly configured ports

This setup ensures that any developer can spin up a fully-configured environment with a single click, dramatically reducing setup time and ensuring consistency across your team.

Remember, as your project evolves, so should your Gitpod configuration. Regularly revisit and refine this file to keep your development environment in top shape.

Happy coding in your perfectly configured Gitpod environment!

And here is the one built (opens in a new tab) for our app.