Skip to content

DEPLOYMENT.md

Latest commit

 

History

History
165 lines (113 loc) · 3.53 KB

DEPLOYMENT.md

File metadata and controls

165 lines (113 loc) · 3.53 KB

Deployment Guide

Quick Start - Deploy to GitHub Pages

Option 1: Automatic Deployment (Recommended)

This is the easiest method - just push to GitHub and let GitHub Actions handle everything automatically.

Step 1: Create GitHub Repository

  1. Go to https://github.com/new
  2. Repository name: cp-buying-system
  3. Keep it public (required for free GitHub Pages)
  4. Don't initialize with README (we already have one)
  5. Click "Create repository"

Step 2: Push Your Code

# Add the remote repository (replace YOUR_USERNAME with your GitHub username)
git remote add origin https://github.com/YOUR_USERNAME/cp-buying-system.git

# Push to GitHub
git push -u origin main

Step 3: Enable GitHub Pages

  1. Go to your repository on GitHub
  2. Click on "Settings" tab
  3. Click on "Pages" in the left sidebar
  4. Under "Build and deployment":
    • Source: Select "GitHub Actions"
  5. Wait a few minutes for the deployment to complete

Step 4: Access Your Site

Your site will be live at:

https://YOUR_USERNAME.github.io/cp-buying-system/

The GitHub Actions workflow will automatically rebuild and deploy every time you push to the main branch!

Option 2: Manual Deployment

If you prefer to deploy manually using the gh-pages package:

# Build and deploy in one command
npm run deploy

This will:

  1. Build the production version
  2. Create/update the gh-pages branch
  3. Push to GitHub

Then enable GitHub Pages in your repository settings:

  • Source: Deploy from a branch
  • Branch: gh-pages
  • Folder: / (root)

Verification

After deployment, check:

  1. GitHub Actions Status:

    • Go to the "Actions" tab in your repository
    • You should see a successful deployment workflow

  2. GitHub Pages Status:

    • Settings → Pages
    • You should see "Your site is live at https://..."

  3. Test the Site:

    • Visit the URL
    • Navigate through all 4 screens:
      • Command Center
      • Forecasting Hub
      • Policy Simulator
      • Replenishment Workbench

Troubleshooting

Issue: 404 Error

Cause: The base path in vite.config.js doesn't match your repository name.

Solution: Update vite.config.js:

export default defineConfig({
  plugins: [react()],
  base: '/YOUR-REPO-NAME/',  // Must match your repository name
})

Issue: White Screen / Blank Page

Cause: JavaScript/CSS files not loading correctly.

Solution:

  1. Check browser console for errors
  2. Verify the base path in vite.config.js
  3. Rebuild: npm run build
  4. Redeploy: git push or npm run deploy

Issue: GitHub Actions Fails

Cause: Permissions not set correctly.

Solution:

  1. Go to Settings → Actions → General
  2. Scroll to "Workflow permissions"
  3. Select "Read and write permissions"
  4. Click "Save"

Custom Domain (Optional)

To use a custom domain:

  1. Add a CNAME file to the /public folder with your domain
  2. Configure DNS settings with your domain provider
  3. Enable "Enforce HTTPS" in GitHub Pages settings

See: https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site

Updates

To update the deployed site:

# Make your changes
git add .
git commit -m "Description of changes"
git push origin main

GitHub Actions will automatically rebuild and deploy!

Local Preview of Production Build

To test the production build locally before deploying:

# Build for production
npm run build

# Preview the production build
npm run preview

Visit http://localhost:4173 to see the production version.
⚡