🎯 Deliverables:

• ✅ Youtube: youtu.be/UvMYMObzXb4
• ✅ Github: github.com/OceanSoftIO/Digital-Commerce

1. Gitpod Cloud Development Environment

Modern engineering teams are embracing cloud technologies and automating whenever possible, including infrastructure, CI/CD build pipelines, linting/formatting, and even writing code, to avoid costly errors and focus on product and customer value creation.

We will demonstrate how to use Gitpod to spin up an automated development environment in seconds so that you are always ready to code. After completing the guided tutorial below, you will be able to build and deploy open-source 🆓 Shopify-like Digital Commerce 💰 in minutes.

2. Cloud Development Environment in 1-Click

You can quickly set up a complete development environment in your browser with only 1-click and begin coding immediately.

• Click the button below to start a new cloud development environment using Gitpod: gitpod.io/#github.com/OceanSoftIO/Digital-Commerce

• You will need to authorize your GitHub account before you can use Gitpod.

• Upon clicking on Gitpod, a workspace will be opened in the browser that contains:

  • VS Code for editing code.
  • An embedded browser window in which the application is running.
  • Two terminal sessions: the left terminal can be used for entering commands, and the right terminal runs the eCommerce-Backend testing.

2.1. Generate Your Gitpod Config File:

gp init

2.2. Edit .gitpod.yml

## List the start up tasks. Learn more https://www.gitpod.io/docs/config-start-tasks/
tasks:

  - name: 1.1. backend
    ## working directory as `/ecommerce/backend`
    before: |
      npm install @medusajs/medusa-cli@latest -g
      cd backend
    init: |
      npm install
    command: |
      npm run dev
      # gp sync-done finished
    openMode: split-left

## List the ports to expose. Learn more https://www.gitpod.io/docs/config-ports/
ports:
  - port: 9000
    onOpen: ignore

2.3. Test ecommerce-backend

## List the start up tasks. Learn more https://www.gitpod.io/docs/config-start-tasks/
tasks:

  - name: 1. backend
    ## working directory as `/ecommerce/backend`
    before: |
      npm install @medusajs/medusa-cli@latest -g
      cd backend
    init: |
      npm install
    command: |
      npm run dev

  - name: 2. backend (test)
    ## working directory as `/ecommerce/backend`
    before: |
      cd backend
    init: |
      # echo "curl -X GET localhost:9000/store/products | python -m json.tool"
      echo "npm run seed"
    command: |
      echo "curl -X GET localhost:9000/store/products | python -m json.tool"

## List the ports to expose. Learn more https://www.gitpod.io/docs/config-ports/
ports:
  - port: 9000
    onOpen: ignore
  # - port: 8000
  #   onOpen: open-browser
  # - port: 7000
  #   onOpen: open-preview

cd backend

##
npm run seed

##
curl -X GET localhost:9000/store/products | python -m json.tool

3. docker compose on Gitpod

This Gitpod Docker Compose provides you with pre-built, ephemeral development environments in the cloud ⛅

3.1. Update project config in backend/medusa-config.js:

module.exports = {
  projectConfig: {

    // /** Option1 - SQLite (default): Development-like Environment */
    // database_database: "./ecommerce.sql",
    // database_type: "sqlite",

    /** Option2 - PostgresQL: For more production-like environment */
    redis_url: REDIS_URL,
    database_url: DATABASE_URL, //postgres connectionstring
    database_type: "postgres",

    store_cors: STORE_CORS,
    admin_cors: ADMIN_CORS,
  },
  plugins,
};

3.2. docker compose task

## List the start up tasks. Learn more https://www.gitpod.io/docs/config-start-tasks/
tasks:

  - name: 2.1. backend >> docker compose
    ## working directory as `/ecommerce/backend`
    before: |
      npm install @medusajs/medusa-cli@latest -g
      cd backend
    # init: |
    #   docker compose pull
    command: |
      docker compose up --build
      # gp sync-done finished
    openMode: split-left

  - name: 2.2. backend >> docker compose (test)
    ## working directory as `/ecommerce/backend`
    before: |
      cd backend
    init: |
      # curl -X GET localhost:9000/store/products | python -m json.tool
      echo "docker image ls"
      echo "docker container ls"
      echo "docker exec ecommerce-backend medusa seed -f ./data/seed.json"
    command: |
      # gp sync-await finished && \
      echo "curl -X GET localhost:9000/store/products | python -m json.tool"
    openMode: split-right

## List the ports to expose. Learn more https://www.gitpod.io/docs/config-ports/
ports:
  - port: 9000
    onOpen: ignore
  # - port: 8000
  #   onOpen: open-browser
  # - port: 7000
  #   onOpen: open-preview

3.2. To get started with Docker Compose on Gitpod, click on the "Open in Gitpod" button.

4. Lab #1: express-redis

## List the start up tasks. Learn more https://www.gitpod.io/docs/config-start-tasks/
tasks:

  - name: Start Redis Stack
    ## working directory as `/README/lab1.express-redis`
    before: |
      cd README/lab1.express-redis
    init: |
     docker compose pull
    command: |
     alias redis-cli="docker exec -it redis-stack redis-cli" 
     echo "Use redis-cli to interact with Redis here."
     docker compose up -d
     gp sync-done finished
    openMode: split-left

  - name: Start Express Application
    ## working directory as `/README/lab1.express-redis`
    before: |
      cd README/lab1.express-redis/backend
    init: |
      npm install
    command: |
      gp sync-await finished && \
      npm run dev
    openMode: split-right

  - port: 9999
    onOpen: open-preview
  - port: 6379
    onOpen: ignore

• Upon clicking on Gitpod, a workspace will be opened in the browser that contains:

  • VS Code for editing code.
  • An embedded browser window in which the application is running.
  • Two terminal sessions: the left terminal can be used for entering commands, and the right terminal runs the application using nodemon. Nodemon restarts the application when you save code changes.

5. Lab #2: elasticsearch-logstash-kibana

## List the start up tasks. Learn more https://www.gitpod.io/docs/config-start-tasks/
tasks:

  - name: Start ELK Elasticsearch Logstash Kibana
    ## working directory as `/README/lab2.elasticsearch-logstash-kibana`
    before: |
      cd README/lab2.elasticsearch-logstash-kibana
    init: |
     docker compose pull
    command: |
     docker compose up -d
     gp sync-done finished
    openMode: split-left

  - name: Test ELK
    ## working directory as `/README/lab2.elasticsearch-logstash-kibana`
    before: |
      cd README/lab2.elasticsearch-logstash-kibana
    init: |
      echo "[Test ELK] init ..."
    command: |
      gp sync-await finished && \
      echo "[Test ELK] command ..."
      echo "PORTS >> 5601 >> Open Preview"
    openMode: split-right

6. Next Steps

• 💎 Modernizing Full-Stack Applications with ⚡ Serverless Containers 🐳 and Infrastructure as Code ⛅