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.

Host web app

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.

Choose provider and authorize Amplify Console

Once a provider is authorized, I choose the repo and branch to watch for changes.

Add repository branch

Once I’ve confirmed the settings, the initial build and deploy will start.

Initial build and deploy starts

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.

Host web app

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

choose Deploy without Git provider

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.

Start a manual deployment section

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:

  1. On the branch list page, choose Connect branch.
  2. Choose a branch from your repository.
  3. 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 Development

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.

Connect branch

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.

Add repository branch

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.
Provision Build Deploy Verify

AWS Amplify hosting 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.