Automating React App Deployment with GitHub Actions and DigitalOcean

Introduction

Deploying a React application manually can be time-consuming and error-prone. By leveraging GitHub Actions, we can automate the build and deployment process, ensuring a smooth and efficient CI/CD pipeline. In this blog, we’ll walk through a GitHub Actions workflow that builds a React application and deploys it to a DigitalOcean server using SSH.

Understanding the GitHub Action File

The following GitHub Actions workflow automates the build and deployment process for a React app hosted on a DigitalOcean server:

  name: Build and Deploy
  on:
    push:
      branches:
        - main
  jobs:
    build-and-deploy:
      runs-on: ubuntu-latest
      steps:
        - name: Checkout Repository
          uses: actions/checkout@v2
        - name: Setup Node.js
          uses: actions/setup-node@v2
          with:
            node-version: '18.20.5'
        - name: Install Yarn
          run: npm install -g yarn
        - name: Install Dependencies
          run: yarn install
        - name: Build React App
          run: CI=false yarn build
        - name: Deploy to DigitalOcean Server
          uses: appleboy/scp-action@master
          with:
            host: ${{ secrets.DIGITALOCEAN_HOST }}
            username: ${{ secrets.DIGITALOCEAN_USER }}
            key: ${{ secrets.DIGITALOCEAN_SSH_KEY }}
            passphrase: ${{ secrets.DIGITALOCEAN_SSH_PASSPHRASE }}  # Omit this line if your key doesn't require a passphrase
            port: 22
            source: "build/"
            target: "/var/www/websitename/websitename-frontend"

Breakdown of Workflow Steps

1. Triggering the Workflow

• The workflow runs on every push to the main branch.
• This ensures that any new code changes are automatically built and deployed.

2. Checkout Repository

• The actions/checkout@v2 action clones the repository so that the workflow has access to the code.

3. Setup Node.js

• The actions/setup-node@v2 action installs Node.js version 18.20.5, ensuring that the correct environment is set up.

4. Install Yarn

• Yarn is installed globally to manage dependencies more efficiently.

5. Install Dependencies

• Runs yarn install to install all required dependencies for the React application.

6. Build React App

• The React application is built using yarn build.
• CI=false is set to prevent warnings from failing the build.

7. Deploy to DigitalOcean Server

• Uses the appleboy/scp-action to securely copy the built project to the DigitalOcean server.
• The deployment details are stored as GitHub Secrets for security.

Setting Up GitHub Secrets

To ensure secure deployment, GitHub Secrets must be configured with the following:

Secret Name	Description
DIGITALOCEAN_HOST	Your server’s IP address
DIGITALOCEAN_USER	The SSH username for your server
DIGITALOCEAN_SSH_KEY	The private SSH key used for authentication
DIGITALOCEAN_SSH_PASSPHRASE	(Optional) SSH key passphrase if applicable

Why Use This Approach?

✅ Fully Automated Deployment – No manual intervention is needed. 

✅ Secure Deployment – Uses SSH keys instead of passwords. 

✅ Reliable & Repeatable – Every push to main triggers deployment.

 ✅ Works with DigitalOcean – Ideal for self-hosted applications.

Conclusion

By setting up GitHub Actions and DigitalOcean, you can automate your React app deployment efficiently. This approach saves time, reduces errors, and ensures your application is always up to date. 🚀