Add GitHub Actions workflow for Next.js deployment - #276
Conversation
This workflow automates the build and deployment of a Next.js site to GitHub Pages, including dependency installation and caching.
There was a problem hiding this comment.
Pull request overview
This PR adds a GitHub Actions workflow to automate the build and deployment of a Next.js application to GitHub Pages, with support for multiple package managers and build caching optimization.
Key Changes
- Automated CI/CD workflow triggered on pushes to main branch and manual dispatch
- Package manager auto-detection (npm/yarn) with appropriate caching strategy
- Two-stage deployment process: build job creates artifacts, deploy job publishes to GitHub Pages
| run: | | ||
| if [ -f "${{ github.workspace }}/yarn.lock" ]; then | ||
| echo "manager=yarn" >> $GITHUB_OUTPUT | ||
| echo "command=install" >> $GITHUB_OUTPUT | ||
| echo "runner=yarn" >> $GITHUB_OUTPUT | ||
| exit 0 | ||
| elif [ -f "${{ github.workspace }}/package.json" ]; then | ||
| echo "manager=npm" >> $GITHUB_OUTPUT | ||
| echo "command=ci" >> $GITHUB_OUTPUT | ||
| echo "runner=npx --no-install" >> $GITHUB_OUTPUT | ||
| exit 0 | ||
| else | ||
| echo "Unable to determine package manager" | ||
| exit 1 | ||
| fi |
There was a problem hiding this comment.
The package manager detection logic has a potential issue. It checks for yarn.lock first, but if only package.json exists (which is more common), it will correctly detect npm. However, the logic doesn't check for pnpm-lock.yaml which is increasingly common in modern Next.js projects.
Consider adding pnpm support:
if [ -f "${{ github.workspace }}/pnpm-lock.yaml" ]; then
echo "manager=pnpm" >> $GITHUB_OUTPUT
echo "command=install --frozen-lockfile" >> $GITHUB_OUTPUT
echo "runner=pnpm" >> $GITHUB_OUTPUT
exit 0This should be checked before the package.json fallback to npm.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| elif [ -f "${{ github.workspace }}/package.json" ]; then | ||
| echo "manager=npm" >> $GITHUB_OUTPUT | ||
| echo "command=ci" >> $GITHUB_OUTPUT | ||
| echo "runner=npx --no-install" >> $GITHUB_OUTPUT |
There was a problem hiding this comment.
The package-manager detection falls through to npm (this block) even though the repository advertises packageManager: pnpm@9.11.0 and only ships a pnpm-lock.yaml, so the subsequent Install dependencies step will run npm ci without a package-lock and fail with “npm ci can only install packages with a package-lock.json,” blocking every push to main before any build or deploy occurs. Please add pnpm handling or invoke the existing pnpm workspace scripts instead.
Useful? React with 👍 / 👎.
| run: ${{ steps.detect-package-manager.outputs.runner }} next build | ||
| - name: Upload artifact | ||
| uses: actions/upload-pages-artifact@v3 | ||
| with: | ||
| path: ./out |
There was a problem hiding this comment.
The workflow executes npx --no-install next build and uploads ./out from the repository root (lines 77‑81), but the only Next.js project lives under ui/vibe-kanban per pnpm-workspace.yaml. Even once dependency installation is fixed, the root has no Next CLI or app config and will not produce ./out, so the build either errors or deploys an empty artifact instead of the actual site. The job needs to run the package’s build/export script in ui/vibe-kanban and publish that directory.
Useful? React with 👍 / 👎.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
| - name: Upload artifact | ||
| uses: actions/upload-pages-artifact@v3 | ||
| with: | ||
| path: ./out |
There was a problem hiding this comment.
The workflow expects Next.js to output to the ./out directory for static export, but the Next.js configuration (ui/vibe-kanban/next.config.mjs) does not specify output: 'export'. Without this configuration, Next.js will not generate a static export in the out directory, and the upload artifact step will fail or upload nothing.
Add output: 'export' to the Next.js configuration, or update the upload path to match the actual build output directory (e.g., .next for a server build, though that's not suitable for GitHub Pages).
| if [ -f "${{ github.workspace }}/yarn.lock" ]; then | ||
| echo "manager=yarn" >> $GITHUB_OUTPUT | ||
| echo "command=install" >> $GITHUB_OUTPUT | ||
| echo "runner=yarn" >> $GITHUB_OUTPUT | ||
| exit 0 | ||
| elif [ -f "${{ github.workspace }}/package.json" ]; then | ||
| echo "manager=npm" >> $GITHUB_OUTPUT | ||
| echo "command=ci" >> $GITHUB_OUTPUT | ||
| echo "runner=npx --no-install" >> $GITHUB_OUTPUT | ||
| exit 0 |
There was a problem hiding this comment.
The package manager detection logic does not support pnpm, which is the package manager used in this repository (as specified in package.json: "packageManager": "pnpm@9.11.0" and pnpm-workspace.yaml). The workflow will fail when it only finds package.json without yarn.lock, as it will try to use npm instead of pnpm.
Add pnpm detection before checking for yarn:
if [ -f "${{ github.workspace }}/pnpm-lock.yaml" ]; then
echo "manager=pnpm" >> $GITHUB_OUTPUT
echo "command=install" >> $GITHUB_OUTPUT
echo "runner=pnpm exec" >> $GITHUB_OUTPUT
exit 0
elif [ -f "${{ github.workspace }}/yarn.lock" ]; then| # Build job | ||
| build: | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - name: Checkout | ||
| uses: actions/checkout@v4 | ||
| - name: Detect package manager | ||
| id: detect-package-manager | ||
| run: | | ||
| if [ -f "${{ github.workspace }}/yarn.lock" ]; then | ||
| echo "manager=yarn" >> $GITHUB_OUTPUT | ||
| echo "command=install" >> $GITHUB_OUTPUT | ||
| echo "runner=yarn" >> $GITHUB_OUTPUT | ||
| exit 0 | ||
| elif [ -f "${{ github.workspace }}/package.json" ]; then | ||
| echo "manager=npm" >> $GITHUB_OUTPUT | ||
| echo "command=ci" >> $GITHUB_OUTPUT | ||
| echo "runner=npx --no-install" >> $GITHUB_OUTPUT | ||
| exit 0 | ||
| else | ||
| echo "Unable to determine package manager" | ||
| exit 1 | ||
| fi | ||
| - name: Setup Node | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: "20" | ||
| cache: ${{ steps.detect-package-manager.outputs.manager }} | ||
| - name: Setup Pages | ||
| uses: actions/configure-pages@v5 | ||
| with: | ||
| # Automatically inject basePath in your Next.js configuration file and disable | ||
| # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized). | ||
| # | ||
| # You may remove this line if you want to manage the configuration yourself. | ||
| static_site_generator: next | ||
| - name: Restore cache | ||
| uses: actions/cache@v4 | ||
| with: | ||
| path: | | ||
| .next/cache | ||
| node_modules/.cache | ||
| # Generate a new cache whenever packages or source files change. | ||
| key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**/*.[jt]s', '**/*.[jt]sx') }} | ||
| # If source files changed but packages didn't, rebuild from a prior cache. | ||
| restore-keys: | | ||
| ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}- | ||
| - name: Install dependencies | ||
| run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} | ||
| - name: Build with Next.js | ||
| run: ${{ steps.detect-package-manager.outputs.runner }} next build | ||
| - name: Upload artifact | ||
| uses: actions/upload-pages-artifact@v3 | ||
| with: | ||
| path: ./out |
There was a problem hiding this comment.
The Next.js application is located in ui/vibe-kanban/, but this workflow checks out the repository root and attempts to build from there. The workflow will fail because the package.json and Next.js configuration are not in the root directory.
You need to either:
- Add a
working-directoryto relevant steps to point toui/vibe-kanban/, or - Update the paths throughout the workflow to reference
ui/vibe-kanban/
For example, modify the package manager detection to look for files in the correct directory, and add working-directory: ui/vibe-kanban to the install dependencies and build steps.
|
@copilot open a new pull request to apply changes based on the comments in this thread |
|
@FlexNetOS I've opened a new pull request, #294, to work on those changes. Once the pull request is ready, I'll request review from you. |
| .next/cache | ||
| node_modules/.cache | ||
| # Generate a new cache whenever packages or source files change. | ||
| key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**/*.[jt]s', '**/*.[jt]sx') }} |
There was a problem hiding this comment.
The cache restoration step occurs before dependency installation, which is good for performance. However, there's no validation that the restored cache is compatible with the current environment. If the Node.js version or package manager version changes, the cached node_modules/.cache could cause build failures or unexpected behavior.
Consider including the Node.js version in the cache key to ensure cache invalidation when the Node version changes. For example, append '-node-${{ steps.setup-node.outputs.node-version }}' or similar to the cache key.
This workflow automates the build and deployment of a Next.js site to GitHub Pages, including dependency installation and caching.