Deploy React with GitHub Actions on Shared Hosting
Tags: cicd, react
Published: 2023-01-02 16:04:07

---
title: Deploy React with GitHub Actions on Shared Hosting
published: true
date: 2022-12-28 13:40:59 UTC
tags: CICD,React
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/octwp6r43ozes1of8jy6.png
canonical_url: https://anlisha.com.np/blog/deploy-react-with-github-actions-on-shared-hosting/
---

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.

{% embed https://gist.github.com/anlisha-maharjan/7b940aa49c214a40e99dfe00c213198a %}

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 }}
```

![](https://anlisha.com.np/blog/wp-content/uploads/2022/12/GitHub-Actions-Secrets-1024x667.png)

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.

![](https://anlisha.com.np/blog/wp-content/uploads/2023/01/Actions-1024x442.png)

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

The post [Deploy React with GitHub Actions on Shared Hosting](https://anlisha.com.np/blog/deploy-react-with-github-actions-on-shared-hosting/) first appeared on [Anlisha Maharjan](https://anlisha.com.np/blog).