Deployment Guide

Build & Upload to Porkbun

Step-by-step instructions for building the site locally and deploying changes to the live server.

โš ๏ธ Always upload from dist/ โ€” never from the project root The source files in the project root are for development only. Always run npm run build first and upload from the dist/ folder.

Standard Deployment Workflow

1

Make your changes

Edit the source files in the project folder. Test locally first using:

npm run dev

Then open http://localhost:5173 (or the next available port) in your browser.

2

Build for production

npm run build

This compiles and bundles all files into the dist/ folder. Each JS file gets a unique hash in its filename (e.g., admin-C6QX71M2.js). If the hash changes, you must upload both the new JS file AND the updated HTML file that references it.

3

Identify what changed

After building, check which JS bundles have new hashes. Common bundles:

dist/assets/index-xxxxx.js โ† Main site (index.html)
dist/assets/concert-xxxxx.js โ† Concert registration
dist/assets/admin-xxxxx.js โ† Admin panel
dist/assets/school-db-xxxxx.js โ† School DB (shared)
dist/assets/schoolIndex-xxxxx.js โ† School dashboard
dist/assets/school[Module]-xxxxx.js โ† Each school module

Always delete the old version of a JS file on Porkbun before uploading the new one.

4

Upload to Porkbun

Log in to Porkbun โ†’ File Manager โ†’ navigate to the correct folder. Upload in this order:

  1. Delete the old assets/[filename]-*.js file
  2. Upload the new dist/assets/[filename]-*.js
  3. Upload the updated dist/[page].html file(s)
๐Ÿ’ก Porkbun is case-sensitive Folder names must match exactly: school/ not School/, assets/ not Assets/.
5

Hard refresh after upload

After uploading, your browser may serve cached files. Always hard refresh:

Cmd + Shift + R (Mac)  /  Ctrl + Shift + R (Windows)

This is especially important after uploading new JS files โ€” without it, the old cached JS may still run.

What to Upload for Common Changes

Concert registration change (concert.html)

Admin panel change (admin.html / admin.js)

School module change

New school module added

Main landing page (index.html)

Folder Structure on Porkbun

/ (root)
โ”œโ”€โ”€ index.html
โ”œโ”€โ”€ concert.html
โ”œโ”€โ”€ admin.html
โ”œโ”€โ”€ health.html
โ”œโ”€โ”€ assets/
โ”‚   โ”œโ”€โ”€ index-xxxxx.js
โ”‚   โ”œโ”€โ”€ concert-xxxxx.js
โ”‚   โ”œโ”€โ”€ admin-xxxxx.js
โ”‚   โ”œโ”€โ”€ db-xxxxx.js
โ”‚   โ”œโ”€โ”€ school-db-xxxxx.js
โ”‚   โ””โ”€โ”€ school[Module]-xxxxx.js (ร—12)
โ”œโ”€โ”€ school/
โ”‚   โ””โ”€โ”€ [module].html (ร—12)
โ””โ”€โ”€ docs/
    โ””โ”€โ”€ [guide].html (ร—6)

Supabase SQL Changes

When a new feature requires a database schema change (new table, column, or policy), run the SQL in the correct Supabase project: