GitHub Actions

This uses the ubuntu:latest image. It is designed to fire manually from the UI, or to be scheduled through the GitHub scheduling interface. This pipeline will fetch the tokens, build the code, and upload it to an S3 bucket. It leverages the fact that GitHub provides the AWS CLI tooling natively. The second step could be removed and replaced with a command to ship the artifact to a host of your choice.

1# A name for your job
2name: Handoff Token Automation Workflow
3
4on:
5  # Trigger on Push
6  push:
7    branches: [main]
8  # Trigger twice a day on schedule
9  schedule:
10    # * is a special character in YAML so you have to quote this string
11    - cron: "30 */12 * * *"
12  # Manual Trigger
13  workflow_run:
14
15# The main job
16jobs:
17  build:
18    # Use Ubuntu Latest for the build
19    runs-on: ubuntu-latest
20    # These env vars are required
21    env:
22      AWS_DEFAULT_REGION: us-east-1
23      AWS_DEFAULT_OUTPUT: json
24      FIGMA_PROJECT_ID: ${{ secrets.FIGMA_PROJECT_ID }}
25      DEV_ACCESS_TOKEN: ${{ secrets.DEV_ACCESS_TOKEN }}
26      AWS_CLOUDFRONT_DIST_ID: ${{ secrets.AWS_DISTRIBUTION }}
27      AWS_S3_BUCKET: ${{ secrets.AWS_BUCKET }}
28      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
29      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
30    # Build against node 18
31    strategy:
32      matrix:
33        node-version: [18.x]
34
35    steps:
36      # Use the GitHub Checkout toolchain
37      - uses: actions/checkout@v3
38      # Verify that node 18 is ready
39      - name: Use Node.js ${{ matrix.node-version }}
40        uses: actions/setup-node@v3
41        with:
42          node-version: ${{ matrix.node-version }}
43      # Set git defaults so we can commit fetched tokens on the next step
44      # Change the email address here so this is committed by the right user
45      - name: Set Git Defaults
46        run: |
47          git config --global user.email "handoff@convertiv.com"
48          git config --global user.name "Handoff Development"
49      # Fetch tokens from Figma and push them back to the repository
50      - name: Fetch from Figma
51        run: |
52          npm install --legacy-peer-deps
53          npm run fetch
54          git commit -a -m "[skip ci] updating changelog with latest Figma changes"
55          git push
56      # Build a static site
57      - name: Build static site
58        run: |
59          npm run build
60      # Deploy built artifacts to S3
61      - name: Deploy to S3 Bucket
62        run: |
63          aws s3 sync --delete dist/ s3://${{env.AWS_S3_BUCKET}}/
64          aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_DISTRIBUTION }} --paths /\*
65

1. Setup GitHub Actions
2. Setup NodeJS with the proper version
3. Setup the GitHub defaults
4. Fetch Figma changes and add to repo

• Install the dependencies via npm
• Fetches the data from Figma
• Commits the changes back to the repository
• Pushes the changes

5. Build the static site and export to /dist

• Builds the static site
• Exports the artifact to the dist/ Folder

6. Upload to remote server

• Uploads the artifact to an S3 bucket
• Invalidates a CloudFront distribution