Vercel Deployment Setup

This document contains all information related to the Vercel deployment configuration for the LBH Educate Phase 1 planning site.

Current Status

✅ Deployment is live and configured

The project is currently deployed and operational. The following configuration has been completed:

Architecture Overview

File Structure

/ (root)
├── login.html                 # Password authentication page
├── auth-check.js              # Client-side auth verification script
├── build.js                   # Static site generator
├── vercel.json                # Vercel configuration
├── package.json               # Dependencies (marked for build)
├── planning/                  # Phase 1 working files
│   ├── docs/                  # Planning documentation
│   ├── workflows/             # Visual workflow diagrams
│   └── resources/             # Skills/behaviors CSV data
└── public/                    # Generated output (gitignored)

How It Works

  1. Build Process: On deployment, Vercel runs npm run build
  2. Static Generation: build.js reads from planning/docs and planning/workflows
  3. Output: Generates static HTML/CSS site in public/
  4. Authentication: Client-side SHA-256 password verification on first visit
  5. Session Management: sessionStorage maintains authentication during browser session
  6. Deployment: Changes pushed to main trigger automatic rebuild and redeploy

Configuration Files

vercel.json

{
  "buildCommand": "npm run build",
  "outputDirectory": "public",
  "cleanUrls": true,
  "trailingSlash": false
}

package.json (relevant scripts)

{
  "scripts": {
    "build": "node build.js",
    "dev": "live-server public --port=8080 --open=/"
  }
}

Password Protection

Mechanism

The site uses client-side password authentication with SHA-256 hashing:

  1. Login Page (login.html): Presents password input form
  2. Hash Verification: User password is hashed using SHA-256 and compared to stored hash
  3. Session Storage: On successful login, sessionStorage.setItem('lbh_auth', 'true') is set
  4. Auth Check Script (auth-check.js): Included on all protected pages, redirects to login if not authenticated
  5. Logout Button: Appears on all protected pages, clears session and returns to login

Security Considerations

Changing the Password

To update the password:

  1. Generate new SHA-256 hash:
    echo -n "your-new-password" | shasum -a 256
  2. Update the hash in login.html:
    const validHash = 'YOUR_NEW_HASH_HERE';
  3. Commit and push to trigger redeploy

Build Process Details

What Gets Built

The build.js script performs the following:

  1. Copy Workflows: Recursively copies planning/workflows/ to public/workflows/
  2. Copy Auth Files: Copies login.html and auth-check.js to public/
  3. Convert Markdown: Processes all .md files in planning/docs/phase-1/ and root README.md
  4. Generate HTML: Creates individual HTML pages for each markdown doc with auth-check script included
  5. Create Index: Builds homepage with cards linking to workflows and docs
  6. Compile Styles: Generates unified styles.css for all pages

Generated Files

public/
├── index.html              # Homepage with navigation cards
├── login.html              # Password authentication page
├── auth-check.js           # Auth verification script
├── styles.css              # Unified stylesheet
├── docs/
│   ├── README.html         # Project README
│   ├── 01-User-Experience.html
│   ├── 02-Database-Model.html
│   ├── 03-Frontend-Components.html
│   ├── 04-Controller-Scripts.html
│   ├── 05-Questions.html
│   └── 06-Vercel-Setup.html
└── workflows/
    ├── index.html          # Workflow list
    ├── css/                # Workflow styles
    └── diagrams/           # Individual diagrams

Deployment Workflow

Automatic Deployment

Every commit to main triggers:

  1. Vercel detects push via GitHub integration
  2. Pulls latest code from repository
  3. Runs npm install (installs marked dependency)
  4. Executes npm run build (generates public/ directory)
  5. Deploys contents of public/ to CDN
  6. Updates live site (typically within 30-60 seconds)

Manual Redeploy

From Vercel dashboard:

  1. Go to project → Deployments
  2. Click "..." menu on any deployment
  3. Select "Redeploy"

Collaboration

For Team Members

Both you and your collaborators can:

Local Preview

Before pushing:

npm run build    # Generate public/ directory
npm run dev      # Preview at http://localhost:8080

On first visit to local preview, you'll be prompted for the password.

Technical Notes

Dependencies

Gitignore

The following are excluded from version control:

Authentication Implementation

The authentication system uses:

Troubleshooting

Build Fails

Check that:

Password Not Working

  1. Verify the password hash in login.html is correct
  2. Clear browser sessionStorage (or open incognito/private window)
  3. Check browser console for JavaScript errors
  4. Ensure you're entering the exact password (case-sensitive)

Authentication Loop (Keeps Redirecting to Login)

  1. Check that sessionStorage is enabled in browser
  2. Verify auth-check.js is being loaded correctly
  3. Check browser console for errors
  4. Try clearing all site data and logging in again

Changes Not Appearing

  1. Confirm commit was pushed to main branch
  2. Check Vercel dashboard for build status
  3. Wait 30-60 seconds for CDN cache invalidation
  4. Hard refresh browser (Cmd+Shift+R / Ctrl+Shift+R)
  5. If authenticated, logout and login again to clear sessionStorage

Future Considerations

As the project evolves: