Web Deployment (Netlify)
Relevant source files
The following files were used as context for generating this wiki page:
The Web Deployment system for the ELMEC project utilizes Netlify as the primary hosting and automation platform to deliver a production-ready web version of the application. This system integrates directly with the project's GitHub repository, specifically targeting the netifly branch to trigger automated builds and deployments. It ensures the application is accessible via HTTPS, optimized for performance, and correctly interfaced with the Supabase backend.
Sources: DEPLOY-NETLIFY.md:3-8, STATUS-DEPLOY.md:5-10
The deployment architecture is designed to handle Single Page Application (SPA) routing, security headers (including Content Security Policy), and environment-specific configurations. By utilizing a standardized build pipeline, the project maintains consistency between development and production environments, providing a reliable URL for stakeholders to access the Admin Dashboard, Client portal, and Agent modules.
Sources: netlify.toml:1-25, README.md:15-25
Build Configuration and Environment
The deployment process is governed by the netlify.toml file, which defines the build command, output directory, and required Node.js environment. The system requires Node version 20.19.4 to ensure compatibility with the project's dependencies.
Sources: netlify.toml:1-10, STATUS-DEPLOY.md:120-125
Deployment Flow
The following diagram illustrates the automated deployment pipeline from code push to live site availability:
The deployment can be triggered automatically via Git or manually through the Netlify CLI using npm run deploy.
Sources: DEPLOY-NETLIFY.md:15-30, NETLIFY-DASHBOARD-SETUP.md:65-75
Environment Variables
For the application to function correctly in production, specific environment variables must be configured within the Netlify Dashboard. These variables facilitate the connection to the Supabase backend and define the application's execution context.
| Key | Description | Scope |
|---|---|---|
EXPO_PUBLIC_SUPABASE_URL | The URL for the Supabase project instance | Production/Preview |
EXPO_PUBLIC_SUPABASE_ANON_KEY | Public anonymous key for client-side API requests | Production/Preview |
EXPO_PUBLIC_ENVIRONMENT | Set to production to enable production logic | Production |
NODE_ENV | Standard environment flag set to production | Production |
EXPO_PUBLIC_EAS_PROJECT_ID | Project ID for Expo Application Services | All Scopes |
Sources: DEPLOY-NETLIFY.md:40-75, NETLIFY-SETUP-PASOS.md:35-65
Runtime Configuration and Security
The netlify.toml file implements critical routing and security configurations to support the React Native/Expo web export.
SPA Routing and Redirects
Since the application uses expo-router for client-side navigation, Netlify is configured to redirect all incoming requests to index.html. This prevents 404 errors when users refresh pages or navigate directly to deep links.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Sources: netlify.toml:12-16
Security Headers
The deployment includes strict security headers to protect user data and prevent common web vulnerabilities. A notable configuration is the Content-Security-Policy (CSP), which explicitly allows connections to Supabase subdomains for database and realtime (WebSocket) communication.
| Header | Value | Purpose |
|---|---|---|
X-Frame-Options | DENY | Prevents clickjacking attacks |
X-Content-Type-Options | nosniff | Prevents MIME type sniffing |
Referrer-Policy | strict-origin-when-cross-origin | Controls referrer information leakage |
Strict-Transport-Security | max-age=31536000 | Enforces HTTPS connections |
Sources: netlify.toml:18-30
Integration with Supabase
Deployment is not complete until the Netlify URL is whitelisted within the Supabase Authentication settings. This enables secure redirects after login and ensures the auth/callback route functions correctly.
Authentication Flow Sequence
The interaction between the deployed Web App, Netlify, and Supabase during authentication is shown below:
Deployment Verification and Testing
After a successful build, the deployment must be verified against the Checklist for Production. This includes testing the three primary user roles: Admin, Agent, and Client.
Verification Checklist
- Infra: Site deployed and accessible via HTTPS.
- Backend: Connection to Supabase active with RLS policies verified.
- Func: Login, Dashboard, Chat, and Calculator modules fully operational.
- Assets: Logo and branding assets correctly preloaded.
Sources: DEPLOY-NETLIFY.md:135-165, STATUS-DEPLOY.md:165-185, netlify.toml:44-48
Conclusion
The Netlify deployment system provides a robust infrastructure for the ELMEC web application. By combining automated builds on the netifly branch with strict security headers and environment-driven configurations, the project achieves a high level of reliability and security. The integration with Supabase ensures that authentication and real-time features function seamlessly in a production environment.
Sources: STATUS-DEPLOY.md:195-205, DEPLOY-NETLIFY.md:200-210