#todayilearned

by @jm3 · aka John Manoogian3

Frequent, bite-size mini-milestone updates as I fast-forward merge* my front-end web development skills up to 2019 levels. Learn more

AWS Amplify Console for CI/CD pipelines

Posted at — Jun 8, 2019

AWS Amplify is a Javascript library. But AWS Amplify CONSOLE is mostly free docker-ized, one button deploy pipeline tool that will listen for git commits and then fire off Docker-ized builds of your app, build and deploy your app to an s3 bucket, and set up the Cloudfront CDN and SSL certificates for you, automatically, saving several annoying AWS configuration steps.

I had to do some mild customization of the build script to use the latest version of Hugo and then generate responsive versions of all my image art files at 5 different sizes; those modifications look like this:

version: 0.1
frontend:
  phases:
    build:
      commands:
        - wget "https://github.com/...hugo/releases/hugo-v0.55.6.tar.gz"
        - tar -xf "hugo_0.55.6_Linux-64bit.tar.gz"
        - mv hugo /usr/bin/hugo
        - rm -rf "hugo_0.55.6_Linux-64bit.tar.gz"
        - hugo version
        - npm install
        - npx postcss --version
        - npm run resize-images
        - npx hugo --config config/hugo.toml
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

I ❤️ it. This site is deployed and built for production using AWS Amplify Console. The tool even screenshots your app using headless Chrome in a number of different mobile-device-screen-sized browser configurations to give you a quick visual preview of how your deployed app looks at different screen sizes.

AWS Amplify - screenshot of builds