Continuously deploy a modern AWS Amplify web application from an AWS CodeCommit repository - AWS Prescriptive Guidance
SummaryPrerequisites and limitationsArchitectureToolsEpicsRelated resources

Continuously deploy a modern AWS Amplify web application from an AWS CodeCommit repository

Created by Deekshitulu Pentakota (AWS) and Sai Katakam (AWS)

Environment: PoC or pilot

Technologies: Web & mobile apps; DevOps; Modernization

AWS services: AWS Amplify; AWS CodeCommit

Summary

Modern web applications are constructed as single-page applications (SPAs) that package all application components into static files. By using AWS Amplify Hosting, you can build a continuous integration and continuous deployment (CI/CD) pipeline that builds, deploys, and hosts a modern web application that is managed in a Git-based repository. When you connect Amplify Hosting to the code repository, each commit initiates a single workflow to deploy the application frontend and backend. The benefit of this approach is that the web application is updated only after the deployment is successfully completed, which prevents inconsistencies between the frontend and backend.

In this pattern, you use an AWS CodeCommit repository to manage your modern web application. The sample web application in these instructions uses the React SPA framework. However, Amplify Hosting supports many other SPA frameworks, such as Angular, Vue, Next.js, and it also support single-site generators, such as Gatsby, Hugo, and Jekyll.

This pattern is intended for AWS builders who have experience with the following services and concepts:

  • AWS CodeCommit

  • AWS Amplify Hosting

  • React

  • JavaScript

  • Node.js

  • npm

  • Git

Prerequisites and limitations

Prerequisites

Limitations

  • This pattern doesn’t discuss development and integration of a backend for the Amplify application, such as an API, authentication, or database. For more information about backends, see Create a backend in the Amplify documentation.

Product versions

  • AWS CLI version 2.0

  • Node.js version 16.x or later

Architecture

Target technology stack

  • AWS CodeCommit repository containing a React SPA

  • AWS Amplify Hosting workflow

Target architecture

Architecture diagram of deploying a web app from a CodeCommit repo and hosting with AWS Amplify

Tools

AWS services

  • AWS Amplify Hosting provides a Git-based workflow for hosting full-stack serverless web applications with continuous deployment.

  • AWS CodeCommit is a version control service that helps you privately store and manage Git repositories, without needing to manage your own source control system.

  • AWS Identity and Access Management (IAM) helps you securely manage access to your AWS resources by controlling who is authenticated and authorized to use them.

Other tools

  • Node.js is an event-driven JavaScript runtime environment designed for building scalable network applications.

  • npm is a software registry that runs in a Node.js environment and is used to share or borrow packages and manage deployment of private packages.

Epics

TaskDescriptionSkills required

Create a repository.

For instructions, see Create an AWS CodeCommit repository in the CodeCommit documentation.

AWS DevOps

Clone the repository.

For instructions, see Connect to the CodeCommit repository by cloning the repository in the CodeCommit documentation. If you are prompted, provide the Git credentials.

App developer
TaskDescriptionSkills required

Create a new React application.

  1. Enter the following command to navigate into cloned repo. Replace <repo name> with the name of your CodeCommit repo.

    $ cd <repo name>

  2. Enter the following command to create a new React application in the cloned repository.

    $ npx create-react-app .

  3. Code the application, and then enter the following command to start it.

    $ npm start

For more information about creating a custom React application, see the Create React App instructions in the Create React App documentation. You can also deploy a sample React application to your Amplify account by following the instructions in Deploy a frontend in the Amplify documentation.

App developer

Create a branch and push the code.

  1. Enter the following command to create a new branch locally, where <branch> is the name you want to assign to the new branch.

    $ git checkout -b <branch>

  2. Enter the following command to push the branch to the CodeCommit repository, where <branch> is the name you assigned in the previous step. For more information, see Working with commits.

    $ git push --set-upstream origin <branch>
App developer
TaskDescriptionSkills required

Connect Amplify to the repository.

For instructions, see Connect a repository in the Amplify Hosting documentation. Select AWS CodeCommit and the repository and branch you created previously.

App developer

Define the frontend build settings.

For instructions, see Confirm build settings for the frontend in the Amplify Hosting documentation. Accept the defaults or enter the following.

Build settings:
version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
App developer

Review and deploy.

For instructions, see Save and deploy in the Amplify Hosting documentation. Wait until the deployment process is complete.

App developer
TaskDescriptionSkills required

Verify initial deployment.

When the deployment process is complete, under Domain, choose the link. Verify that the application is operating as expected.

App developer

Push a change to the code repository.

Edit the code on your local workstation and push the changes to CodeCommit repository. Amplify Hosting detects the change in the repository and automatically starts the build and deployment process. Confirm that the application updates are visible on the domain.

App developer

Related resources

AWS CodeCommit documentation

AWS Amplify Hosting documentation

React resources