This is a Next.js project bootstrapped with create-next-app.

Getting Started

Run the development server locally:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Docker Deployment

This repo includes three deployment pieces:

1. docker-compose.yml for local source builds
2. docker-compose.deploy.yml for production-style image pulls
3. webhook/docker-compose.yml for the webhook receiver

Server setup

1. Create .env on the server from .env.example.
2. Set HOST_REPO_DIR to the absolute path of this repo on cis-linux1.temple.edu.
3. Set WEBHOOK_SECRET to a strong random value.
4. Set REPO_FULL_NAME to the GitHub repository name, for example Civic-Interactions-Lab/NextJS-HCI_Webpage.
5. Optionally set PUBLISH_WORKFLOW_NAME if your publish workflow uses a name other than Publish Site Image.
6. Build and start the main site stack:

docker compose -f docker-compose.deploy.yml up -d

7. Build and start the webhook stack:

docker compose --env-file .env -f webhook/docker-compose.yml up -d --build

8. Confirm both services are reachable through the local bindings:

curl http://127.0.0.1
curl http://127.0.0.1:9001/health
curl http://127.0.0.1/webhook-health

By default, the site stack binds to 127.0.0.1:80 and the webhook stack binds to 127.0.0.1:9001. You can override those with APP_HOST_BIND / APP_HOST_PORT and WEBHOOK_HOST_BIND / WEBHOOK_HOST_PORT.

TLS stays on the host machine, so the containers serve plain HTTP and Apache can continue terminating HTTPS for hci.temple.edu.

GitHub webhook setup

Configure a GitHub webhook for this repository with:

• Payload URL: https://hci.temple.edu/github-webhook
• Content type: application/json
• Secret: the same value as WEBHOOK_SECRET
• Event: Let me select individual events and enable Workflow runs

When the Publish Site Image workflow completes successfully on the configured branch, the webhook container pulls the latest code in HOST_REPO_DIR, authenticates to GHCR if credentials are configured, pulls the prebuilt site image, and force-recreates the hci-web container.

For the smoothest Vercel-like setup, point HOST_REPO_DIR at a dedicated normal clone used only for deployment, not your active development worktree.

The webhook is intentionally deployed as a separate compose project so a webhook-triggered site rebuild does not recycle the webhook service that received the request.

GitHub Actions image publishing

The workflow at .github/workflows/publish-site-image.yml builds the production image in GitHub Actions and pushes it to GHCR. Add these repository secrets before enabling it:

• NEXT_PUBLIC_SANITY_API_VERSION
• NEXT_PUBLIC_SANITY_DATASET
• NEXT_PUBLIC_SANITY_PROJECT_ID
• NEXT_PUBLIC_MAPBOX_TOKEN
• NEXT_PUBLIC_CONVEX_URL
• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

On the server, set HCI_WEB_IMAGE in .env to the image you want to deploy, for example:

HCI_WEB_IMAGE=ghcr.io/civic-interactions-lab/nextjs-hci-webpage-site:latest

If you keep the package private, the server will also need GHCR_USERNAME and a token with read:packages scope in GHCR_TOKEN.

The webhook intentionally ignores raw push events for deployment. That avoids racing the image publish workflow and trying to redeploy before GHCR has the new image available.

Local HTTPS Testing

To test secure-cookie and HTTPS-only behavior locally, this repo includes a small Caddy reverse proxy:

docker compose -f docker-compose.https.yml up -d

That proxies your existing local site from http://localhost:8881 to:

https://localhost:8443

The included Caddyfile.local uses Caddy's internal local CA. On first visit, your browser may show a certificate warning because this CA is not yet trusted on your machine. If that happens, continue through the warning for quick testing or import/trust the generated local Caddy root certificate from the Caddy data volume for a cleaner experience.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.