Deployment: Web to Netlify

Relevant source files

The following files were used as context for generating this wiki page:

• netlify.toml
• DEPLOY-NETLIFY.md
• NETLIFY-SETUP-PASOS.md
• STATUS-DEPLOY.md
• NETLIFY-DASHBOARD-SETUP.md
• README.md
• NETLIFY_SETUP.md

This document provides a comprehensive technical guide for deploying the ElmecV2 web application to Netlify. The process involves configuring build settings, managing environment variables for Supabase integration, and following a step-by-step deployment workflow. The application is built using Expo for web, and Netlify handles the continuous deployment, hosting, and security.

The deployment is tightly coupled with a Supabase backend, which provides database, authentication, and storage services. Proper configuration of both Netlify and Supabase is critical for a successful deployment. For more details on the backend setup, see the Supabase Configuration section.

Prerequisites

Before initiating a deployment, ensure the following prerequisites are met:

• A fully configured and operational Supabase project.
• At least 17 users created in Supabase Auth for testing purposes.
• 6 primary database tables verified (users, requests, chat_rooms, messages, notifications, calculator_sessions).
• Production credentials for Supabase are available.
• The netlify.toml file is correctly configured in the repository root.
• The project is pushed to a Git provider (e.g., GitHub) on the netifly branch.

Sources: DEPLOY-NETLIFY.md:7-13, STATUS-DEPLOY.md:6-29

Deployment Configuration

The deployment process is primarily controlled by three key components: the netlify.toml configuration file, scripts in package.json, and environment variables set in the Netlify dashboard.

netlify.toml Configuration

This file defines the build process, environment, and server behavior for Netlify.

[build]
  publish = "dist"
  command = "npm ci && npm run build:production"

[build.environment]
  NODE_VERSION = "20.19.4"
  NPM_VERSION = "10"
  NODE_ENV = "production"
  EXPO_PUBLIC_ENVIRONMENT = "production"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    X-XSS-Protection = "1; mode=block"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://*.supabase.co wss://*.supabase.co; object-src 'none'; base-uri 'self'; form-action 'self';"
    Strict-Transport-Security = "max-age=31536000; includeSubDomains"

Sources: netlify.toml

Key Settings

Setting	Value	Description
publish	dist	The directory that contains the deploy-ready assets, generated by the build command.
command	npm ci && npm run build:production	The command Netlify executes to build the site. It first installs dependencies cleanly and then runs the production build script.
NODE_VERSION	20.19.4	Specifies the exact Node.js version for the build environment, ensuring consistency.
redirects	from = "/*", to = "/index.html", status = 200	A rule to handle Single Page Application (SPA) routing, redirecting all paths to index.html.
headers	(various)	Sets crucial security headers like Content-Security-Policy (CSP), X-Frame-Options, and Strict-Transport-Security to protect the application. The CSP is configured to allow connections to Supabase (https://*.supabase.co, wss://*.supabase.co).

Sources: netlify.toml:2-30, STATUS-DEPLOY.md:53-55

package.json Scripts

The project utilizes npm scripts to standardize and simplify the deployment workflow.

Script	Command	Description
build:production	(Assumed) expo export --platform web	Creates an optimized production build of the web application in the dist directory.
deploy	(Assumed) netlify deploy --prod	Deploys the contents of the dist directory to Netlify's production environment.
deploy:preview	(Assumed) netlify deploy	Creates a preview deployment on Netlify for testing purposes before promoting to production.

Sources: README.md:112-114, STATUS-DEPLOY.md:38-42

Environment Variables

These variables must be configured in the Netlify UI under Site settings > Environment variables to connect the frontend to the Supabase backend.

Key	Example Value	Description
EXPO_PUBLIC_SUPABASE_URL	https://pdpqkgrqlubyzkcivifk.supabase.co	The unique URL for your Supabase project.
EXPO_PUBLIC_SUPABASE_ANON_KEY	eyJhbGciOi...	The public, anonymous key for your Supabase project.
EXPO_PUBLIC_ENVIRONMENT	production	Sets the application environment to production mode.
NODE_ENV	production	Sets the Node.js environment to production, used by many libraries for optimization.
EXPO_PUBLIC_EAS_PROJECT_ID	elmec-mobile-app-demo	The project ID from Expo Application Services (EAS).

Sources: DEPLOY-NETLIFY.md:39-50, NETLIFY-SETUP-PASOS.md:41-68, NETLIFY_SETUP.md:15-22

Deployment Process

There are two primary methods for deploying the application to Netlify: automated deployment via Git integration (recommended) or manual deployment using the Netlify CLI.

This diagram shows the two deployment paths available for the project.

Option A: Git-based Deployment (Recommended)

1. Connect to Git: In the Netlify dashboard, select "Add new site" > "Import an existing project" and connect to your Git provider (e.g., GitHub).
2. Select Repository: Choose the elmecV2-Demo repository.
3. Configure Build Settings:
   • Branch to deploy: netifly
   • Build command: npm ci && npm run build:production
   • Publish directory: dist
4. Add Environment Variables: Before deploying, add the required environment variables as listed in the section above.
5. Trigger Deploy: Click "Deploy site". Subsequent deployments are automatically triggered by pushing code to the netifly branch.

Sources: NETLIFY-DASHBOARD-SETUP.md:7-58, STATUS-DEPLOY.md:46-63

Option B: Manual CLI Deployment

This method is useful for quick deploys without using Git.

1. Install Netlify CLI:

   npm install -g netlify-cli
   

2. Login: Authenticate the CLI with your Netlify account.

   netlify login
   

3. Deploy: Use the predefined npm scripts to deploy.

   # For a production deploy
   npm run deploy
   
   # For a preview deploy
   npm run deploy:preview
   

Sources: DEPLOY-NETLIFY.md:30-33, 98-101, README.md:112-114

Post-Deployment Configuration

After a successful deployment, two critical steps are required to ensure the application's authentication flow works correctly.

1. Configure Supabase URL

You must add your Netlify site URL to your Supabase project's authentication settings to allow redirects after login.

1. Navigate to your Supabase project dashboard.
2. Go to Authentication > URL Configuration.
3. Add your Netlify URL (e.g., https://your-app.netlify.app) to the following fields:
   • Site URL: https://your-app.netlify.app
   • Redirect URLs:
     • https://your-app.netlify.app/**
     • https://your-app.netlify.app/auth/callback

Sources: DEPLOY-NETLIFY.md:69-80, NETLIFY-SETUP-PASOS.md:154-165

2. Update app.json

The origin field in app.json is used by Expo Router for web builds. It must be updated with the final Netlify URL.

1. Edit the app.json file in your project.
2. Replace the placeholder origin with your actual Netlify URL.

   {
     "expo": {
       "plugins": [
         [
           "expo-router",
           {
             "origin": "https://your-app.netlify.app/"
           }
         ]
       ]
     }
   }
   

3. Commit and push this change. Netlify will automatically trigger a new deployment with the updated configuration.

Sources: DEPLOY-NETLIFY.md:121-135, NETLIFY-SETUP-PASOS.md:169-183

Verification and Testing

Once the deployment is live, verify its functionality by testing the login process with predefined user roles.

This sequence diagram illustrates the authentication flow for a user logging in on the deployed Netlify site.

Test Credentials

Use the following credentials to test different user roles:

Role	Email	Password
👨‍💼 Admin	i.pineda@elmec.com.mx	Elmec2024!Admin
👷 Agent	j.gonzalez@elmec.com.mx	Elmec2024!Agent
👤 Client	cliente@gmail.com	Elmec2024!Client

Sources: DEPLOY-NETLIFY.md:108-119, STATUS-DEPLOY.md:92-105

Final Checklist

• Site is deployed and accessible via its Netlify URL.
• Build completed without errors in the Netlify deploy log.
• All environment variables are correctly set.
• Supabase connection is successful (dashboard loads data).
• Authentication with all three user roles (Admin, Agent, Client) is successful.
• Core functionalities like creating requests and using the chat are working.

Sources: DEPLOY-NETLIFY.md:139-158

Troubleshooting

Error	Problem	Solution
Build failed	The build process fails on Netlify.	1. Verify that NODE_VERSION in netlify.toml is 20.19.4. 2. Check the build log in the Netlify dashboard for specific errors. 3. Ensure all required environment variables are configured.
Cannot connect to Supabase	The application loads but cannot fetch data from Supabase.	1. Double-check that EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY are correct in Netlify's environment variables. 2. Confirm that the Netlify site URL has been added to Supabase's URL Configuration.
Login failed	Users cannot log in, even with correct credentials.	1. Verify that the test users exist in Supabase Auth. 2. Ensure "Email confirmation" is disabled in Supabase Auth for testing, or that the users' emails are confirmed. 3. Check the browser console for any specific error messages from the Supabase client.

Sources: DEPLOY-NETLIFY.md:162-186