How to Develop Serverless Vuejs Application with AWS Amplify?

Step 1: How to create and config the Vue project?

Let’s first begin with the Vuejs project setup. To attain this, you have to install Vue CLI and create a new project:

npm install -g @vue/cli
vue create vue-serverless-new-project

Now, first, change the directory and install the AWS Amplify libraries:

cd vue-serverless-new-project
yarn add aws-amplify aws-amplify-vue

Read More: VueJS Best Practices for Web Development

Step 2: How to install or config Amplify CLI?

Amplify CLI offers a set of commands to automate the cloud service setup and provision. After creating a Vue project, now the next step is to install the Amplify CLI. here we go:

npm install -g @aws-amplify/cli

Now, run configure command to configure CLI with AWS user.

amplify configure

After installing and configuring the Amplify CLI, now you can create a new Amplify project using this command:

amplify init

Other Amplify CLI commands are:

• amplify init – to set up a new environment
• amplify push – to push local resources to the cloud
• amplify status – to list local resources and current status.

Step 3: How to add authentication to AWS Amplify?

After creating and initializing the Vue and AWS Amplify project, you can now add authentication to your project. In actual, AWS Amplify provides authentication which gives access to AWS Cognito. Use the command to add authentication:

amplify add auth 

After adding authentication to the project, you will get three prompt messages, then choose the following options:

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

Step 4: How to push the changes to AWS Cloud?

To push the changes to AWS cloud and enable the resources, use the command:

amplify push

You can check the status of the Cognito User Pool using the command:

amplify status

Step 5: How to Configure the Vue Project?

You the auto-generated file aws-exports.js in the src folder. You can configure the app in the main.ts file using the following code:

import Amplify from 'aws-amplify';
import '@aws-amplify/ui-vue';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);

Step 6: How to use the Authenticator Component?

As we mentioned earlier, AWS Amplify offers UI components that you can use in your application. All you need is to add the authenticator component to src/App.vue file.

<template>
<div id="app">
<amplify-authenticator>
<div>
<h1>Hey, {{user.username}}!</h1>
<amplify-sign-out></amplify-sign-out>
</div>
</amplify-authenticator>
</div>
</template>

You can check the authentication flow in your app components. This authentication flow allows the users to sign in/ sign out in the application.

Further, if you want to access the user’s info, then you can use Auth API. Have a look at the following commands:

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

Step 7: How to publish an application on AWS?

Use the hosting category to deploy the application on AWS.

amplify add hosting

But before publishing the application on AWS, you have to make some changes like:

• Plugin module to execute: Amazon Cloudfront and S3
• Environment set up: DEV
• Hosting bucket name: BUCKETNAME
• Index doc for the website: index.html
• Error doc for the website: index.html

Now you can run the command:

amplify publish

If you want to clean out all the resources from your project, then you can use the command:

amplify delete