Deploying a React Application using Amazon Amplify with GitLab

Here we will explain the process of deploying a React application using Amazon Amplify and connecting it to a GitLab repository. This seamless integration allows for continuous deployment, making it easier to manage and update your React project.

Prerequisites

• A React application hosted on a GitLab repository.
• An AWS account with access to Amazon Amplify.

Step 1: Set Up Your React Application

1. Create a React App: If you don’t have a React application yet, create one using Create React App:

npx create-react-app test-react-app
cd test-react-app

1. Commit to GitLab: Commit your React application code to a GitLab repository.

git init
git add .
git commit -m "Initial commit"
git remote add origin <your-gitlab-repo-url>
git push -u origin master

Step 2: Set Up Amazon Amplify

1. Create an Amplify App:

• Open the AWS Management Console and navigate to the Amplify service.
• Click “Get Started” under the “Deploy” section.
• Connect your GitLab repository.
• Click “Connect App” and select GitLab.
• Authenticate with GitLab and choose the repository.

2. Configure Build Settings:

• Amplify will automatically detect your React app and suggest build settings.
• Confirm or adjust build settings, including the branch to deploy (e.g., dev).

Step 3: Configure AWS Amplify CI/CD

1. Set Up CI/CD:

• Amplify will create an amplify.yml file in the root directory.
• Ensure the frontend section includes your build and deploy settings.

frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'

2. Commit and Push:

• Commit the changes, including the amplify.yml file, to your GitLab repository.

git add .
git commit -m "Configure Amplify CI/CD"
git push

3. Monitor Deployment:

• Visit the Amplify console to monitor the deployment progress.

Step 4: Accessing Your Deployed React App

1. View Deployment:

• Once the deployment is complete, access your React application’s URL provided by Amplify.

2. Test with GitLab Branch:

• Create a new branch in your GitLab repository (e.g., feature-branch).
• Make changes and commit to the new branch.
• Push changes to the branch.

3. Automated Deployment:

• Amplify will automatically detect the changes in the new branch and trigger the CI/CD pipeline.
• Monitor the progress in the Amplify console.

This setup enables continuous deployment for your React application, ensuring seamless integration with your GitLab repository.