How to Deploy a Framework7 App to AWS via CI/CD

In this tutorial I will explain the easiest way to create an automatic CI/CD pipeline in order to deploy a Framework7 app to AWS. The goal is to have your pipeline automatically build and deploy your project every time you commit a change to the main GitHub branch. In order for you to follow along I assume you already have a F7 app and it is hosted on a public GitHub repository. If you don’t have an application yet, use the F7 CLI to create one. Also, make sure you are signed up to AWS by creating an account there.

1 Create a new S3 Bucket on AWS

In AWS Management Console enter “S3” and select “Buckets”.

Then, fill out the form like this:

• Give it a name
• Choose a region
• Deselect “Block all public access”
• Enable “I acknowledge that the current settings might result in this bucket and the objects within becoming public”
• Leave the rest as is

2 Set AWS S3 Bucket Policies

In your bucket list click on the one you just created. Click the “Permissions” tab and then scroll down to Bucket policy and click on “Edit”. Paste in the following code:

    {
        "Version": "2012-10-17",
        "Id": "Policy1589309574299",
        "Statement": [
            {
                "Sid": "Stmt1589309569196",
                "Effect": "Allow",
                "Principal": "*",
                "Action": "s3:GetObject",
                "Resource": "REPLACE_WITH_BUCKET_ARN/*"
            }
        ]
    }

Disclaimer: This snippet I shamelessly copied from Anna Aitchison’s excellent article on dev.to.

Do not save yet! Instead, change the placeholder REPLACE_WITH_BUCKET_ARN under “Ressource”. You can find your ARN in the properties tab in your bucket info. Also do not remove the /* part at the end!

3 Enable AWS S3 Static Hosting

• Go to the Properties tab
• Scroll down all the way to “Static website hosting”
• Click on edit
• Click on enable
• Under “Index document” put in index.html
• Leave the rest as is
• Hit “Save changes”

4 Enable HTTPS

It is a good practice to always force-enable SSL for our Framework7 app, so let’s do that using AWS CloudFront. This will also provide you a nice cloudfront.net url. To get started follow these steps:

• Search for “CloudFront” in your AWS Console search bar and select it
• Click on “Create Distribution”
• Under Web, choose “Get Started”
• In “Origin Domain Name” pick the bucket your just created
• For Viewer Protocol Policy, choose Redirect HTTP to HTTPS. This will force SSL
• Leave the rest as is and click on “Create Distribution” in the bottom right corner
• Give it a few minutes to create the distribution

Once it’s done click on the newly created distribution. Scroll down to “Domain Name”. It will show something in the form of 123whatever.cloudfront.net where 123whatever is a random series of letters and numbers which is specific to your account, so this value will be different! Your website will be available via https://123whatever.cloudfront.net later when our CI/CD pipeline is done.

5 Create IAM User

In order for our Framework7 CI/CD pipeline to work with GitHub actions we need to provide an access key and an id. For this a new user on AWS must be created.

• In your AWS Management Console enter “IAM” and then select it
• On the left click on “users”
• Click on “Add user”
• Choose a name
• Set Access type to “Programmatic access”
• In the bottom right corner click “Next”
• On the following page click “Attach existing policies directly”
• Search for “S3”
• Select “AmazonS3FullAccess”
• Click “Next”
• Skip “Add Tags” and click “Next”
• Your result should look something like on the screenshot below
• Click “Create user”

Important: On the next page copy both Access key and Secret Access key and store them on your computer in a secure way.

6 Add Secrets to GitHub

I assume that you have published your Framework7 app to a GitHub repository. If you haven’t done so, do it now.

• In your repo go to “Settings”
• Then choose “Secrets” on the left side
• Click on “New Repository Secret”
• As name enter AWS_ACCESS_KEY_ID
• As value enter your access key you received in the previous step
• Repeat with
  • AWS_SECRET_ACCESS_KEY
  • S3_BUCKET
  • S3_BUCKET_REGION

Tip: To find the correct values for S3_BUCKET and S3_BUCKET_REGION go to your bucket list in AWS, select the bucket and open the “Properties” tab. You will find the values here. In my case S3_BUCKET_REGION is eu-central-1 and S3_BUCKET is arn:aws:s3:::deploy-test-2.

7 Setup CI/CD Pipeline on GitHub

• Go back to your GitHub repo
• Select “Actions” from the top bar
• Click on Skip this and set up a workflow yourself
• Paste in the following code:

  name: Framework7 AWS Deploy
  on: [push]
  jobs:
  run:
  runs-on: ubuntu-latest
  env:
  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  steps: - uses: actions/checkout@v2

        - name: Install dependencies
          run: npm install

        - name: Build
          run: npm run build

        - name: Deploy
          uses: reggionick/s3-deploy@v3
          with:
            folder: www
            bucket: ${{ secrets.S3_BUCKET }}
            bucket-region: ${{ secrets.S3_BUCKET_REGION }}
            delete-removed: true
            no-cache: true
            private: true

• Click on “Start Commit” (Green button)
• Click on “Commit new file”
• Go back to Actions tab
• You should now see how:
  • The build is created
  • The app is pushed to AWS

8 View Your Framework7 App

Let GitHub Action do its job. This will take a couple minutes! It will show the status for each workflow in the table on that page. Once it’s done open your deployed Framework7 app like this: https://123whatever.cloudfront.net/index.html

Important: Replace 123whatever with the correct ID of your app. See step 4 in this tutorial what your personal url will be.

Congratulations!

We have now fully created a CI/CD pipeline with GitHub Actions and successfully deployed the Framework7 app. Every time you push to your main branch in GitHub a new build is automatically created and the update is deployed to AWS. Please let me know if this tutorial worked for you in the comments down below :)

You can find more Framework7 tutorials on my YouTube channel http://www.timoernst.tv