Deployment Pipeline Tutorial: Deploy React App to cPanel via GitHub Actions

Deploying a React application to a cPanel server can seem daunting, but the process can be automated and streamlined. In this tutorial, I’ll guide you through setting up a continuous deployment pipeline to push your React app to your cPanel server using FTP whenever you update your code.

Prerequisites

Before we dive in, ensure you have the following:

• A React app pushed to a GitHub repository.
• Access to your cPanel account.

Step-by-Step Guide

Step 1: Add FTP Credentials

The first step in setting up our deployment pipeline is to ensure we have the necessary FTP credentials to upload our build files to the cPanel server.

• Create an FTP Account on cPanel
• Log in to your cPanel account.
• Navigate to the FTP Accounts section.
• Create a new FTP account for your domain.
• Note down the FTP username, password, and host URL.

Creating a dedicated FTP account for your deployment can help manage access and keep your credentials secure.

• Check Your FTP Credentials
• Use FileZilla or any other FTP explorer to verify your FTP credentials. This step ensures that the credentials you have are correct and working.

By verifying your FTP credentials beforehand, you can avoid potential issues during the deployment process.

Step 2: Add FTP Credentials to GitHub Action Secrets

Next, we need to securely store our FTP credentials in our GitHub repository. GitHub Actions allow us to store sensitive information, such as FTP credentials, as encrypted secrets.

• Navigate to your GitHub repository settings:
  https://github.com/your-account/your-repo/settings/secrets/actions
• Add the following secrets:
  FTP_PASSWORD: Enter your FTP password.
  FTP_SERVER: Enter ftpusername@hosturl.com.
  FTP_USERNAME: Enter your FTP username.

By storing your credentials as secrets, you ensure that they are not exposed in your repository.

Step 3: Create a GitHub Actions Workflow

GitHub Actions workflows automate your software development lifecycle, enabling you to build, test, and deploy your code right from GitHub.

• Go to the Actions tab in your GitHub repository:
  https://github.com/your-account/your-repo/actions
• If you already have workflows, click on the New Workflow button on the left sidebar.
• If you don’t have workflows, you’ll see workflow templates. Search for Node.js and click on Configure for the Node.js template.

Creating a workflow from a template can help you get started quickly and ensure that your workflow is set up correctly.

Step 4: Set Up the Workflow File

The final step is to configure the workflow file to build and deploy your React app. Replace the contents of the workflow file with the following pipeline steps:

name: 🚀 Shipping Build
on:
  push:
    branches:
      - [YOUR_BRANCH_NAME_THAT_YOU_WANT_TO_PUBLISH]
jobs:
  FTP-Deploy-Action:
    name: 🎉 Deploy
    runs-on: ubuntu-latest

    steps:
      - name: 🚚 Get latest code
        uses: actions/checkout@v3
        with:
          fetch-depth: 2
      - name: Use Node.js 16
        uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Cache npm dependencies
        uses: actions/cache@v3
        id: cache-node-modules
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
      - name: 🔨 Install Dependencies
        if: steps.cache-node-modules.outputs.cache-hit != 'true'
        run: |
          npm install
        env:
         NODE_OPTIONS: "--max_old_space_size=4096"
         CI: false
      - name: 🏗 Build Project
        run: npm run build
      - name: 📂 Sync folders and files to the server
        uses: SamKirkland/FTP-Deploy-Action@4.3.3
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: dist/

Workflow Steps Explanation

• Get latest code: This step fetches the latest code from the repository to ensure the workflow is using the most recent changes.
• Use Node.js 16: Sets up Node.js version 16 to ensure compatibility with your project.
• Cache npm dependencies: Caches the node_modules folder to speed up subsequent builds by reusing previously downloaded dependencies.
• Install Dependencies: Installs npm dependencies if they are not already cached.
• Build Project: Runs npm run build to compile your React application.
• Sync folders and files to the server: Uses FTP to transfer the built files to your cPanel server.

Note: I’ve set CI to false to avoid pipeline fails cause of warnings, up to you If you want to make it true.

With this setup, every time you push changes to the specified branch, the GitHub Actions workflow will automatically build your React app and deploy it to your cPanel server via FTP. This automation ensures that your latest changes are always live without manual intervention, saving you time and reducing the risk of errors.

Find me on your favorite platform

• Github — Follow me on GitHub for further useful code snippets and open source repos.
• LinkedIn Profile — Connect with me on LinkedIn for further discussions and updates.
• Twitter (X) — Connect with me on Twitter (X) for useless tech tweets.