Github Actions

If you want to know more about Github Actions, please visit the Github Actions Documentation.

All these configuration will come with the bigcommerce-theme-setup project.

How to setup Big Commerce Deployment Theme to Store

WARNING: This action will deploy the theme to your Big Commerce store.

Setup

Create the following environment variables in your repository:

• STENCIL_STORE_URL_PRODUCTION - The URL of your BigCommerce store.
• STENCIL_ACCESS_TOKEN_PRODUCTION - The stencil access token for your BigCommerce store.

Configuration

This action is triggered everytime a commit is pushed to the master branch.

name: Theme Deploy CD

on:
  workflow_dispatch:
  push:
    branches: [ master ]

jobs:
  deploy:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node: [12.x]

    steps:
    - name: Checkout Code
      uses: actions/checkout@v2

    - name: Use Node.js ${{ matrix.node }}
      uses: actions/setup-node@v2-beta
      with:
        node-version: ${{ matrix.node }}

    - name: NPM Cache
      uses: actions/cache@v2
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-
    - name: Install Stencil CLI Dependency
      run: npm install -g @bigcommerce/stencil-cli

    - name: Install Dependencies
      run: npm ci

    - name: Connect to Store
      env:
        URL: ${{ secrets.STENCIL_STORE_URL_PRODUCTION }}
        TOKEN: ${{ secrets.STENCIL_ACCESS_TOKEN_PRODUCTION }}
      run: stencil init -u $URL -t $TOKEN -p 3000 -h https://api.bigcommerce.com

    - name: Push theme live, automatically deleting oldest theme if necessary
      run: stencil push -a -d -c 1

How to setup Big Commerce Check Store Config Settings

How to setup Big Commerce Theme Bundling Test

How to setup Big Commerce Front End Linting

This action lint the Javascript and SASS code in your theme.

Configuration

This action is triggered everytime a commit is pushed to the develop or feature/** branches.

This action require grunt, eslint and stylelint to be installed. The setup files can be found in the bigcommerce-theme-setup repository.

name: Front End CI

on:
  push:
    branches:
      - 'develop'
      - 'feature/**'

jobs:
  lint:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node: [12.x]

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Use Node.js ${{ matrix.node }}
      uses: actions/setup-node@v2-beta
      with:
        node-version: ${{ matrix.node }}

    - name: npm cache
      uses: actions/cache@v2
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-

    - name: Install Theme Dependencies
      run: npm ci

    - name: Grunt Check
      run: npx grunt check

How to setup Lighthouse

This action will run the Lighthouse tests on your BigCommerce store.

• Lighthouse Check
• Documentation

Setup

Create the following environment variables in your repository:

• LIGHTHOUSE_CHECK_URLS - The URL of your BigCommerce store, can be multiple urls separate by comma.
• LIGHTHOUSE_CHECK_GITHUB_ACCESS_TOKEN - The github user personal access token.
• LIGHTHOUSE_CHECK_WEBHOOK_URL - The slack webhook url for your channel.

Configuration

This action is triggered everytime a commit is pushed to the master branch.

name: Lighthouse CI

on:
  push:
    branches: [ master ]

jobs:
  lighthouse-check:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@master
    - name: Lighthouse
      uses: foo-software/lighthouse-check-action@master
      with:
        urls: ${{ secrets.LIGHTHOUSE_CHECK_URLS}}
        gitAuthor: ${{ github.actor }}
        gitBranch: ${{ github.ref }}
        gitHubAccessToken: ${{ secrets.LIGHTHOUSE_CHECK_GITHUB_ACCESS_TOKEN }}
        sha: ${{ github.sha }}
        slackWebhookUrl: ${{ secrets.LIGHTHOUSE_CHECK_WEBHOOK_URL }}