Building, authenticating and hosting VueJS App with AWS Amplify
By: Bryan Chua
Tags: Software Development, Vuejs, Authentication, Front End Development, AWS

Getting started with VueJS and AWS Amplify

The rising trends and love for VueJS is no surprise for many developers. With over 160k stars on Github, many developers and companies, including big and small, have been adopting it since the very beginning. With the ease of developing a responsive and impressive frontend application using VueJS, it is no wonder that developers are looking for the same development experience and turning their attentions to cloud services and libraries to automatically spin up and connect the cloud capabilities together.

AWS Amplify is an open-source library that supports many modern javascript frameworks and native mobile platforms i.e. iOS and Android. The Amplify CLI also provides the developer the ability to create a whole set of serverless, feature-rich features such as Auth, API, Analytics, Storage and Hosting with best practices in the AWS environment with their own comfortable console terminal. Since it is open-source and community-driven, any developers who is interested in contributing to AWS Amplify development or its communities, can easily vote and create tickets in its respective Github repositories, and see each project’s roadmap (e.g. Amplify JS Roadmap & Projects) as well.

Project setup

In this project, we will setup a brand new VueJS app, use your own AWS account, and add Vue CLI and AWS Amplify CLI via your favorite terminal. If you are not familiar with VueJS or AWS, it is okay to take a step back to understand the concept and art of building modern apps first and not get your hands dirty. This guide is meant for everyone and I will add notes and explanations to better guide each step. You can also refer to this Github repository for the source code as we go along.

With the ease of developing a responsive and impressive frontend application using VueJS, it is no wonder that developers are looking for the same development experience…

NodeJS version

To make sure that your terminal is compatible with the latest AWS Amplify CLI (minimum 10.0 and above) and Vue CLI (minimum 8.9 and above, 8.11.0+ recommended), you need to be running with at least node v10 and above in your terminal. Enter the following command to make sure that you are running the latest node version:

node -v

If you realize that you are not using the latest node/npm, you can use the Node Version Manager (NVM) to install and select the node version you need. You can enter the following command to install and use node version 13.

nvm install 13 && nvm use 13

Install @vue/cli

This is optional for you to actually start development with VueJS but in this project, I am going to use the @vue/cli to quickly create vue project with additional features such as Babel or TypeScript transpilation, ESLint integration and end-to-end testing.

yarn global add @vue/cli

# OR

npm install -g @vue/cli

Install @aws-amplify/cli

The Amplify Command Line Interface (CLI) is a unified toolchain to create AWS cloud services for your app. Let’s go ahead and install the Amplify CLI.

yarn global add @aws-amplify/cli

# OR

npm install -g @aws-amplify/cli

A new Vue app

Let’s start with a new Vue app by running the following command:

vue create aws-amplify-vuejs

I am also going to select the default preset given by the @vue/cli and add babel and eslint to the vue project.

VueJS default preset

Once you have let the cli to finish its job, you should be able to go inside the project folder to begin the next step.

cd aws-amplify-vuejs

You can use your favorite IDE to open up the project and take a look at the new project. In this example, i am going to use VSCode for development.

Your VueJS New App

Now you can start your VueJS development and see your changes in your local browser

yarn serve

It is Amplify time

Within the new VueJS app, I am going to configure my cloud services using Amplify CLI by entering the following command:

amplify init

You can now step-through and key in the respective values for your project name to be seen in the AWS console and environment you are in. In additional, if you do not have an AWS profile in your terminal, you will be also entering the AWS credentials for your AWS profile in your terminal.

amplify init

After the amplify configuration, you should be able to see the new folder named amplify and there is a new aws-export.js in your VueJS app. These are auto-generated by AWS Amplify CLI and it will add new identifiers and credentials needed for every new component you added via the CLI.

Auto-generated folder and files

Adding AWS Amplify to your VueJS app

Once you setup the VueJS app and the AWS environment, you now need to add aws-amplify and its UI components to your VueJS app.

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

# OR

npm install -S aws-amplify @aws-amplify/ui-vue

After that, you can add the following javascript codes to your main.js to configure the AWS Amplify libraries in your VueJS app.

import '@aws-amplify/ui-vue';

import Amplify from 'aws-amplify';

import awsconfig from './aws-exports'; Amplify.configure(awsconfig);

Add Amplify in your VueJS main.js

Add Auth to your VueJS app

After you have configured amplify within the VueJS app, you are now ready to add features to your newly built app. We are going to add Auth to your app. Let’s go back to the terminal and run this command in your project folder to add auth features and services.

amplify add auth

amplify add auth

In this example, we are not going to configure a lot and complicate the whole auth process. However, you can easily re-configure this in the future with the following command.

amplify update auth

After you have added auth to your amplify, you can now see if what kind of resources will be added in your AWS environment by entering the following command.

amplify status

amplify status

After you have confirmed the resources to be added to your AWS environment, you can now enter the following command to push your changes to the AWS cloud.

amplify push

This should take some time as in your AWS environment, new auth resources will be added with best practices such as new IAM roles with minimum permissions required and all of these event changes and resources can be seen in your AWS CloudFormation. Back to the VueJS app,

you can now open up your App.vue to edit the codes and include the auth features you need.

Default codes in App.vue

Firstly, let’s refer to the aws amplify documentations and take a look at what is needed to be added.

<template>

<amplify-authenticator>

<div>

My App

<amplify-sign-out></amplify-sign-out>

</div>

</amplify-authenticator>

</template>

In this code example, you can see that my app is wrapped around <amplify-authenticator> and I also can add a dedicated sign out button with <amplify-sign-out> . If you copy-paste the codes given in the example, your app will look like this after logged in.

Amplify Auth, after logged in

It is not that beautiful to begin working with and instead, I am going to use the VueJS’s HelloWorld component as my main screen and add the amplify auth component around it.

Add auth code for VueJS

Next, I want to customize a little bit to the default Amplify Auth screen by adding extra HTML header texts and also, I do not want the mega-large sign out button so I attached a new id to the component to better style it. In addition, you can add more customization and style by theming too.

Custom attributes for Amplify Auth

Now that we have added the auth features, given some customizations and styles, I can now test the app via http://localhost:8080/. If you have previously closed/cancelled the node process in your terminal, enter the following command again to start development again.

yarn serve

Amplify Auth Screen with some customization

Now, you can go ahead and create a new account. You also can use the following credentials to see the whole login process.

username: demo

password: P@ssw0rd

Have you noticed that you literally did not code any of these auth functionalities and all we did is to add the respective auth components from the Amplify UI libraries?

After you have successfully logged in, you should be able to see your main component with a sign out button below it.

VueJS with Amplify Auth

Your final javascript code with amplify auth in App.vue should look like codes given below.

<template>

<div id="app">

<amplify-authenticator>

<amplify-sign-in header-text="My Custom Sign In Text" slot="sign-in"></amplify-sign-in>

<div>

<img alt="Vue logo" src="./assets/logo.png" />

<HelloWorld msg="Welcome to Your Vue.js App" />

<div id="amplify-signout">

<amplify-sign-out></amplify-sign-out>

</div>

</div>

</amplify-authenticator>

</div>

</template> <script>

import HelloWorld from "./components/HelloWorld.vue"; export default {

name: "App",

components: {

HelloWorld

}

};

</script> <style>

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

#amplify-signout {

width: 100px;

margin: 0 auto;

}

</style>

Add Hosting to your Vue App

Now that you have built first beautiful VueJS app, you want to host it somewhere. AWS Amplify CLI and Amplify Console got you covered! Fortunately, you can add hosting via the following command and choose git-based deployment under Hosting with Amplify Console .

amplify add hosting

amplify add hosting

Your browser should now open and lead you to the AWS Amplify Console. Firstly, you can link the app to your code repository and in this case, I am using my personal Github account to version all my codes.

Amplify Console, Add Repository Branch

Under step 2, you now need to select the Git Repository and its Branch for Amplify Console to know what and which to deploy.

Amplify Console, Configure Build Settings

Lastly, under step 3, you can review your configuration one more time before Save and Deploy .

Amplify Console, Review and Deploy

You should now see your changes being deployed via the AWS Amplify Console and note that for every changes you push to your repository under that selected branch earlier, Amplify Console will also automatically deploy your changes to your portal.

First Deployment at Amplify Console

Now, for Vue routers to work properly, you have to add a rewrite rule under Amplify Console with source address </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> , target address /index.html and type 200 for the status code.

Rewrites and redirects under Amplify Console

Going back to your terminal, you can proceed by pressing ENTER and you should be able to see your portal URL within the terminal too.

Back to your amplify command

BONUS: I also went back to the Amplify Console to update my DNS and point vuejs.bryanchua.io to the portal.

Add Custom DNS at Amplify Console

When you enter the command amplify status , you should be able to see your updated hosting URL too.

amplify status

What’s next

In this small project, I have only covered the basic functionalities of both VueJS and AWS Amplify, and showed how easy it is to add server-side functionalities within your frontend codes and beautify them. The beauty of using these advanced libraries is that there is literally no/less codes to write. You can now focus more time on user experience (UX) and delivering values via your app.

Any thoughts about it? What do you want to see next? Feel free to reach out if you have any questions and I am available on LinkedIn and Twitter.