Build flexible, scalable, and reliable apps with AWS Amplify

In this tutorial, you will learn how to build a full-stack serverless app using Vue and AWS Amplify. You will create a new project and add a full authorisation flow using the authenticator component. This includes:

• Introduction to AWS Amplify
• Setting up a new project with the Vue CLI
• Installing Amplify CLI
• Adding authentication
• Publishing your app
• Cleaning up cloud services

Please let me know if you have any questions or want to learn more on the above at @gerardsans.

Introduction to AWS Amplify

Amplify makes developing, releasing and operating modern full-stack serverless apps easy and delightful. Mobile and frontend web developers are being supported throughout the app life cycle via an open source Amplify Framework (consisting of the Amplify libraries and Amplify CLI) and seamless integrations with AWS cloud services, and the AWS Amplify Console.

• Amplify libraries: in this article we will be using aws-amplify and @aws-amplify/ui-vue.
• Amplify CLI: command line tool for configuring and integrating cloud services.
• UI components: authenticator, photo picker, photo album and chat bot.
• Cloud services: authentication, storage, analytics, notifications, AWS Lambda functions, REST and GraphQL APIs, predictions, chat bots and extended reality (AR/VR).
• Offline-first support: Amplify DataStore provides a programming model for leveraging shared and distributed data without writing additional code for data reconciliation between offline and online scenarios.

By using AWS Amplify, teams can focus on development while the Amplify team enforces best patterns and practices throughout the AWS Amplify stack.

Amplify CLI

The Amplify CLI provides a set of commands to help with repetitive tasks and automating cloud service setup and provision.

Some commands will prompt questions and provide sensible defaults to assist you during its execution. These are some common tasks. Run:

• amplify init, to setup a new environment. Eg: dev, test, dist.
• amplify push, to provision local resources to the cloud.
• amplify status, to list local resources and their current status.

The Amplify CLI uses AWS CloudFormation to manage service configuration and resource provisioning via templates. This a declarative and atomic approach to configuration. Once a template is executed, it will either fail or succeed.

Setting up a new project with the Vue CLI

To get started, create a new project using the Vue CLI. If you already have it, skip to the next step. If not, install it and create the app using:

yarn global add @vue/cli  
vue create amplify-app

Navigate to the new directory and check everything checks out before continuing

cd amplify-app  
yarn serve

Prerequisites

Before going forward make sure you have gone through the instructions in our docs to sign up to your AWS Account and install and configure the Amplify CLI.

Setting up your Amplify project

AWS Amplify allows you to create different environments to define your preferences and settings. For any new project you need to run the command below and answer as follows:

amplify init

• Enter a name for the project: amplify-app
• Enter a name for the environment: dev
• Choose your default editor: Visual Studio Code
• Please choose the type of app that you’re building javascript
• What javascript framework are you using vue
• Source Directory Path: src
• Distribution Directory Path: dist
• Build Command: npm run-script build
• Start Command: npm run-script serve
• Do you want to use an AWS profile? Yes
• Please choose the profile you want to use default

At this point, the Amplify CLI has initialised a new project and a new folder: amplify. The files in this folder hold your project configuration.

<amplify-app>  
    |\_ amplify  
      |\_ .config  
      |\_ #current-cloud-backend  
      |\_ backend  
      team-provider-info.json

Installing the AWS Amplify dependencies

Install the required dependencies for AWS Amplify and Vue using:

yarn add aws-amplify @aws-amplify/ui-vue

Adding authentication

AWS Amplify provides authentication via the auth category which gives us access to AWS Cognito. To add authentication use the following command:

amplify add auth

When prompted choose:

• Do you want to use default authentication and security configuration?: Default configuration
• How do you want users to be able to sign in when using your Cognito User Pool?: Username
• Do you want to configure advanced settings? No

Pushing changes to the cloud

By running the push command, the cloud resources will be provisioned and created in your AWS account.

amplify push

To quickly check your newly created Cognito User Pool you can run

amplify status

To access the AWS Cognito Console at any time, go to the dashboard at https://console.aws.amazon.com/cognito. Also be sure that your region is set correctly.

Your resources have been created and you can start using them!

Configuring the Vue application

Reference the auto-generated aws-exports.js file that is now in your src folder. To configure the app, open main.ts and add the following code below the last import:

import Vue from 'vue'  
import App from './App.vue'  

+ import Amplify from 'aws-amplify';  
+ import '@aws-amplify/ui-vue';  
+ import aws\_exports from './aws-exports';  

+ Amplify.configure(aws\_exports);  

Vue.config.productionTip = false  

new Vue({  
  render: h => h(App),  
}).$mount('#app')

Using the Authenticator Component

AWS Amplify provides UI components that you can use in your app. Let’s add these components to the project

In order to use the authenticator component add it to src/App.vue:

<template>  
  <div id="app">  
+    <amplify-authenticator> 
+      <div>  
+        <h1>Hey, {{user.username}}!</h1>  
+        <amplify-sign-out></amplify-sign-out>  
+      </div> 
+    </amplify-authenticator>
  </div>  
</template>
<script>  
+ import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components'

export default {  
  name: 'app',  
  data() {  
    return {  
+      user: { },
    }  
  },  
  created() {  
+    // authentication state managament  
+    onAuthUIStateChange((state, user) => {  
+      // set current user and load data after login  
+      if (state === AuthState.SignedIn) {  
+        this.user = user;  
+      }  
+    }) 
  }  
}  
</script>

You can run the app and see that an authentication flow has been added in front of your app component. This flow gives users the ability to sign up and sign in.

To view any users that were created, go back to the Cognito Dashboard at https://console.aws.amazon.com/cognito. Also be sure that your region is set correctly.

Alternatively you can also use:

amplify console auth

Accessing User Data

To access the user’s info using the Auth API. This will return a promise.

import { Auth } from 'aws-amplify';
Auth.currentAuthenticatedUser().then(console.log)

Publishing your app

To deploy and host your app on AWS, we can use the hosting category.

amplify add hosting

• Select the plugin module to execute: Amazon CloudFront and S3
• Select the environment setup: DEV
• hosting bucket name YOURBUCKETNAME
• index doc for the website index.html
• error doc for the website index.html

Now, everything is set up & we can publish it:

amplify publish

Cleaning up Services

To wipe out all resources from your project and your AWS Account, you can do this by running:

amplify delete

Conclusion

Congratulations! You successfully built your first full-stack serverless app using Vue and AWS Amplify. Thanks for following this tutorial.

You have learnt how to provide an authentication flow using the authenticator component or via the service API and how to use Amplify CLI to execute common tasks including adding and removing services.

Thanks for reading!

Have you got any questions regarding this tutorial or AWS Amplify? Feel free to reach out to me anytime at @gerardsans.

My Name is Gerard Sans. I am a Developer Advocate at AWS Mobile working with AWS Amplify and AWS AppSync teams.