54.3 F
San Jose
More
    Engineering Advice How to Develop Serverless Vuejs Application with AWS Amplify?

    How to Develop Serverless Vuejs Application with AWS Amplify?

    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 Framework

    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.

    serverless vuejs application

    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.
    serverless vuejs application

    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 the 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 sign 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 src folder. You can configure the app in 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

    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?

    Avatar
    Sarbjit Grewalhttps://www.tekkiwebsolutions.com/
    Mr. Sarbjit Singh Grewal is the Founder & CEO of Tekki Web Solutions Pvt. Ltd. an IT company delivering integrated business intelligence software solutions for the past decade. In 2006, he capitalized on his 13 years of experience in the global trade flow and software industry by leading Tekki Web Solutions Pvt. Ltd. and since then has been serving as the CEO
    serverless vuejs application

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here

    five × four =

    Table of Content

    COVID-19 Global Report
    42,079,495
    Total confirmed cases
    Updated on October 23, 2020 11:10 am

    Popular Categories

    serverless vuejs application

    Latest article

    Best Open Source CMS for Your Business

    Gone are the days when you need specific technical knowledge to create any website. You can now make the website using the...

    Grow Your Business with Contactless Delivery App

    During the Covid-19, everybody wants to get the desired product delivered at his/her doorstep with any human contact. Due to this, the...

    Why Should You Choose Meteor Framework for Web App Development?

    With advancements in the technological world, every developer desires to build applications using mobile and web development frameworks. Undoubtedly, we have one...

    Front end Developer vs Back end Developer: Which One You Should Choose?

    Undoubtedly, web development is one of the exploding topics in the developer's world. The web development world's expansion is categorized into two...

    How to Develop Serverless Vuejs Application with AWS Amplify?

    Before the arrival of serverless vuejs application in the development world, there was a trend of using servers to manage all the...

    Must Read

    Step-by-Step Guide for MVP Development in 2020

    It is a common problem for all the startup owners to determine the feasibility of their ideas. Sometimes, they have an excellent...

    Scope and Impact of Telemedicine Solutions | Healthcare Industry

    In this era of advanced technology, almost every industry rely on technological devices. Whenever a person feels uncomfortable, they head to the...

    How to Create an Online eCommerce Store or Website?

    Before the beginning of the internet world, starting a business is really a daunting task for fresh entrepreneurs. Whether you have a...

    Top 6 Free and Open Source Project Management Software for Your Small Business

    Managing projects in a small business is not a piece of cake. It is much more challenging for small enterprises without the...

    What Everyone Must Know About On Demand Food Delivery Solutions?

    A few decades back, people were crazy about sitting and eating at the restaurants and food shops and collect memories by clicking...

    Popular Articles

    We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept