Deployment

Deployment

Rubric Maker is a fully static single-page application. There is no server-side component, so it can be hosted anywhere that serves static files.

---

Building for production

Before deploying by any method, generate the production build:

npm run build

This runs TypeScript type-checking and then Vite's production bundler. The output lands in dist/. You can verify the build locally before uploading:

npm run preview
# Opens at http://localhost:4173

---

GitHub Pages (automated CI/CD)

The repository ships with a GitHub Actions workflow at .github/workflows/deploy.yml that automatically builds and deploys to GitHub Pages on every push to main.

First-time setup:

1. In the repository, go to Settings → Pages.
2. Under Source, select GitHub Actions.
3. Push any commit to main — the workflow handles the build and publish.

The live URL appears in the repository's Deployments section once the first run completes. For this project that is:

https://nesicicoding.github.io/RubricMaker/

Manual trigger: Go to Actions → Deploy static content to Pages → Run workflow to deploy without a code push.

---

Docker

A multi-stage Dockerfile builds the app with Node and serves it with nginx.

Using docker compose (recommended)

# Build the image and start the container
docker compose up

# Run in the background
docker compose up -d

# Stop and remove the container
docker compose down

The app is available at http://localhost:8080.

Using docker build and docker run directly

# Build
docker build -t rubric-maker .

# Run (maps port 8080 on your machine to port 80 in the container)
docker run -p 8080:80 rubric-maker

What the container does

• Build stage (Node 20 Alpine): runs npm ci then npm run build.
• Runtime stage (nginx Alpine): copies dist/ and serves it on port 80.
• nginx is configured for SPA routing (try_files $uri $uri/ /index.html) and gzip compression for CSS, JS, JSON, and SVG assets.

---

Vercel

1. Import the repository in the Vercel dashboard.
2. Vercel auto-detects Vite; no extra configuration is needed.
3. Confirm the settings and deploy.

Manual settings if Vercel doesn't auto-detect:

Setting	Value
Framework preset	Vite
Build command	npm run build
Output directory	dist
Node version	20 or 22

---

Netlify

1. Connect the repository in the Netlify dashboard.
2. Set the build command to npm run build and the publish directory to dist.
3. Deploy.

SPA routing fix: Netlify's default server returns a 404 for deep-linked URLs. Add a _redirects file in public/ so it is included in the build output:

/* /index.html 200

This file is already present in the public/ folder. Netlify picks it up automatically.

---

SharePoint

You can host the application directly in a SharePoint Document Library — no dedicated server required.

1. Build the project:

   npm run build

2. Rename the entry point:

   • In the dist/ folder, rename index.html → index.aspx.
   • SharePoint serves .aspx files as web pages; .html files trigger a download dialog instead.

3. Upload to SharePoint:

   • Go to your SharePoint site → Site Contents → Documents (or any Document Library).
   • Create a folder (e.g., RubricMaker).
   • Upload everything inside dist/ into that folder, preserving the folder structure.

4. Launch:

   • Click index.aspx — the app opens in the browser.

Standards integration on SharePoint: If you use the Common Standards Project API feature, add your SharePoint domain to the "Allowed Origins" list in your CSP API key settings, otherwise the API request will be blocked by CORS.

---

Self-hosted file server (nginx / Apache)

Any web server that can serve static files will work. The only special requirement is that all routes must fall back to index.html to support client-side routing.

nginx example:

server {
    listen 80;
    root /var/www/rubricmaker;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Apache example (.htaccess):

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]