DigiFX web products are single-page applications served from Firebase Hosting, with all server-side work behind HTTP functions. This page describes how a request travels from the browser to a response, and how a change travels from a laptop to production.
01The application shell
The Media Console client is an Angular application built from standalone components. Routes are declared in one route table and loaded lazily — each entry names a loadComponent import, so a feature's code is fetched only when a user navigates to it rather than shipped in the initial bundle.
Two guards run in front of protected routes. An authentication guard resolves the signed-in user, and a release guard checks whether the area is open in the current release state. Each route also carries an area tag in its route data, which is what lets one release-status source drive several navigation and roadmap surfaces without duplicating the list of pages.
02Hosting, routing, and headers
Hosting configuration does three things in order. First, a small number of named rewrites send specific paths to specific functions — the payment webhook and the public form endpoints each get their own function rather than sharing a general handler. Second, everything remaining under /api/** is rewritten to the API gateway function. Third, every other path falls through to index.html so the client router can resolve it.
Security headers are set at the hosting layer, not in application code. That includes a Content-Security-Policy with explicit allowlists for scripts, styles, fonts, images, media, connections, and frames; X-Frame-Options: SAMEORIGIN; X-Content-Type-Options: nosniff; and a strict-origin referrer policy. Because the policy lives in hosting configuration, adding a new third-party embed is a visible configuration change rather than an invisible code change.
03The API gateway
Behind /api sits a gateway function that matches an incoming path against a route table and proxies it to the backing service. Routes are grouped by capability family — core platform, application services, web infrastructure, analysis, experience, live streaming, knowledge, and others — so a caller can reason about the surface without a full endpoint list.
Responses follow a consistent envelope. Successes pass through the upstream status and body. Failures return JSON carrying success: false, an error label, a human-readable message, and a timestamp. An unmatched path returns 404 with a sample of valid routes and the total route count, which makes a typo self-diagnosing. The gateway also stamps the matched route onto response headers, so a confusing result can be traced to the exact routing decision that produced it.
04From laptop to production
npm start brings up both local surfaces at once — the Angular dev server and the release control console — as child processes that shut down together, so neither is left orphaned. A production build stamps a calendar version, generates the environment file, compiles, and runs a post-build step that injects preload hints for the home page.
Deploys are wrapped rather than run bare: the wrapper emits a deploy signal, runs the production build, publishes the static sites, and then invokes the Firebase CLI through a pinned Node 20 shim. A separate staging target and a promote step exist so a build can be verified on a staging host before it becomes the live one.