Web & WASM Deployment

Web & WASM Deployment

Freak-Flix supports high-performance web deployment via Flutter's standard web build and the experimental WebAssembly (WASM) target. Because Freak-Flix handles media metadata and cloud streaming, web deployments require specific configurations for authentication and CORS (Cross-Origin Resource Sharing).

🏗 Building the Application

Freak-Flix can be compiled using different web renderers. For the best experience with a media-heavy UI, CanvasKit or WASM is recommended.

Standard Web Build (CanvasKit)

This is the recommended stable method for production.

flutter build web --web-renderer canvaskit --release

WASM Build (Experimental)

To leverage the highest performance for logic-heavy tasks, you can build using the WASM target (requires Flutter 3.22+).

flutter build web --wasm

🔐 Auth0 Configuration

The web implementation relies on the Auth0 SPA SDK. The web/index.html file includes the necessary script tag:

<script src="https://cdn.auth0.com/js/auth0-spa-js/2.5/auth0-spa-js.production.js"></script>

Deployment Requirements:

1. Allowed Callback URLs: In your Auth0 Dashboard, add your deployment URL (e.g., https://your-app.netlify.app/) to the "Allowed Callback URLs" field.
2. Allowed Logout URLs: Add your deployment URL to "Allowed Logout URLs".
3. Allowed Web Origins: Add your deployment URL to "Allowed Web Origins" to permit the SPA SDK to refresh tokens.

🌐 Handling CORS & Proxies

Web browsers restrict direct requests to external APIs (like Microsoft OneDrive or StashDB) if they do not return the appropriate CORS headers. Freak-Flix solves this using serverless proxy functions.

1. Microsoft/OneDrive Proxy

Direct authentication calls to Microsoft are proxied via the ms_auth_proxy function to bypass browser restrictions. Ensure your web environment points to the deployed proxy endpoint:

• Path: /api/ms_auth/*
• Target: https://login.microsoftonline.com/

2. StashDB Proxy

If you are using StashDB for metadata, browser-based requests will fail without a proxy. Use the provided stash_proxy.js to route GraphQL requests.

• Endpoint: POST /.netlify/functions/stash_proxy
• Required Header: ApiKey (The proxy forwards this to StashDB).

🚀 Hosting on Netlify

The repository includes a pre-configured netlify/ directory containing functions for user management and API proxying.

Deployment Steps:

1. Connect your repository to Netlify.
2. Set the Build Command: flutter build web --release
3. Set the Publish Directory: build/web
4. Configure the following Environment Variables in Netlify:
   • JWT_SECRET: A secure string for session signing.
   • NETLIFY_DATABASE_URL: Your PostgreSQL connection string (for user profiles).
   • TMDB_API_KEY: Your TheMovieDB API key.

🛠 Troubleshooting

• Base Href: If you are serving the app from a subfolder (e.g., https://domain.com/flix/), you must build the app with the specific base href:

  flutter build web --base-href "/flix/"
  

• Blank Screen: Check the browser console. If you see Auth0 is not defined, ensure the script tag in web/index.html is loading correctly and is not being blocked by a Content Security Policy (CSP).
• CORS Errors: Ensure your netlify.toml or server configuration correctly routes /api/ calls to the respective serverless functions.