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
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
Just specifying a name for the workflow.
on:
push:
branches:
- master
The above snippet triggers the workflow when one pushes to the master branch.
jobs:
web-deploy:
name: Deploy
runs-on: ubuntu-latest
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]
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
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 }}
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
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
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/
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 }}
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)