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
An active AWS account.
Permissions to create resources in Amplify and CodeCommit. For more information, see Identity and Access Management for Amplify and Identity and Access Management for AWS CodeCommit.
AWS Command Line Interface (AWS CLI), installed and configured.
A text editor or code editor.
CodeCommit, set up for HTTPS users using Git credentials.
An IAM service role for Amplify.
npm and Node.js, installed
(npm documentation).
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](/images/prescriptive-guidance/latest/patterns/images/pattern-img/370c0a43-fc09-46dc-a018-853cbd4cff11/images/746a9450-6a0b-4798-bf22-e8f89c7933f6.png)
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
Epics
Task | Description | Skills 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 |
Task | Description | Skills required |
---|---|---|
Create a new React application. |
For more information about creating a custom React application, see the Create React App | App developer |
Create a branch and push the code. |
| App developer |
Task | Description | Skills 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.
| 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 |
Task | Description | Skills 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