logo 1 1
Contact Us
Contact Us

Hosting Front End Apps With AWS Amplify

hosting front end apps with aws amplify

In my opinion, using AWS Amplify provides one of the fastest ways to get a new web application from idea to prototype on AWS. AWS Amplify is a framework for building modern applications, with a toolchain for easily adding services like authentication (via Amazon Cognito) or storage (via Amazon Simple Storage Service (S3)) or GraphQL APIs, all via a command-line interface. AWS Amplify Console makes continuous deployment and hosting for your modern web apps easy. It supports hosting the frontend and backend assets for single page app (SPA) frameworks including React, Angular, Vue.js, Ionic, and Ember. Amplify Console hosting provides a git-based workflow for hosting fullstack serverless web apps with continuous deployment.

By using Amplify Console, you can take advantage of features like continuous deployment, instant cache invalidation, custom redirects, and simple configuration of custom domains.

After choosing Amplify Console for hosting, I can pick manual deployment or continuous deployment using a git-based workflow.

Continuous deployment

First, I’m going to set up continuous deployment so that changes to our git repo will trigger a build and deploy.

If you are starting from the “All apps” page, choose “New app, Host web app” in the upper right corner.

img1 7
As my forked repo is on GitLab, I chose GitLab to host my web app. I also need to authorize Amplify Console to use my GitLab account.
img2 1 1
Once a provider is authorized, I choose the repo and branch to watch for changes.
img3 5
Once I’ve confirmed the settings, the initial build and deploy will start.
img4 1
Then any changes to the selected git branch will result in additional builds and deploys. A quick check of the URL in my browser confirms that the app has been successfully deployed.

Manual deployment

From the “All apps” page, choose “New app, Host web app” in the upper right corner.

img5 1

On the “Host your web app” page, choose “Deploy without Git provider”. Then, choose “Continue”.

img6
In the Start a manual deployment section, for App name, enter the name of your app. For the Environment name, enter a meaningful name for the environment, such as development or production. For Method, choose Drag and drop. Either drag and drop files from your desktop onto the drop zone or use Choose files to select the files from your computer. The files that you drag and drop or select can be a folder or a zip file that contains the root of your site. Choose Save and deploy.
img7

Feature branch deployments and team workflows

The Amplify Console is designed to work with feature branches and GitFlow workflows. The Amplify Console leverages Git branches to create new deployments every time a developer connects a new branch in their repository. After connecting your first branch, you can create a new feature branch deployment by adding a branch as follows:

  • On the branch list page, choose Connect branch.
  • Choose a branch from your repository.
  • Save and then deploy your app.

Your app now has two deployments available at https://main.appid.amplifyapp.com and https://dev.appid.amplifyapp.com. This may vary from team-to-team, but typically the main branch (formerly referred to as the master branch) tracks release code and is your production branch. The develop branch is used as an integration branch to test new features. This way beta testers can test unreleased features on the develop branch deployment, without affecting any of the production end users on the main branch deployment.

mobile 1

Getting started with existing code

In this walkthrough, you learn how to continuously build, deploy, and host a modern web app. Modern web apps include Single Page App (SPA) frameworks (for example, React, Angular, or Vue).

To get started, go to your created app and click on the “Connect branch” button to the right corner.

img8 1
On clicking the connect branch, it will ask you to select any branch from the repository which you have connected while creating the app. Select a branch which you want to host and click next.
img9 1

This will take you to review for a final check with the “Save and Deploy” option. Review all of your settings to ensure everything is set up correctly. Choose Save and deploy to deploy your web app to a global content delivery network (CDN). Your front end build typically takes 1 to 2 minutes but can vary based on size of the app.

Access the build logs screen by selecting a progress indicator on the branch tile. A build has the following stages:

  1. Provision – Your build environment is set up using a Docker image on a host with 4 vCPU, 7GB memory. Each build gets its own host instance, ensuring that all resources are securely isolated. The contents of the Docker file are displayed to ensure that the default image supports your requirements.
  2. Build – The build phase consists of three stages: setup (clones repository into container), deploy backend (runs the Amplify CLI to deploy backend resources), and build front end (builds your front-end artifacts).
  3. Deploy – When the build is complete, all artifacts are deployed to a hosting environment managed by Amplify. Every deployment is atomic – atomic deployments eliminate maintenance windows by ensuring that the web app is only updated after the entire deployment has completed.
  4. Verify – To verify that your app works correctly, Amplify renders screen shots of the index.html in multiple device resolutions using Headless Chrome.
img10 1

AWS Amplify hosting features

AWS Amplify Features
  • Manage production and staging environments for your frontend and backend by connecting new branches.
  • Connect your application to a custom domain.
  • Preview changes during code reviews by setting up pull request previews.
  • Improve your app quality with end to end tests.
  • Passwords protect your web app so you can work on new features without making them publicly accessible.
  • Set up rewrites and redirects to maintain SEO rankings and route traffic based on your client app requirements.
  • Instant cache invalidations ensure your app is updated instantly on every code commit.
  • Atomic deployments eliminate maintenance windows by ensuring that the web app is updated only after the entire deployment finishes. This eliminates scenarios where files fail to upload properly.
  • Get screenshots of your app rendered on different mobile devices to identify layout issues.

Techpearl’s professionals expertise in Amazon Web Services. Click here to find out how we can cutomise the best Web apps for you.

Read More Articles

 Contact Us Now

Talk to us to find out about our flexible engagement models.

Get Started
logo 1 1

We build custom software solutions, faster hassle-free with quality

Get Started

Copyrights © 2024 All Rights Reserved by Techpearl Software Pvt Ltd.

Company

Career We are Hiring

Our Services

Explore More

Contact Us

Facebook logo PNG12
Screenshot 4
download
logo 1 1
Contact Us

Get In Touch With Us