Streamline React.js Deployment: CI/CD with VS Code Integration

Continuous Integration/Continuous Delivery (CI/CD) is a fundamental practice in modern software development, significantly enhancing the speed, efficiency, and reliability of the deployment process. For React.js projects, implementing CI/CD means that every time you push code changes to your repository, an automated pipeline kicks in to build, test, and deploy your application. This automation minimizes manual errors, ensures consistent deployments, and allows developers to focus more on writing code and less on operational tasks.

A typical CI/CD pipeline for a React.js project involves several stages:

• Continuous Integration (CI): Developers integrate code into a shared repository frequently, usually multiple times a day. Each integration is then verified by an automated build and automated tests.
• Continuous Delivery (CD): After the CI phase, the application is automatically prepared for release to a production environment. This means the application is always in a deployable state.
• Continuous Deployment: An extension of CD, where every change that passes the automated tests is automatically deployed to production. This is often the ultimate goal for mature React.js projects.

Setting Up FTP on cPanel for React.js Deployment

To deploy your React.js project using FTP, you'll need to configure an FTP account on your cPanel. This account will serve as the destination for your built React.js application files from GitHub Actions.

Creating an FTP Account

1. Log in to your cPanel account.
2. Navigate to the "Files" section and click on "FTP Accounts."
3. Under "Add FTP Account," provide the following details:
   • Login: Choose a username for your FTP account (e.g., reactdeploy).
   • Password: Create a strong password.
   • Directory: This is crucial for determining where your React.js files will be placed. For React.js projects, you typically want your build output (the build folder) to be served as the main website content.
     • If your domain points directly to the public_html directory, you might set the directory to /public_html.
     • If you want to deploy your React.js project to a subdirectory (e.g., yourdomain.com/react-app), you would set the directory to /public_html/react-app. Example: For a standard React.js project where you want the application to be the primary content of your website, set the directory to /public_html. This ensures that when GitHub Actions sends the built files, they land directly where your website expects them.
   • Quota: Set an appropriate quota or select "Unlimited."
4. Click "Create FTP Account."

Make note of your FTP username, password, and FTP server address (usually your domain name or IP address) as you'll need these for GitHub Actions.

Configuring GitHub Actions for FTP Deployment

GitHub Actions will orchestrate the build and deployment of your React.js project. You'll need to store your FTP credentials as GitHub Secrets for security.

Adding GitHub Secrets

1. Go to your GitHub repository.
2. Click on "Settings" in the top navigation.
3. In the left sidebar, click on "Secrets and variables" and then "Actions."
4. Click on "New repository secret."
5. Add the following secrets:
   • Name: FTP_SERVER, Value: Your FTP server address (e.g., ftp.yourdomain.com).
   • Name: FTP_USERNAME, Value: Your FTP username (e.g., reactdeploy@yourdomain.com).
   • Name: FTP_PASSWORD, Value: Your FTP password.

These secrets will be securely accessed by your GitHub Actions workflow.

The deploy.yml Script for GitHub Actions

The core of your CI/CD pipeline lies in the deploy.yml file, which defines the workflow for GitHub Actions. This file should be placed in the .github/workflows/ directory of your React.js project.

Here's an example deploy.yml script, with inline styling to simulate editor highlighting:

name: Deploy React.js App to cPanel

on:
  push:
    branches:
      - main # Or the branch you want to deploy from (e.g., develop, production)

jobs:
  build-and-deploy:
    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' # Or your desired Node.js version

    - name: Install dependencies
      run: npm ci

    - name: Build React app
      run: npm run build

    - name: FTP Deploy
      uses: SamKirkland/FTP-Deploy-Action@v4.3.0
      with:
        server: ${{ secrets.FTP_SERVER }}
        username: ${{ secrets.FTP_USERNAME }}
        password: ${{ secrets.FTP_PASSWORD }}
        local-dir: './build/' # The directory containing your built React app
        remote-dir: '/public_html/' # The target directory on your cPanel FTP (e.g., /public_html/ or /public_html/react-app/)
        dry-run: false
        # The following options are optional but can be useful
        # dangerous-clean-remote: true # Use with caution! Deletes all files in remote-dir before uploading.
        # exclude: |
        #   .git/
        #   .github/
        #   node_modules/
        #   .env

Explanation of the deploy.yml script:

• name: Deploy React.js App to cPanel: A descriptive name for your workflow.
• on: push: branches: - main: This defines when the workflow will run. In this case, it triggers whenever a push occurs on the main branch. You can change main to your desired deployment branch.
• jobs: build-and-deploy:: Defines a single job named build-and-deploy.
• runs-on: ubuntu-latest: Specifies the operating system environment where the job will run.
• steps:: A sequence of tasks to be executed.
  • Checkout code: Uses actions/checkout@v4 to get your React.js project code from the repository.
  • Set up Node.js: Uses actions/setup-node@v4 to install the specified Node.js version, which is required to build your React.js app.
  • Install dependencies: Runs npm ci to install your project's dependencies. npm ci is preferred over npm install in CI environments for more consistent builds.
  • Build React app: Executes npm run build, which is the standard command to create a production-ready build of your React.js project. This generates the optimized static files in the build directory.
  • FTP Deploy: This is where the magic happens. It uses the SamKirkland/FTP-Deploy-Action@v4.3.0 action.
    • server, username, password: These are populated by the GitHub Secrets you set up earlier.
    • local-dir: './build/': Specifies the local directory within your workflow environment that contains the files to be uploaded (your compiled React.js project).
    • remote-dir: '/public_html/': This is the target directory on your cPanel FTP server. Ensure this matches the directory you set when creating the FTP account. For a typical React.js project acting as the main website, /public_html/ is common.

Using Git Commands in Visual Studio Code Terminal for GitHub Integration

Visual Studio Code (VS Code) comes with an integrated terminal, allowing you to execute Git commands directly within your development environment. This provides a powerful way to interact with your GitHub repository.

Essential Git Commands in VS Code's Integrated Terminal

1. Open the Integrated Terminal: In VS Code, you can open the terminal by going to Terminal > New Terminal, or by using the shortcut Ctrl+` (backtick).
2. Initialize or Clone a Repository:
   • If you're starting a new Git project, navigate to your project directory in the terminal and run:
     git init
   • If you're cloning an existing repository from GitHub, run:
     git clone
     e.g. https://github.com/teguharifudin/your-repo.git
3. Check Repository Status: To see which files have been modified, staged, or are untracked, use:
   git status
4. Stage Changes: Before committing, you need to "stage" your changes.
   • To stage all modified and new files:
     git add .
   • To stage a specific file:
     git add
     e.g. src/App.js
5. Commit Changes: After staging, commit your changes with a descriptive message:
   git commit -m "Your meaningful commit message here"
   e.g. git commit -m "Add new hero section"
6. Push Changes to GitHub: To send your committed changes to your remote GitHub repository, use:
   git push origin [your-branch-name]
   e.g. git push origin main
   (Commonly, [your-branch-name] will be main or master).
7. Pull Changes from GitHub: To fetch and merge changes from your remote GitHub repository into your local branch:
   git pull origin [your-branch-name]
   e.g. git pull origin main

Whenever you push changes to the branch specified in your deploy.yml file (e.g., main), your GitHub Actions workflow will automatically trigger, building and deploying your React.js project to your cPanel via FTP. This automated pipeline significantly accelerates the development cycle for your React.js project.

This CI/CD setup provides a robust and efficient way to manage your React.js project deployments, allowing for faster iterations and a more streamlined development workflow.