Build your first full-stack serverless app with Vue and AWS Amplify

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.

Amplify CLI

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

  • 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.

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
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
<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
  • 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
amplify status

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

<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>
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
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.

Thanks for reading!

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gerard Sans

Gerard Sans

Helping Devs to succeed #AI #web3 / ex @AWSCloud / Just be AWSome / MC Speaker Trainer Community Leader @web3_london / @ReactEurope @ReactiveConf @ngcruise