🎯 Deliverables:
- ✅ Youtube: https://youtu.be/UvMYMObzXb4
- ✅ Github: https://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: https://gitpod.io/#https://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
tasks:
- name: 1.1. 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
ports:
- port: 9000
onOpen: ignore
2.3. Test ecommerce-backend
tasks:
- name: 1. backend
before: |
npm install @medusajs/medusa-cli@latest -g
cd backend
init: |
npm install
command: |
npm run dev
- name: 2. backend (test)
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"
ports:
- port: 9000
onOpen: ignore
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 ⛅
module.exports = {
projectConfig: {
redis_url: REDIS_URL,
database_url: DATABASE_URL,
database_type: "postgres",
store_cors: STORE_CORS,
admin_cors: ADMIN_CORS,
},
plugins,
};
3.2. docker compose task
tasks:
- name: 2.1. backend >> docker compose
before: |
npm install @medusajs/medusa-cli@latest -g
cd backend
command: |
docker compose up --build
# gp sync-done finished
openMode: split-left
- name: 2.2. backend >> docker compose (test)
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
ports:
- port: 9000
onOpen: ignore
4. Lab #1: express-redis
## List the start up tasks. Learn more https:
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
5. Lab #2: elasticsearch-logstash-kibana
tasks:
- name: Start ELK 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
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 ⛅
