08. Workshop 1 Vite + React

---

สร้าง project react ก่อน ด้วย vite

bun create vite

เลือกตามนี้เลย หรือใครจะเลือกแบบอื่นก็ได้นะ ไม่ได้จะแก้ไขอะไรหรอก แค่มีโปรเจคก็พอ

│
◇  Project name:
│  react
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript
│
◇  Scaffolding project in /Users/atiwatseenark/Documents/workshop/gh-actions-projects/react...
│
└  Done. Now run:

  cd react
  bun install
  bun run dev

จากนั้นก็ไปสร้าง repo ใน github

initialize git

git init
git add .
git commit -m "first init"

add remote repo

git remote add origin <your git repository url>
git branch -M main
git push -u origin main

Create lint workflow

มาสร้าง workflow

สร้างไฟล์ .github/workflows/lint.yaml

workflows/lint.yaml`

workflows/lint.yaml

name: ESLint
on: push
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - name: Get Code
        uses: actions/checkout@v4
      - name: Install Bun
        uses: oven-sh/setup-bun@v2
        with:
          bun-version: 1.2.8
      - name: Install Dependencies
        run: bun i
      - name: Run ESLint
        run: bun run lint

จะเห็นว่าเราใช้ action จาก Marketplace ด้วย

• actions/checkout@v4 คือให้ github clone code มาไว้ใน directory ที่ action ทำงาน
• oven-sh/setup-bun@v2 คือ action ที่จะ install bun ให้เราใช้งานได้ เพราะว่า Ubuntu-latest เปล่าๆไม่ได้ติดตั้ง Bun มาให้
  • with: bun-version: 1.2.18 คือกำหนด version ของ Bun ที่จะติดตั้ง
• run: bun i เป็นคำสั่งที่เราใช้รันใน shell ปกตินี่แหละ
• run: bun run lint เป็นคำสั่งที่เราใช้รันใน shell ปกติเหมือนกัน

ลอง Push code เลย

---

create deploy workflow

เราจะไม่ได้ deploy จริงในตอนนี้นะ เอาแค่ให้เห็นว่า build ยังไงได้ folder dist มายังไงพอ

workflows/deploy.yaml

name: Deploy Project
on: push
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - name: Get Code
        uses: actions/checkout@v4
      - name: Install Bun
        uses: oven-sh/setup-bun@v2
        with:
          bun-version: 1.2.18
      - name: Install Dependencies
        run: bun i
      - name: Run ESLint
        run: bun run lint
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Get Code
        uses: actions/checkout@v4
      - name: Install Bun
        uses: oven-sh/setup-bun@v2
        with:
          bun-version: 1.2.18
      - name: Install Dependencies
        run: bun i
      - name: Build Project
        run: bun run build
      - name: List files
        run: ls -l dist
      - name: Deploy
        run: echo "Deploying..."

แล้วก็ลอง push code แล้วรอดูที่หน้าเวปของ Github ได้เลย

จะเห็นว่าใน Workflow นี้เรามี 2 jobs

1. lint ก็ทำงานเหมือนเดิมแหละ
2. deploy ที่จะ build แล้วได้ folder dist แต่เราไม่ได้ deploy จริง แค่ echo เฉยๆ

ซึ่ง jobs ทั้งสองจะทำงานพร้อมกัน เหมือนกับอยู่กันคนละเครื่องเลย ทั้งสอง jobs จะมองไม่เห็นกันเลย
พออยู่กันคนละเครื่อง เราก็เลยต้อง checkout ทั้งสอง jobs

Sequential Jobs

ถ้าเราไม่อยากให้ jobs มันทำงานพร้อมกัน เราต้องการให้ jobs ทำงานตามลำดับ เราแค่ต้องเพิ่ม needs ให้กับ jobs ที่ต้องการให้รอ แบบนี้

workflows/deploy.yaml

name: Deploy Project
on: push
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - name: Get Code
        uses: actions/checkout@v4
      - name: Install Bun
        uses: oven-sh/setup-bun@v2
        with:
          bun-version: 1.2.18
      - name: Install Dependencies
        run: bun i
      - name: Run ESLint
        run: bun run lint
  deploy:
    needs:
      - lint
    runs-on: ubuntu-latest
    steps:
      - name: Get Code
        uses: actions/checkout@v4
      - name: Install Bun
        uses: oven-sh/setup-bun@v2
        with:
          bun-version: 1.2.18
      - name: Install Dependencies
        run: bun i
      - name: Build Project
        run: bun run build
      - name: List files
        run: ls -l dist
      - name: Deploy
        run: echo "Deploying..."

โดย lint ก็มาจากชื่อของ job ด้านบน