PR Previews working but Main site breaks

[zklegal]

Hi - I am struggling to identify why my pr previews are succeeding but my root site fails.
PR Preview: https://xxxx.github.io/design-system/pr-preview/pr-11/ (renders everything as expected)
Root site: https://xxxx.github.io/ldesign-system (white screen ive attached error log)

Pipeline runs:

vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: process.env.BASE_URL || "/",
})

Static Deploy workflow:

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ['gh-pages']

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: |
          export BASE_URL=/design-system/
          npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload dist folder
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

[rossjrw]

Root site: https://xxxx.github.io/ldesign-system

I assume the URL path here is just misspelled and this is not actually the solution?

---

It looks like you are not only deploying your Pages site from the gh-pages branch, but also using it as your main branch. This is a very strange setup - normally people either use main/master as their main branch, and then deploy from gh-pages by convention; or, they deploy from a subdirectory of their main branch (often docs/` by convention). This is the first time I'm seeing both at once - assuming that's what's happening, of course.

I'm basing this assumption on:

  # Runs on pushes targeting the default branch
  push:
    branches: ['gh-pages']

That's fine, you can use gh-pages as your main branch, not a problem so long as you're using the pages-base-path parameter of this action. You haven't shared your latest preview workflow config, which I assume is changed since #106, but given that your preview works I'm guessing that's working fine.

What's not fine is this bit:

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload dist folder
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

This is the artifact-based worflow that can be turned on in your Pages settings, under 'Source' in the section 'Build & Deployment', and option is stupidly called 'GitHub Actions' - I've complained to GitHub about this before, but no response from them.

The PR preview action only works from the 'deploy from a branch' source. I'm assuming you have this checked, because your preview deployment works, and your regular one doesn't. To make your regular deployment work, you need to make it also use a branch-based workflow.

In your case, with no other changes, that would mean replacing the two steps I highlighted with something that puts the result of your build into the dist/ dir when you push to your main branch (gh-pages). That will result in github actions pushing a deployment commit to that branch every time you push to that branch, but so long as you make sure that that doesn't happen when something pushes to dist/, you should be ok (because that would make it be in a an infinite loop).

That seems like a not-ideal situation to me, which is why people normally do deployments on a separate branch (with their gh-pages branch isolated from their main branch). But you can do whatever you like.

[zklegal]

Thanks for your swift reply once again

[zklegal]

Resolved - I opted to keep main for my project files and gh-pages strictly for build and deploy, patched the workflow to reflect this change and this resolved my issue - so gh-pages pretty much just has build files in it now, whereas before I was using it for the project.

For anyone reading this - I can recommend seperating them out, that alone resolved it for me 😅