Automate Sapper Deployments with Github Actions

This will go through how to use Github Actions to deploy a Sapper website to AWS S3

All code created in this tutorial is available in a template form at https://github.com/theswerd/sapper-githubactions-s3-demo

Prerequisites

• Node + npm installed
• Git installed
• An AWS Account
• A Github Account

Setup

Create a Github Repository

1. Go to https://github.com/new
2. Name your repository and click Create Repository

Clone your repository

In the directory where you want your project to be, run the following command:

git clone https://github/YOURUSERNAME/YOURREPOSITORYNAME.git

Note: Replace YOURUSERNAME with your username and YOURREPOSITORYNAME with your repository name

Initialize Sapper

Inside of your repository directory run

npx degit "sveltejs/sapper-template#rollup" . --force

Note: Webpack will also work

Setting Up AWS

1. Login to your AWS Console
2. Create an S3 Bucket - remember the name for later
3. Turn on public access
4. Create an IAM User

• Go to the IAM Users Page
• Click Add User
• Give the IAM User Programmatic Access
• When it asks you to set up permissions, click Attach existing policies directly
• Give it AmazonS3FullAccess (More fine-grained access control is doable, however, it takes much more work)
• Skip through the rest of the steps and click Create User
• Copy the Access key ID and Secret access key for later

Setup Github Secrets

Github Secrets will be used to store your sensitive AWS information so that it is not directly visible in your Github Action code.

Go to:

https://github.com/YOURUSERNAME/YOURREPOSITORYNAME/settings/secrets/actions

Note: Replace YOURUSERNAME with your username and YOURREPOSITORYNAME with your repository name

Click New Repository Secret

Secrets:

1. The first secret will be your Access key ID, which you should name AWS_ACCESS_KEY_ID
2. Your second secret will be your Secret access key, which you should name AWS_SECRET_ACCESS_KEY
3. Your third secret will be your S3 location, which you should name S3. It should be formatted like s3://yourbucket/

Create Github Action

All Github Actions are located within a Github project’s .github/workflows folder.

To create the deployment action, create deploy_to_s3.yaml in the `.github/workflows folder.

Sections

Name

Github Actions start with a name at the top of the file. You can add a name by making the first line of your deployment file

name: DEPLOY

On

This action describes when to run the action.

To run on pushes to the main branch, you can add these lines to the action:

on:
  push:
    branches:
      - main

Note: If you are on a project with the main branch named master, you will need to change main to master for this action to run.

Jobs

Jobs describes the jobs the action has to run.

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2
    - name: Configure AWS credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: us-west-1
    - name: Install Node + NPM
      uses: actions/setup-node@v2
    - name: Install dependencies
      run: npm install
    - name: Build Sapper
      run: npm run export
    - name: Deploy to S3
       env:
        S3: ${{ secrets.S3 }}
      run: aws s3 sync __sapper__/export/ $S3 --delete

Together this action will look like

name: DEPLOY WEBSITE
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2
    - name: Configure AWS credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: us-west-1
    - name: Install Node + NPM
      uses: actions/setup-node@v2
    - name: Install dependencies
      run: npm install
    - name: Build Sapper
      run: npm run export
    - name: Deploy to S3
      env:
        S3: ${{ secrets.S3 }}
      run: aws s3 sync __sapper__/export/ $S3 --delete

You have created an auto-deploying svelte app with Github Actions 🎉🎉🎉

All code created in this tutorial is available in a template form at https://github.com/theswerd/sapper-githubactions-s3-demo