chore: update deploy workflow and scripts

Author: wkylin

.github/workflows/deploy-gh-pages.yml

@@ -44,6 +44,7 @@ jobs:
         run: npm run build-storybook
         env:
           NODE_ENV: production
+          STORYBOOK_BASE_HREF: /pro-react-admin/storybook/
 
       - name: Organize build output
         run: |

docs/DEPLOY.md

@@ -0,0 +1,48 @@
+# Deployment Guide
+
+This project is configured to deploy automatically to GitHub Pages. The deployment includes both the main application and the Storybook documentation.
+
+## Deployment Structure
+
+- **Main Application**: Deployed to the root (`/`).
+  - URL: `https://wkylin.github.io/pro-react-admin/`
+- **Storybook**: Deployed to a subdirectory (`/storybook/`).
+  - URL: `https://wkylin.github.io/pro-react-admin/storybook/`
+
+## How to Deploy
+
+We have a unified script to handle the build and deployment process.
+
+### Command
+
+```bash
+npm run deploy
+```
+
+### What this command does
+
+The `npm run deploy` command executes `scripts/deploy-gh.js`, which performs the following steps:
+
+1.  **Build Main App**: Runs `npm run build:production` to generate the production build in the `dist` directory.
+2.  **Build Storybook**: Runs `npm run build-storybook` with `STORYBOOK_BASE_HREF=/pro-react-admin/storybook/`.
+    - This ensures that Storybook assets are loaded correctly from the subdirectory.
+    - The output is generated in `storybook-static`.
+3.  **Merge Builds**:
+    - Moves the `storybook-static` directory into `dist/storybook`.
+4.  **Deploy**:
+    - Uses `gh-pages` to push the contents of the `dist` directory to the `gh-pages` branch of the repository.
+
+## Configuration Details
+
+### Storybook Base Path
+
+The Storybook build uses a custom script `scripts/add-storybook-base.js` (triggered via `postbuild-storybook`) to inject the `<base>` tag into `index.html`.
+
+- **Environment Variable**: `STORYBOOK_BASE_HREF`
+- **Value for GitHub Pages**: `/pro-react-admin/storybook/`
+
+If you are deploying to a different path or domain, you may need to adjust this variable in `scripts/deploy-gh.js`.
+
+### GitHub Pages Branch
+
+The deployment uses the `gh-pages` branch. Ensure your repository settings on GitHub are configured to serve from this branch.

package.json

@@ -92,7 +92,8 @@
     "process": "node webpack/process",
     "sentry:check": "node check-sentry.js",
     "predeploy": "npm run build:production",
-    "deploy": "gh-pages -d dist",
+    "deploy": "node scripts/deploy-gh.js",
+    "deploy:only": "gh-pages -d dist",
     "clean:lock": "rimraf  package-lock.json yarn.lock pnpm-lock.yaml",
     "clean:dist": "rimraf  ./dist",
     "clean:modules": "rimraf  node_modules",

scripts/deploy-gh.js

@@ -0,0 +1,85 @@
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+// Helper to run commands
+const run = (command, options = {}) => {
+  console.log(`Running: ${command}`);
+  execSync(command, { stdio: 'inherit', ...options });
+};
+
+const distDir = path.resolve(__dirname, '../dist');
+const storybookStaticDir = path.resolve(__dirname, '../storybook-static');
+const storybookTargetDir = path.join(distDir, 'storybook');
+
+try {
+  // 1. Build Main App
+  console.log('-------------------------------------------------------');
+  console.log('Step 1: Building Main App (Production)...');
+  console.log('-------------------------------------------------------');
+  run('npm run build:production');
+
+  // 2. Build Storybook
+  console.log('\n-------------------------------------------------------');
+  console.log('Step 2: Building Storybook...');
+  console.log('-------------------------------------------------------');
+  // Set env var for base href.
+  // Homepage is https://wkylin.github.io/pro-react-admin
+  // So root is /pro-react-admin/
+  // Storybook should be at /pro-react-admin/storybook/
+  const env = { ...process.env, STORYBOOK_BASE_HREF: '/pro-react-admin/storybook/' };
+  run('npm run build-storybook', { env });
+
+  // 3. Move Storybook to dist/storybook
+  console.log('\n-------------------------------------------------------');
+  console.log('Step 3: Moving Storybook to dist/storybook...');
+  console.log('-------------------------------------------------------');
+
+  if (!fs.existsSync(distDir)) {
+    throw new Error('dist directory does not exist! Main app build might have failed.');
+  }
+
+  // Clean previous storybook dir in dist if exists
+  if (fs.existsSync(storybookTargetDir)) {
+    console.log(`Removing existing ${storybookTargetDir}...`);
+    fs.rmSync(storybookTargetDir, { recursive: true, force: true });
+  }
+
+  // Ensure parent dir exists (it should, as dist exists)
+  if (!fs.existsSync(storybookStaticDir)) {
+     throw new Error('storybook-static directory does not exist! Storybook build might have failed.');
+  }
+
+  console.log(`Moving ${storybookStaticDir} to ${storybookTargetDir}...`);
+
+  // Try rename first (fastest)
+  try {
+    fs.renameSync(storybookStaticDir, storybookTargetDir);
+  } catch (err) {
+    if (err.code === 'EXDEV') {
+      // Cross-device link, fall back to copy
+      console.log('Cross-device link detected, copying files instead...');
+      fs.cpSync(storybookStaticDir, storybookTargetDir, { recursive: true });
+      fs.rmSync(storybookStaticDir, { recursive: true, force: true });
+    } else {
+      throw err;
+    }
+  }
+
+  // 4. Deploy
+  console.log('\n-------------------------------------------------------');
+  console.log('Step 4: Deploying to GitHub Pages...');
+  console.log('-------------------------------------------------------');
+  // We use npx to ensure we use the local gh-pages binary
+  run('npx gh-pages -d dist');
+
+  console.log('\n=======================================================');
+  console.log('Deployment Complete! 🚀');
+  console.log('Main App: https://wkylin.github.io/pro-react-admin/');
+  console.log('Storybook: https://wkylin.github.io/pro-react-admin/storybook/');
+  console.log('=======================================================');
+
+} catch (error) {
+  console.error('\n❌ Deployment Failed:', error.message);
+  process.exit(1);
+}