Build your first full-stack serverless app with Vue and AWS Amplify
Tags: aws, amplify, vue, javascript
Published: 2020-09-29 19:21:00

![Image](https://miro.medium.com/max/1400/1*a2_qscA1yBWQdDpF81CN6g.png)

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**](#introduction-to-aws-amplify)
* [Setting up a new project with the **Vue CLI**](#amplify-cli)
* [Installing **Amplify CLI**](#prerequisites)
* [Adding **authentication**](#adding-authentication)
* [**Publishing** your app](#publishing-your-app)
* [Cleaning up **cloud services**](#cleaning-up-services)

Please let me know if you have any questions or want to learn more on the above at [@gerardsans](https://twitter.com/intent/user?screen_name=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](https://cli.vuejs.org/). 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](https://docs.amplify.aws/start/getting-started/installation/q/integration/vue) 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_](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:

```javascript
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`:

```javascript
<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_](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**.

```javascript
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](https://twitter.com/intent/user?screen_name=gerardsans).

![Image for post](https://miro.medium.com/max/720/1*J9DNmPDsRts_0lMUliXwBw.jpeg)

> My Name is [Gerard Sans](https://twitter.com/gerardsans). I am a Developer Advocate at [AWS Mobile](https://aws.amazon.com/products/mobile) working with [AWS Amplify](https://aws-amplify.github.io/) and [AWS AppSync](https://aws.amazon.com/appsync/) teams.