Deploying mono-repo React app built with Vite using GitHub Actions on AWS

Introduction

In today’s fast-paced development environment, deploying React.js applications efficiently and reliably is essential for delivering exceptional user experiences. With the rise of monolithic repositories (mono-repos) and modern build tools like Vite, developers seek streamlined deployment processes to scale their applications seamlessly. In this guide, we’ll explore how to deploy a mono-repo React app built with Vite using GitHub Actions on AWS.

Folder structure for the mono-repo:

apps
│
├── client
│   ├── package.json
│   └── src
│
└── services

Folder structure of the mono-repo.

Goal

Our goal is to simplify the deployment process for React.js applications while automating the deployment pipeline using GitHub Actions. By leveraging AWS services, specifically S3 for hosting, we aim to ensure reliable deployments and empower developers with efficient deployment practices.

Prerequisites

Before diving into deployment, ensure the following prerequisites are met:

• You have a GitHub repository for the existing mono-repo code.
• Basic AWS knowledge and an AWS account are required.
• Basic common sense.

Steps

a. Create an IAM user in AWS

1. Navigate to the AWS IAM console and create a new IAM user with the necessary permissions, such as the S3FullAccess policy.

Select ‘Attach policies directly’ and then select ‘AmazonS3FullAccess’.

2. Generate access and secret keys for the IAM user (select third-party service as the use-case) and download the CSV file for future use.

Go to created IAM -> Security credentials -> Create access key.

Select ‘Third-party service’ as the use case for the access key.

b. Create an S3 bucket

1. Create an S3 bucket on AWS with the name ‘website-deployment’.
2. Enable ACLs and disable block public access when creating the bucket.

Select ‘ACLs enabled’ and disable ‘Block Public Access’.

c. Set up GitHub repository secrets

1. Make your GitHub repository public.
2. Go to repository settings, then secrets and variables, and then actions.

Go to Settings -> (On the left) Secrets and variables -> Actions.

2. Click on ‘new repository secrets’ and create the following secrets: AWS_S3_BUCKET, AWS_ACCESS_KEY, AWS_SECRET_KEY.

(On the right) Click New repository secret.

3. Paste the correct values obtained earlier for these secrets.

d. Create GitHub Actions workflow

1. Browse your code repository and create a new directory named ‘.github/workflows’ at the root directory.
2. Inside the workflows directory, create a new YAML file named ‘build-deploy-client-to-s3.yaml’.

Root directory structure of the repository.

3. Paste the provided content in the YAML file.

name: Upload Website

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm install
        working-directory: apps/client

      - name: Build app
        run: npm run build
        working-directory: apps/client

      - name: Upload to S3
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read
        env:
          SOURCE_DIR: apps/client/dist/
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_KEY }}

e. Push code to trigger the event

1. Add, commit, and push the code to the GitHub repository to trigger the event.
2. Navigate to the repository on GitHub, open Actions, and monitor the build information.

Go to GitHub repo -> Actions.

3. Check the logs in case of errors or failed builds, and make necessary fixes.

Select the latest workflow run to check the build logs.

f. Configure S3 for static web hosting

1. Go to the AWS S3 console, select the created bucket, and navigate to properties.

2. Scroll to the bottom and enable static web hosting.

3. Set the index document to ‘index.html’.

4. Verify the hosted URL to ensure successful deployment.

Conclusion

Deploying mono-repo React apps built with Vite using GitHub Actions on AWS offers a streamlined deployment pipeline, enabling developers to deliver exceptional user experiences with ease. By automating deployment processes and leveraging AWS services, teams can achieve reliable and scalable hosting, ultimately driving innovation and efficiency in their development workflows. With these steps, you’re well on your way to mastering the art of deploying modern React.js applications. Happy coding!

Note: For React projects built with CRA (create-react-app), adjust the SOURCE_DIR in the GitHub Actions workflow YAML file to apps/client/build.

This guide was written by Balindam on Medium.