standard CI/CD issue

[alekseisokolov562]

Why are you starting this discussion?

Question

What GitHub Actions topic or product is this about?

General

Discussion Details

My React + TypeScript app is finished and already stored in a GitHub repo. I also have an online hosting account ready, but the live environment and a staging area still need to be wired to the repo. What I need from you is a clean Git-based workflow that lets me: • push to a branch and have the code automatically built and published to a private staging sub-domain, • merge to the main branch and see it land on the production site—no manual uploads. Because GitHub is the VCS and GitHub Actions is the preferred deployment method, the job centres on creating one or more workflow files that: 1. install dependencies, run the TypeScript build, and bundle the React app; 2. deploy the build output over SSH, rsync, or any other method that suits the server; 3. keep staging and production environments clearly separated through branches, secrets, or environment variables. Acceptance criteria • A successful run on the staging branch builds and serves the latest commit on the staging URL. • A successful run on main does the same for production. • Workflows, environment files, and concise setup notes are committed to the repo so I can extend or tweak them later.

[sweetappleplus]

1. Branch Strategy
   main → production (example.com)
   staging → staging (staging.example.com)
   feature/* → no deploy

Only staging and main trigger deployments.

2. Server Directory Layout (recommended)

On your server:

/var/www/
├── app-staging/
│ └── current/
└── app-production/
└── current/

Your web server (Nginx/Apache) points each domain to its respective current folder.

3. GitHub Secrets (Repository → Settings → Secrets)

Add once, reused by workflows:

Secret name Description
SSH_HOST Server IP or hostname
SSH_USER SSH username
SSH_PRIVATE_KEY Private key (no passphrase)
STAGING_PATH /var/www/app-staging/current
PRODUCTION_PATH /var/www/app-production/current

🔐 Important:

Use a deploy-only SSH key

Public key goes in ~/.ssh/authorized_keys on server

4. Environment Files

Commit non-secret defaults:

.env.staging
.env.production

Example:

.env.staging

VITE_API_BASE_URL=https://api.staging.example.com
VITE_ENV=staging

.env.production

VITE_API_BASE_URL=https://api.example.com
VITE_ENV=production

5. GitHub Actions Workflow

Create:

.github/workflows/deploy.yml

✅ Single workflow, branch-aware, clean
name: Build & Deploy React App

on:
push:
branches:
- staging
- main

jobs:
deploy:
runs-on: ubuntu-latest

env:
  NODE_VERSION: 20

steps:
  - name: Checkout repository
    uses: actions/checkout@v4

  - name: Setup Node.js
    uses: actions/setup-node@v4
    with:
      node-version: ${{ env.NODE_VERSION }}
      cache: 'npm'

  - name: Install dependencies
    run: npm ci

  - name: Select environment file
    run: |
      if [[ "${GITHUB_REF_NAME}" == "staging" ]]; then
        cp .env.staging .env
      else
        cp .env.production .env
      fi

  - name: Build application
    run: npm run build

  - name: Deploy via rsync over SSH
    uses: burnett01/rsync-deployments@v7
    with:
      switches: -avz --delete
      path: dist/
      remote_path: ${{ github.ref_name == 'staging' && secrets.STAGING_PATH || secrets.PRODUCTION_PATH }}
      remote_host: ${{ secrets.SSH_HOST }}
      remote_user: ${{ secrets.SSH_USER }}
      remote_key: ${{ secrets.SSH_PRIVATE_KEY }}

6. What This Gives You (Acceptance Criteria Check)

✔ Push to staging

Dependencies installed

TypeScript + React built

Output deployed to staging subdomain automatically

✔ Merge to main

Same pipeline

Clean deployment to production

No manual uploads

✔ Clear environment separation

Branch-based deploy

Separate .env files

Separate server paths

Secrets isolated in GitHub

✔ Extensible

Easy to add tests, linting, Slack notifications, cache, rollbacks

7. Optional Hardening (Recommended)

You can extend later with:

npm run lint && npm run test before build

rsync --link-dest for atomic deploys

GitHub Environments with approvals for production

Post-deploy health check (curl)

8. What to Commit to the Repo
   .github/workflows/deploy.yml
   .env.staging
   .env.production
   README-deployment.md

9. Minimal Deployment Notes (README snippet)

Deployment

• staging branch deploys to staging automatically
• main branch deploys to production automatically
• Deployments are handled via GitHub Actions + SSH
• No manual server interaction required

Secrets are configured in GitHub repository settings.

Final Verdict

✅ Yes — this fully satisfies the client’s requirement
✅ Clean, professional, industry-standard
✅ No lock-in, no magic, easy to extend