Automating Builds and Deployments With GitHub Actions

⚙️ What Is GitHub Actions?

GitHub Actions is a CI/CD tool built into GitHub that allows you to automate tasks like building, testing, and deploying your React or Node.js apps. No need for external CI services—it’s all hosted and managed right from your repository. 🎯

Whether you're pushing code to main or opening a pull request, GitHub Actions can automatically handle builds, run tests, and deploy your app. 🚀

📁 Folder Structure for Workflows

GitHub Actions uses YAML files inside the .github/workflows directory of your repo. Each YAML file defines a "workflow" (e.g., build-and-deploy).

your-project/
├── .github/
│   └── workflows/
│       └── deploy.yml
  

🚀 Example: Deploy React App to Netlify

Here's a sample workflow that installs dependencies, builds the app, and deploys to Netlify:

# .github/workflows/deploy.yml
name: Deploy to Netlify

on:
  push:
    branches:
      - main

jobs:
  build-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v3

      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v2
        with:
          publish-dir: './build'
          production-branch: 'main'
          netlify-auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          netlify-site-id: ${{ secrets.NETLIFY_SITE_ID }}
  

🔐 Secrets and Environment Variables

Never hardcode API keys or tokens. Store them securely:

1. Go to your GitHub repository
2. Settings → Secrets and variables → Actions
3. Add keys like NETLIFY_AUTH_TOKEN and NETLIFY_SITE_ID

Use these with ${{ secrets.YOUR_SECRET_NAME }} in your YAML.

🧪 Add Testing Before Deployment

GitHub Actions can also run your tests before deploying:

- name: Run Unit Tests
  run: npm test
  

You can also lint your code or run coverage checks here.

🌐 Deploy to Vercel With GitHub Actions

Although Vercel supports automatic Git deployment, you can still configure custom workflows using their CLI:

- name: Deploy to Vercel
  run: |
    npm i -g vercel
    vercel --prod --token=${{ secrets.VERCEL_TOKEN }}
  

This allows you to integrate tests and custom scripts before deployment.

☁️ Firebase Deployment with GitHub Actions

You can also automate deployments to Firebase:

- name: Deploy to Firebase
  uses: FirebaseExtended/action-hosting-deploy@v0
  with:
    repoToken: '${{ secrets.GITHUB_TOKEN }}'
    firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
    channelId: live
    projectId: your-project-id
  

Use the Firebase CLI to generate a service account key and add it as a GitHub secret.

🔄 Triggering Workflows

GitHub Actions can be triggered by:

• push to a branch
• pull_request
• workflow_dispatch (manual trigger)
• schedule (CRON jobs)

on:
  workflow_dispatch:
  schedule:
    - cron: "0 0 * * *" # Every day at midnight
  

💡 Best Practices

• Use one workflow per goal (build, deploy, test)
• Store secrets securely—never commit them
• Keep actions updated to latest stable versions
• Use caching (like actions/cache) to speed up builds
• Break CI and CD into separate jobs if needed

✅ Final Thoughts

Automating your build and deployment process with GitHub Actions saves time, reduces errors, and enforces consistency. Whether you’re deploying to Netlify, Vercel, Firebase, or a VPS, you can streamline the entire pipeline directly within your GitHub repo.

With just a few lines of YAML, your code goes from commit to production—automatically. 🚀