Creating a Quasar Framework application with AWS Amplify services (Part 2/4)

Published in

Quasar Framework

6 min readApr 1, 2019

Update 2/14/2022 — Please try https://github.com/mfreeman451 to find my repository for this tutorial.

RECAP: In part 1 of Creating a Quasar Framework application with AWS Amplify services, we installed the Quasar V1-beta and AWS Amplify CLIs, and then we created a simple Quasar application using the Quasar CLI tool. We also used the AWS Amplify CLI to configure our AWS credentials and create a new Amplify project with API and auth. Amplify has staged our changes and will wait for us to add additional services or push and publish.

Adding S3/CloudFront hosting

This may not be necessary in your final deployment, since we will show you our preferred Continuous Deployment method for pushing/provisioning our Quasar application, but this is a useful facility for testing and may be considered another “staging” environment.

$ amplify add hosting

Select Prod and continue.

Choose a legible name for the hosting bucket and select the defaults for the next two selections:

Deploying to the cloud

We will use the Amplify CLI to build our local back-end resources and provision it in the cloud (AppSync/DynamoDB/Cognito/S3+CloudFront).

$ amplify push

AWS Amplify can generate javascript code for our GraphQL queries and Mutations that are ingestible by graphql-tag — select the defaults for the remaining prompts:

After this, AWS Amplify will deploy your AWS resources using CloudFormation templates.

This may take some time, meanwhile now might be a good time to become a Patreon of Quasar Framework!

When it finishes, you should get links in your terminal for the GraphQL and hosting endpoints, click the hosting endpoint to see if our deployment worked.

You might see a page like this, don’t worry this should go away after we use Amplify to publish our site.

Publish our project

Next we will use the Amplify CLI to publish our web application:

$ amplify publish

After it is finished, you should receive confirmation and the CloudFront URL to your application:

We now have a working Quasar V1 app deployed using the AWS Amplify CLI!

Continuous Deployment with AWS Amplify

Next, we will look at the Continuous Deployment method for deploying web apps to AWS Amplify. Open your web browser and navigate to AWS Amplify from within the AWS web console at https://aws.amazon.com and then click the ‘Connect’ button to get started.

We are using Github for this project. If you haven’t created a new repository and added your project to it yet, now would be a good time to do so. We have created a repository in our Github called quasar-amplify-demo and will use the following commands in our project directory to get started:

$ git init
$ git add .
$ git commit -m "Initial commit"
$ git remote add origin https://github.com/mfreeman451/quasar-amplify-demo.git
$ git push origin master

Add repository service

For more information on using AWS Amplify in multiple environments and working with git branches, check out this link.

Add your repository and specify your working branch

Configuring our build settings

These next steps are important and specific to Quasar, allowing us to correctly specify the build directories our project uses and some of the commands we need to run before we build our project.

Make sure you choose the ‘dev’ environment from the first drop-down, and the ‘amplifyconsole-backend-role’ from the second drop-down before moving on.

Scroll down in the page to the Build Settings area, we are going to change the defaults from this:

To this:

We added the ‘npm install -g @quasar/cli’ command on line 13, removed the [] from commands: [] on line 16 and added the ‘quasar build -m pwa’ command on line 17, and finally we’ve updated the baseDirectory stanza on line 20 to point at our build directory, ‘/dist/pwa’

version: 0.1
backend:
  phases:
    # IMPORTANT - Please verify your build commands
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm install -g @quasar/cli
        - npm ci
    build:
      commands:
        - quasar build -m pwa
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: /dist/pwa
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Save your changes and click the Next button at the bottom of the page to continue. Finally, review your changes and click the Save and Deploy button.

To begin the Continuous Deployment lifecycle, go into your project source base, make a change, and then save and commit it to your git repository. We will make a simple update to the README.md, and then push our change to github to begin the process.

Once you’ve done this, navigate to the AWS Amplify console and you can monitor the build process:

After a successful deployment, you should see something like this:

Click the link on the left to navigate to your new site. We now have 3 development sites essentially — our local environment running at localhost:8080 that we will use for most of our development, instantiated using the ‘quasar dev’ command, our CloudFront/S3 instance we created with the ‘amplify publish’ command, and our “prod-dev” site that we setup within the AWS Amplify Console and push out changes to by making a commit to our ‘master’ github branch. You may only need your local environment and the Continuous Deployment site. If you feel the urge, you can remove it by executing the ‘amplify remove hosting’ command within your project directory.

Our application is now deployed through AWS and now we can move on to configuring our application to use AWS Cognito for authentication. You can find information on how to do this in Part 3, stay tuned..

My name is Michael Freeman, I am a member of the Quasar Framework staff and a full-stack developer working with VueJS, GraphQL, Kafka, and Apache Spark. I also specialize in Network Management Systems.