Table of contents
๐ฏ 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 โ