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

Published in

Quasar Framework

3 min readApr 1, 2019

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

RECAP: In parts 1–3 we configured a Quasar application with AWS Amplify and started to create a simple ToDo application.

In our final segment, we will configure AWS AppSync for Quasar, update our GraphQL schema, and then we will add the remaining front-end code to complete our application.

Configuring our Quasar application for AWS AppSync

Using the Quasar CLI, we will add another boot file to deal with AppSync:

$ quasar new boot appsync

Add the following code to the src/boot/appsync.js file:

Updating App.vue

We need to update App.vue to add our Amplify authentication router guard and we tell Vue not to render our components until the client has been rehydrated:

Global CSS stylings

We will place our global CSS definitions in src/css/app.styl:

Todo application

And finally, we will complete our example Quasar application by adding the following code to pages/Todo.vue:

Running and testing your application

To start a local instance of your application using Quasar, run the following command in your project directory root:

$ quasar dev

Pushing to our development staging environment

$ amplify publish

Pushing to production

Every time you make a commit to your git repository, the Continuous Deployment we setup within the AWS Amplify console will build and deploy your site, just commit your changes and navigate to the AWS Amplify console to watch the process unfold.

Congratulations!

By now you should have a working example Quasar application with support for multiple users and authentication from AWS Cognito User Pools, a GraphQL API layer and database complements of AWS AppSync and DynamoDB, and an ElasticSearch component that we will show how to utilise in our future follow up posts.

We have shown how easy it is to get started with the Quasar Framework and how with very little effort, you can create secure and scaleable infrastructure for your application using AWS Amplify. I hope you have enjoyed reading this blog as much as I have enjoyed creating it.

Special thanks to the Quasar Framework team and @nothingismagick, for their support in creating this story, and especially the many bloggers and AWS Developer Advocates who also made this possible by sharing and creating similar enablement content.

All of the source code for this project is available at https://github.com/mfreeman451/quasar-amplify-demo

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.