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

#cicd #react

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)