Site icon Tekki Web Solutions Pvt. Ltd.

How to Develop Serverless Vuejs Application with AWS Amplify?

serverless vuejs application

Before the arrival of serverless vuejs application in the development world, there was a trend of using servers to manage all the tasks. Undoubtedly, even today, full-stack application development needs developers with frontend, backend, and operational knowledge. But before digging deeper into the serverless vuejs application world, let’s first understand what serverless exactly mean?

Every person who hears about this term for the first time means it is an application without servers. But, this is far away from reality. It doesn’t mean your application would not have servers, it will contain servers, but you need not worry about the server configurations.

Today, we are going to discuss the serverless vuejs application development with AWS Amplify. We will use the Vue.js with AWS Amplify.

Vuejs is a popular framework from the JavaScript family. It is an open-source MVC(model-view-controller) framework used to develop beautiful UI (user interfaces) and single-page applications. The extraordinary Vuejs features like availability of virtual DOM, data binding, CSS transitions, and animations, HTML based templates, etc.

The popularity of Vuejs development can be judged from the SimilarTech website statistics, in which they illustrated the number of Vuejs websites in different countries. Have a look at it.

AWS Amplify

AWS Amplify is the contribution of the AWS company. AWS Amplify is a JavaScript library that allows you to develop and deploy serverless vuejs applications in the cloud. The main idea behind developing the AWS Amplify is that the developers can create applications without actually going into the AWS console. The mobile and web developers can create applications using the Amplify Framework (Amplify libraries and Amplify CLI) and integrations AWS cloud services and AWS Amplify Console.

  • Amplify Libraries: it consists of aws-amplify and @aws-amplify/ui-vue.
  • Amplify CLI: Command Line Interface for configuring and integrating the cloud services.
  • UI Components: photo-picker, chatbots, and authenticators.
  • Cloud Services: authentication, storage, notifications, analytics, etc.

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

Well done! Now your resources have been created, and you can start working on them.

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';

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.

<div id="app">
<h1>Hey, {{user.username}}!</h1>

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';

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

Thus, this is all about the serverless Vue applications’ configurations and development using the AWS Amplify. In addition to this, you can work with GraphQL, storage, authentication, etc. I hope you enjoyed this article on Serverless Vue Application with AWS Amplify. If you want such changes in your applications, you can hire vuejs developers of reputed vuejs development company, Tekki Web Solutions Pvt. Ltd.

Read More: VueJS vs Gatsby – Which is the best Framework to use?