Building a Serverless Webapp with Amplify and Quasar - Day 1

We have been helping a customer to build an internal application using AWS Amplify for all-in-one hosting as well as CI/CD and Quasar as an UI framework. This work has led to a Meet-Up (virtual of course) where I helped as AWS expert.

If you want to follow along, these are my notes from the first session.

The goal is to build a Photo Sorting App (sharing could be added later). So we need some UI, Authentication and Storage. We also want at least one test-environment and automated builds. We use github as git provider, but you are totally free to choose a different one¹.

To follow along, you will need to have node and git installed.

Amplify is designed to split your App into two parts: The frontend and the backend (shocking, I know). The backend is built from AWS Services such as S3 (file storage), DynamoDB (NoSQL database) and Cognito (authentication). The frontend uses HTML, javascript and CSS. We will be using the Quasar UI framework for the frontend.

Amplify supports having multiple backends and multiple frontends. Each frontend is attached to one backend and “talks” to the infrastructure in it. We want one backend for development as we will be hosting the frontend on our computer for testing. Furthermore we want one backend and frontend each per git branch. This way we can test feature branches and have the frontend and backend of the main branch be in productive use.

When we work in a team, every person can have their “own” backend for testing.

We begin by installing the command-line tools for quasar and amplify:

npm install -g @quasar/cli @aws-amplify/cli # you may need sudo for this

Then we create a new github repository (private or public):

Note that I asked github to create a README.md so that the repository contains a commit as that makes the following steps easier.

Now we clone the repository: git clone git@github.com:<you>/<your-repo>.git and move into it with cd <your-repo>.

In this directory, we will now ask quasar to create all necessary files and folders: quasar create. This is a transcript of what questions it asked and my answers:

? Generate project in current directory? Yes
? Project name (internal usage for dev) myfirstquasaramplifyapp
? Project product name (must start with letter if building mobile apps) Photo App
? Project description The Photo App of the Meetup
? Author me
? Pick your favorite CSS preprocessor: (can be changed later) Sass
? Pick a Quasar components & directives import strategy: (can be changed later) Auto import
? Check the features needed for your project: ESLint (recommended), Vuex, Vue-i18n
? Pick an ESLint preset: Prettier
? Continue to install project dependencies after the project has been created? (recommended) NPM

The choices of name, description, CSS preprocessor, and ESLint preset are obviously personal choice. NPM will now download half the internet and spill it onto your computer. To check the result, run quasar dev; the page will be compiled and a local web-server will be started for preview:

Commit the current state into git with git add . && git commit -m 'quasar init'. Now we will create the necessary amplify environment. For that we need to have aws credentials configured as shown here. These credentials will be used by the amplify CLI to update all necessary AWS services, so they will need full access (policy “AdministratorAccess”)². To initialize Amplify, run amplify init. Here is the transcript of my session:

? Enter a name for the project MyFirstQuasarAmplify
? Enter a name for the environment dev
? Choose your default editor: Vim (via Terminal, Mac OS only)
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npx quasar build
? Start Command: npx quasar dev
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use: default

Please be sure to set the build and start command correctly.

Amplify will now create an (empty) App in Amplify. You can check in the AWS console that it was successful.

When you now run amplify serve, amplify will check if the backend is up-to-date and update it if necessary. Then it will build the frontend (using npx quasar build in our case) and then run the Quasar development server (npx quasar dev for us). Now you can check that the Quasar default page still works by visiting http://localhost:8080.

This is a good time to commit to git: git add . && git commit -m 'amplify init'³.

Now we will tell AWS how to actually build the project for deploying it into the cloud. For that, we will create an amplify.yml with the following content:

version: 1
applications:
  - appRoot: .
    backend:
      phases:
        build:
          commands:
            - amplifyPush --simple
    frontend:
      phases:
        build:
          commands:
            - npm install
            - npx quasar build
      artifacts:
        baseDirectory: dist/spa
        files:
          - '**/*'
      cache:
        paths:
          - node_modules

Note that here we only have to tell Amplify how to build our project, as hosting it will be handled by Amplify without configuration. We do have to tell it what to host though, that’s why we configured dist/spa as artifact directory.

Please commit this file to git (git add amplify.yml && git commit -m 'add build spec').

Now we will attach the github repository and thus the frontend to AWS Amplify. For this we must authenticate Amplify with github:

And create a IAM Role for Amplify to change things in our AWS account:

Please note that I choose to create a new backend with the name main. I also configured to use the latest amplify-CLI version.

Now the build process should be starting. If that is finished, you can open the link and should be greeted by the quasar default page.

That’s all for today, we have the basic structure set up, next week we will begin programming in earnest. If you want to join us, take a look at our MeetUp page!

See you in the next article.