GitHub Actions Workshop

Master GitHub Actions with hands-on labs and exercises. Learn how to automate workflows, run tests, deploy applications, and more using GitHub's powerful automation platform. This repository has everything you need to get started with continuous integration and continuous deployment.


Project maintained by prasadhonrao Hosted on GitHub Pages — Theme by mattgraham

Solution: React Tic-Tac-Toe CI / CD Workflow

name: React Tic-Tac-Toe CI/CD

on:
  workflow_dispatch:
  push:
    paths:
      - '.github/workflows/caching-workflow.yml'
      - 'src/react/react-tic-tac-toe/**'

env:
  DOCKER_IMAGE: prasadhonrao/react-tic-tac-toe
  CONTEXT_PATH: ./src/react/react-tic-tac-toe

jobs:
  build-and-push:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v4
        with:
          submodules: true # Fetch the submodules

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      # Step 3: Restore Cache
      - name: Restore npm cache
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: $-node-$/package-lock.json') }}
          restore-keys: |
            $-node-

      - name: Install Dependencies
        run: npm ci
        working-directory: $

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2

      - name: Log in to Docker Hub
        uses: docker/login-action@v2
        with:
          username: $
          password: $

      - name: Build and Push Docker Image
        run: |
          cd $
          TAG=$
          docker build -t $:$TAG -t $:latest .
          docker push $:$TAG
          docker push $:latest