Deploy VUE JS App on AWS Amplify

You wanna learn to Deploy VUE js app on AWS? Learn how to deploy Vue js app in few simple steps. Auto deploy and CI/CD through Github and others.

This tutorial is valid for single page vue apps with or without webpack. Not valid for server-side vue apps like Nuxt.

AWS Amplify

As it is evident from the title, the service from AWS we are going to use is Amplify. If you already have an AWS account go directly to Amplify here. Otherwise, signup here and continue to amplify.

The AWS Amplify Console provides a Git-based workflow for hosting fullstack serverless web apps with continuous deployment. A fullstack serverless app consists of a backend built with cloud resources such as GraphQL or REST APIs, file and data storage, and a frontend built with single page application frameworks such as React, Angular, Vue, or Gatsby.

The AWS Amplify Console simplifies the deployment of your application frontend and backend. Connect to your code repository and your frontend and backend are deployed in a single workflow, on every code commit. This ensures that your web application is only updated after the deployment is successfully completed, eliminating inconsistencies between your application front end and backend. AWS Amplify Console makes it easier for you to build, deploy, and host your mobile web applications, enabling you to quickly iterate on feedback and get new features to your users faster.

Deploy vue js app

Now let’s get to the main business. Once inside your Amplify Console, you will see UI similar to this where all current deployments will be shown and you can connect a new application.

amplify console

As we discussed its a git-based workflow so when you start to connect the app it will ask you to select a git provider. Here we will see how we can do it with GitHub only.

connecting git provider aws amplify

Once you select a git-provider it will auth your account with it and on the next screen, you will be shown the repositories to select from. Once you select a repo it will ask you to select a branch from that specific repository.

connecting github repo on aws amplify

Once you select repo and branch, it will auto-detect the project type and let you edit and download the build settings. On the next step, it will show you a review of all settings. Go ahead and deploy it.

build setting on aws amplify

Next, you will see a deployment pipeline is running. like this. It will update on all steps and you get a link of your newly deployed app there like the following one I got for mine. Here you can see my app.

deploy vue js app
vue js deploy pipeline

Thanks for reading. Let me know in the comments if you face any issue here or need me to cover any more topics. If you want to learn more on vue js head here. and learn to make Circle rotate animation in CSS.

Pin It on Pinterest