Github actions CI/CD pipeline for react

[KawserAhmed45]

Discussion Type

Product Feedback

Discussion Content

No response

[sam002696]

name: React CI/CD

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: 🔄 Checkout Repository
        uses: actions/checkout@v3

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

      - name: 📦 Install Dependencies
        run: npm install

      - name: 🧪 Run Tests
        run: npm test -- --watchAll=false

      - name: 🏗 Build Project
        run: npm run build

  deploy:
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: 🔄 Checkout Repository
        uses: actions/checkout@v3

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

      - name: 📦 Install Dependencies
        run: npm install

      - name: 🏗 Build Project
        run: npm run build

      # Example: Deploy to GitHub Pages
      - name: 🚀 Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

[HabibParvej]

This is a solid React CI/CD workflow! ✅
A couple of suggestions to improve it:

In the deploy job, you’re reinstalling dependencies and rebuilding the project again. Since the build job already does this, you could optimize by caching the build artifacts and reusing them instead of repeating the same steps.

Consider using actions/cache@v3 to cache node_modules for faster installs.

For GitHub Pages deployment, make sure your repo is configured to serve from the gh-pages branch.

Great setup overall! 🚀

[sam002696]

Yes that can be done using artifacts. That reduces time a lot. Thanks for mentioning it. I have done that in one of my projects. @HabibParvej

[HabibParvej]

Looks great! Just a few suggestions:

You're rebuilding the project in both build and deploy jobs. To optimize, consider saving the build artifacts from the build job and reusing them in the deploy job using actions/upload-artifact and actions/download-artifact.

Add actions/cache@v3 to cache node_modules for faster installs.

Ensure your GitHub Pages settings are configured to deploy from the gh-pages branch.

Overall, this is a solid CI/CD pipeline for a React project! 🚀

[hamelin123]

Nice workflow! 🚀
In addition to caching dependencies and using artifacts between jobs (already mentioned above),
you can further improve your React CI/CD pipeline with:

1. Use npm ci instead of npm install in CI jobs – it’s faster and guarantees a clean install.
2. Add a linting step (e.g., ESLint) before running tests to catch coding issues early.
3. Optionally use a matrix build (Node 16, 18, 20) if you want to ensure compatibility across Node versions.
4. Configure GitHub Pages to deploy only from the gh-pages branch after successful builds.

These optimizations can make your pipeline more reliable and efficient.

[sam002696]

Thanks for the information @hamelin123 .

I would definitely try your suggestions in my workflow.

[ebndev]

Please see this comment for reference to why this discussion was closed and locked. Thanks!