1. First Approach: Direct Commit to GitHub Repository

In this approach, the theme was connected to a GitHub repository. Every time there was an update in Shopify files, the build files (app.js and app.css) were committed to the repository, even though they were listed in .gitignore. To handle this, I created a GitHub Action that pushes the build files to the repository after each update.

Here’s the GitHub Action I set up:

name: Build and Deploy

on:
  push:
    branches:
      - production  # Trigger on commits to the production branch
      - develop    # Trigger on commits to the develop branch

jobs:
  build:
    runs-on: ubuntu-latest  # Use the latest Ubuntu image

    steps:
      - name: Checkout code
        uses: actions/checkout@v3  # Check out the code

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'  # Use Node.js 18.x

      - name: Clean node_modules and package-lock
        run: |
          rm -rf node_modules  # Remove node_modules
          rm -f package-lock.json  # Remove package-lock
          npm install --legacy-peer-deps --no-optional  # Install dependencies

      - name: Install @types/node
        run: npm install --save-dev @types/node  # Install Node.js types

      - name: Run build
        run: npm run build  # Run the build command

      - name: Commit and push build files
        run: |
          # Force add build files if they exist
          if [[ -f assets/app.js && -f assets/app.css ]]; then
            git config --global user.name "github-actions"
            git config --global user.email "github-actions@github.com"
            git add -f assets/app.js assets/app.css  # Force add the generated files

            # Commit and push if there are changes
            git diff --cached --quiet || {
              git commit -m "Add production build files (generated via GitHub Actions)"
              git push origin ${{ github.ref }}  # Push to the branch that triggered the action
            }
          else
            echo "Build files do not exist. Skipping commit."
          fi
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Allow pushing the commit back
Issue with This Approach:
  • Unwanted Files in Git: After the first push, the build files (app.js and app.css) were tracked by Git despite being in .gitignore, which caused problems when changes were made. This wasn’t ideal for maintaining a clean repository.

2. Second Approach: Push Files Directly to Shopify (No GitHub Commit)

For a cleaner CI/CD process and after reviewing Shopify's docs, I disconnected the theme from the GitHub repository and created a new action to push the files directly to the Shopify theme without committing them to the repository.

Here’s the new GitHub Action for this approach:

name: Theme deploy

on:
  push:
    branches:
      - production  # Trigger on commits to the production branch
      - develop    # Trigger on commits to the develop branch

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest  # Use the latest Ubuntu image

    steps:
      - uses: actions/checkout@v2  # Check out the code

      - uses: actions/setup-node@v3
        with:
          node-version: 18  # Use Node.js 18.x

      - name: Install Shopify CLI
        run: npm install -g @shopify/cli  # Install Shopify CLI globally

      - name: Install @types/node
        run: npm install --save-dev @types/node  # Install Node.js types

      - name: Run build
        run: npm run build  # Run the build command

      - name: Upload theme to Shopify
        run: |
          if [ "${{ github.head_ref || github.ref_name }}" == "production" ]; then
            shopify theme push \
            --json \
            --theme Production \
            --store ${{ secrets.SHOPIFY_STORE }} \
            --password ${{ secrets.SHOPIFY_API_KEY }} \
            --allow-live
          elif [ "${{ github.head_ref || github.ref_name }}" == "develop" ]; then
            shopify theme push \
            --json \
            --theme Testing \
            --store ${{ secrets.SHOPIFY_STORE }} \
            --password ${{ secrets.SHOPIFY_API_KEY }}
          fi
Why I Chose This Approach:
  • No Unwanted Files in Git: This method prevents build files from being committed to the repository, keeping it clean.
  • Direct Deployment to Shopify: We push the theme directly to the Shopify store without worrying about Git conflicts, ensuring only the necessary theme files are deployed.
  • Cleaner and More Efficient CI/CD: This approach is simpler, as it focuses solely on pushing the theme to Shopify, rather than managing local files in the Git repository.

Conclusion:

By moving from the GitHub commit-based approach to a direct Shopify deployment, I’ve achieved a cleaner and more efficient CI/CD pipeline. The second approach minimizes the risk of unwanted files being tracked in Git and ensures that only the theme files are pushed to Shopify.