DEV Community

Cover image for Deploy React with GitHub Actions on Shared Hosting
Anlisha Maharjan
Anlisha Maharjan

Posted on • Originally published at anlisha.com.np on

Deploy React with GitHub Actions on Shared Hosting

#react #cicd

Let’s see the process to deploy React app on shared hosting with FTP Deploy GitHub Action.

Prerequisites:

  • Set up an FTP account in cPanel.

  • Setup React Project in GitHub.

Let’s start!

Setup GitHub Actions:

Option 1:

Run the command below in the root of the project directory. A ci.yml file is created inside the workflows folder, the file can have any name but it should end with a .yml extension. Write the configuration code snippet below into the ci.yml file.

mkdir .github/
mkdir .github/workflows/
touch .github/workflows/ci.yml
Enter fullscreen mode Exit fullscreen mode

Option 2:

In the GitHub repository, click on Actions > set up a workflow yourself and write the configuration code snippet below into the ci.yml file. The file can have any name but it should end with a .yml extension.

Let me explain what each section does.

name: Deploy on push master
Enter fullscreen mode Exit fullscreen mode

Just specifying a name for the workflow.

on:
  push:
    branches:
      - master
Enter fullscreen mode Exit fullscreen mode

The above snippet triggers the workflow when one pushes to the master branch.

jobs:
  web-deploy:
    name: Deploy
    runs-on: ubuntu-latest
Enter fullscreen mode Exit fullscreen mode

jobs – Group together all the jobs that run in the workflow. Specifying and setting up a web-deploy job.

runs-on: ubuntu-latest – Configures to run the workflow using the latest version of Ubuntu.

strategy:
      matrix:
        node-version: [16.x]
Enter fullscreen mode Exit fullscreen mode

The matrix accompanied by the node-version tells the workflow to run web-deploy on the specified node version.

steps:
    - name: 🚚 Get latest code
        uses: actions/checkout@v2
Enter fullscreen mode Exit fullscreen mode

steps – Group together all the steps that run in the web-deploy job.

uses: actions/checkout@v2 – Check-out repository so the workflow can access it.

 - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@master
      with:
        node-version: ${{ matrix.node-version }}
Enter fullscreen mode Exit fullscreen mode

uses: actions/setup-node@master – Installs the specified node version(16) in the CI environment.

 - name: Copy .env.prod.example to .env
      run: cp .env.prod.example .env
Enter fullscreen mode Exit fullscreen mode

run: cp .env.prod.example .env – Creates a .env with required environment variables. (Important because .env is always added to .gitignore).

- name: 🔨 Build Project 
      run: |
        npm install
        npm run build
Enter fullscreen mode Exit fullscreen mode

run: npm install – Using npm to install the package node dependencies.

run: npm run build – Builds React project.

- name: 📂 Sync files
        uses: SamKirkland/FTP-Deploy-Action@4.3.3
        with:
          server: ${{ secrets.SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: build/
Enter fullscreen mode Exit fullscreen mode

Transfers files from the build folder to the shared hosting server using FTP credentials.

Add GitHub Secrets:

Goto Settings tab on the GitHub repository, click on Secrets > Actions > New Repository Secret to add the FTP server, account username, and password.

For example, for FTP username: FTP_USERNAME as Name and zon@zon.com as Value.

To access variables in the pipeline use the format below:

${{ secrets.SERVER }}
${{ secrets.FTP_USERNAME }}
${{ secrets.FTP_PASSWORD }}
Enter fullscreen mode Exit fullscreen mode

Now anytime one pushes to the master branch, the pipeline starts running web-deploy job which builds and deploys the react app.

Goto Actions tab to monitor whether it’s running, successfully deployed, or failed.

This concludes a CI/CD pipeline on GitHub. Thanks for reading!

The post Deploy React with GitHub Actions on Shared Hosting first appeared on Anlisha Maharjan.

Top comments (0)