Deploying a web application using AWS Amplify Gen 2 with GitLab as the Repository on AWS

In today’s fast-paced digital landscape, businesses and developers alike are constantly seeking efficient ways to deploy web applications rapidly and securely. AWS Amplify Gen 2, coupled with GitLab’s robust version control system, offers a streamlined solution to this challenge. While AWS Amplify Hosting supports various repository options, this blog will guide you through deploying an application using AWS Amplify Hosting with GitLab as the repository.

AWS Amplify Gen 2 reimagines how frontend developers build full-stack applications on AWS, allowing for frontend and backend definition using TypeScript, file conventions, and Git branch-based environments. Combined with GitLab’s powerful version control and Continuous Integration and Continuous Deployment (CI/CD) features, this solution enables seamless and automated deployment of web applications, ensuring consistency and reducing the risk of manual errors.

In this blog post, I’ll guide you through the process of deploying a web application using GitLab as the repository and AWS Amplify Hosting as the deployment platform. You’ll learn how to leverage the simplicity and efficiency of this workflow, enabling you to focus on building great applications while AWS Amplify Gen 2 handles the deployment complexities.

Prerequisites

Before getting started you need to:

1. Create a GitLab Account and Project:Sign up for GitLab and create a new project.
2. Open Your IDE:Launch your preferred development environment.
3. Set Up React TypeScript + Vite App and Amplify Gen 2 Backend:
   • Use the command npm create vite@latest react-amplify-gen2 -- --template react-ts in your terminal to create a new React app with TypeScript using Vite.
   • Navigate to the newly created directory by using the command cd react-amplify-gen2 and install project dependencies using npm install.
   • Run npm create amplify@latest to configure Amplify Gen 2 in your GitLab repository. Note this command is essential for Amplify Gen 2 configuration to be detected in your GitLab repository.
   • Ensure that you set up your AWS account and configure an AWS profile locally for use with Amplify.
4. Commit and Push Changes:After completing the setup, commit all changes and push them to your GitLab repository.

After completing the prerequisites, you will walk through the following steps:

1. Creating an AWS Amplify Hosted application.
2. Authorizing AWS Amplify to access your Gitlab account.
3. Deploying the Sample App with Gitlab as the repository.

Host your React app on AWS Amplify Hosting

To get started, sign in to the Amplify console. If you are starting from the AWS Amplify home page, select Create new app at the top of the page, as shown in Figure 1.

Figure 1 Creating new app in AWS Amplify

If you already have an existing Amplify app, simply select “Create new app” from the “All apps” tab (Figure 2).

Figure 2 Adding new app in AWS Amplify

To get started, let’s choose our source code provider. In the Choose source code provider window, select GitLab, as depicted in Figure 3.

Figure 3 Selecting a source code provider in AWS Amplify

After selecting GitLab as the source code provider, scroll down and select Next.

Let’s start by adding a repository branch. AWS Amplify will open a pop-up window to sign in and authorize GitLab (Figure 4). Sign in to GitLab using your credentials created during Step 1 – “Create a GitLab Account and Project” of the Prerequisites section.

Figure 4 Sign into GitLab via AWS Amplify

Once you’ve signed into your GitLab account, you’ll be redirected to an authorization page. On the GitLab Authorization page, select Authorize, as shown in Figure 5.

Figure 5 Authorize AWS Amplify to access your GitLab account

Note — After you authorize the Amplify console with Bitbucket, GitLab, or AWS CodeCommit, Amplify fetches an access token from the repository provider, but it doesn’t store the token on the AWS servers. Amplify accesses your repository using deploy keys installed in a specific repository only.

Next, choose a repository and a branch in Add repository branch (Figure 6). It’s worth noting that Amplify Gen 2 supports monorepo workflows for full-stack builds using monorepo tools like Nx and Yarn workspaces.

Figure 6 Select your repository and branch in AWS Amplify

Once you’ve filled in the required fields for adding your repository branch, select Next.

Let’s review the application settings. AWS Amplify automatically populates the app name, frontend build command, build output directory, and create the necessary service roles. Users also have the ability to change these Amplify-populated fields, including the app name, frontend build command, and build output directory, as needed (Figure 7).

Figure 7 Review your app settings in AWS Amplify

Take a moment to inspect both Service role policies and Advanced settings in AWS Amplify console. Service role policies are necessary for performing actions on your behalf. Additionally, advanced settings give you the ability to use default build containers or provide your own, add environment variables, and override default installed versions of packages or tools for your applications.

Once you’ve finished, select Next.

Let’s review the application details. If there are any misconfigurations before deploying the application, you can resolve them. Select Edit on any field that requires remediation (Figure 8).

Figure 8 Review app details and settings prior to deployment via AWS Amplify

Now, select Save and deploy.
Please allow a few minutes for AWS Amplify to deploy your web application.

Figure 9 Access your AWS Amplify hosted app

Once your application is deployed, you can select Visit deployed URL or access the URL provided under Domain to view your web application, as depicted in Figure 9!

Optional: Update application code

When you connect Amplify Hosting to a code repository, each commit triggers a single workflow to deploy both the application frontend and backend. This method ensures that the web application is updated only after successful deployment, preventing inconsistencies between the frontend and backend.

In your IDE, navigate to the App.tsx file and replace the content with your code. Once you’ve updated your application code, commit and push your changes. After a few minutes, your changes will be deployed.

Cleaning Up

To avoid incurring additional charges, make sure to delete the resources created in this blog, including the GitLab project.

Navigate to the AWS Amplify console, select View app for the application created during this blog. Then, go to App settings followed by General settings. Finally, select Delete app to remove the application and associated resources (Figure 10).

Figure 10 Delete AWS Amplify app

Conclusion

This blog post illustrates how developers can deploy web apps using GitLab and AWS Amplify Hosting Gen 2. By integrating with Git platforms like GitLab, AWS Amplify streamlines deployment and focuses on simplifying CI/CD pipelines for efficiency. AWS Amplify Gen 2 supports a range of full-stack workflows, whether you need monorepos, branch deployments, or custom pipelines, enabling you to quickly deploy your web applications. To harness the power of AWS Amplify Gen 2 and streamline your deployment process, explore the AWS Amplify Gen 2 documentation, try out the hands-on AWS Amplify Gen 2 Workshop, and visit the AWS Amplify Hosting console to get started.