Hosting, deployment and SEO

How the website is built, deployed to Vercel and served, and what makes every public page readable by search engines.

The website is a set of static files served by Vercel's global CDN. There is no web server to run: the browser downloads the app, then talks to Supabase directly.

Build

npm run build in frontend/ does three things in order:

1. tsc type-checks the code; any type error stops the build.
2. vite build bundles the app into dist/. Some pages, such as this Help Center, are split into separate files that load only when opened.
3. scripts/prerender.mjs writes a static HTML file for every public page.

Prerendering for search engines

A single-page app serves the same empty HTML for every address, so a crawler that does not run JavaScript would see nothing. The prerender step fixes that. For the homepage, each hazard guide, the About page, the Data page and every Help Center guide, it writes an index.html containing:

• the page's own <title>, meta description and canonical link;
• Open Graph and Twitter tags for link previews;
• JSON-LD structured data: Organization and WebSite, Article or TechArticle, BreadcrumbList, and FAQPage for the hazard guides' questions;
• the page's actual text and links, so it can be read without JavaScript.

It also writes sitemap.xml listing every page, and notifies Bing and Yandex of the URLs through IndexNow. While the app runs, the useSeo hook keeps the title, description and structured data correct as the reader moves between pages.

The Help Center is laid out as a grid of linked boxes partly for the same reason: every guide is one plain link from /help, which makes the whole help site easy for a crawler to discover.

Routing on Vercel

frontend/vercel.json:

• redirects / to /resources permanently;
• serves a prerendered file when one exists for the address;
• sends every other address to index.html, so the app's router can handle it.

Deploying

The site deploys to the Vercel project ft-aafat from the frontend/ folder:

cd frontend
VERCEL_TOKEN=<token> npm run deploy

scripts/deploy-vercel.mjs uploads the source through Vercel's REST API and waits until the deployment is ready; Vercel runs npm run build itself. Tokens are kept out of the repository.

Environment variables

Variable	Value
VITE_SUPABASE_URL	The Supabase project URL.
VITE_SUPABASE_KEY	The project's publishable key, which is safe to ship to browsers.

The service key that bypasses row-level security is never a website variable. It exists only as a GitHub Actions secret for the data jobs.

Addresses

The site is served at ft-aafat.vercel.app and at the demo domain demo.floods.pk.

← All technical documentation