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 one1.
To follow along, you will need to have node and git installed.
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 firstname.lastname@example.org:<you>/<your-repo>.git and move into it with
In this directory, we will now ask quasar to create all necessary files and folders:
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”)2.
To initialize Amplify, run
Here is the transcript of my session:
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'3.
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
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.
Amplify supports github, gitlab, codecommit and bitbucket. ↩︎
In production you would limit the access of this role. But since Amplify can use a number of AWS services we would need a large policy anyways, so just using “AdministratorAccess” should be fine for now. ↩︎
Usually I am more careful what I commit, using
git add -pand other tools, but in this case blindly committing the output of the tools is OK I guess. ↩︎