Skip to main content

​
Overview

Netlify is the recommended deployment platform for Portal Ciudadano Manta, offering automatic GitHub deployments with built-in CI/CD, HTTPS, and excellent SPA support.

​
Features Enabled

Continuous Deployment

Auto-deploy on push to main branch

HTTPS Automatic

Free SSL certificates

SPA Redirects

Vue Router support

Security Headers

Built-in security headers

Optimized Cache

Static asset caching

Deploy Previews

Preview PRs before merge

​
Option 1: Automatic Deployment from GitHub

1

Connect GitHub Repository

  1. Go to Netlify
  2. Click “Add new site” → “Import an existing project”
  3. Select “GitHub” and authorize Netlify
  4. Choose the Portal-Ciudadano-Manta-web repository
2

Configure Build Settings

Netlify will auto-detect settings, but verify:
  • Build command: npm run build
  • Publish directory: dist
  • Node version: 20
Leave other settings as default.
3

Add Environment Variables

Before deploying, add your Supabase credentials:
  1. Go to Site settings → Environment variables
  2. Click “Add a variable”
  3. Add both variables:
VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here
4

Deploy Site

Click “Deploy site”. Netlify will:
  1. Clone your repository
  2. Install dependencies
  3. Run build command
  4. Publish to CDN
First deployment takes 2-3 minutes.
5

Verify Deployment

  1. Click the deployment URL (e.g., https://random-name.netlify.app)
  2. Test authentication and database operations
  3. Check browser console for errors

​
Option 2: Manual Deployment with Netlify CLI

1

Install Netlify CLI

npm install -g netlify-cli
2

Login to Netlify

netlify login
This opens a browser window to authorize the CLI.
3

Initialize Project

In your project directory:
netlify init
Follow the prompts:
  • Create a new site or link existing
  • Confirm build settings
4

Add Environment Variables

netlify env:set VITE_SUPABASE_URL "https://your-project-id.supabase.co"
netlify env:set VITE_SUPABASE_ANON_KEY "your-anon-key-here"
5

Deploy to Production

netlify deploy --prod
The CLI will build and deploy your site.

​
Automatic Configuration

The project includes a netlify.toml configuration file (if present) that automatically configures: 
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

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

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "no-referrer"
    Permissions-Policy = "geolocation=(self)"

​
Custom Domain Setup

1

Add Custom Domain

In Netlify dashboard:
  1. Go to Domain settings → Add custom domain
  2. Enter your domain (e.g., portal.manta.gob.ec)
2

Configure DNS

Netlify provides two options:Option A: Use Netlify DNS
  • Transfer your domain nameservers to Netlify
  • Netlify manages all DNS records
Option B: External DNS Add these records to your DNS provider:
A record: @ → 75.2.60.5
CNAME: www → your-site.netlify.app
3

Enable HTTPS

Netlify automatically provisions SSL certificate from Let’s Encrypt (takes ~1 minute).

​
Continuous Deployment

Once connected to GitHub, Netlify automatically:
  1. On push to main: Deploys to production
  2. On pull request: Creates deploy preview
  3. On merge: Updates production with preview build

​
Deploy Previews

Every pull request gets a unique preview URL: 
https://deploy-preview-123--your-site.netlify.app
This allows testing changes before merging to main.

​
Build Environment

​
Node Version

Specify Node version in package.json or netlify.toml: 
{
  "engines": {
    "node": ">=20.0.0"
  }
}

​
Build Logs

View detailed build logs:
  1. Go to Deploys tab
  2. Click on a deployment
  3. View Deploy log

​
Troubleshooting

​
Build Fails

Problem: Build command exits with error Solutions:
  1. Check build logs for specific error
  2. Verify package.json scripts are correct
  3. Ensure all dependencies are in dependencies, not devDependencies
  4. Test build locally: npm run build

​
404 on Page Refresh

Problem: Page refresh returns 404 error Solution: Add redirect rule (should be automatic with netlify.toml): 
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

​
Environment Variables Not Working

Problem: import.meta.env.VITE_SUPABASE_URL returns undefined Solutions:
  1. Verify variables are added in Netlify dashboard
  2. Ensure variable names start with VITE_
  3. Trigger new deployment after adding variables
  4. Check build logs for environment variable warnings

​
Supabase Connection Fails

Problem: “Failed to fetch” or CORS errors Solutions:
  1. Add Netlify URL to Supabase allowed redirect URLs
  2. Check Supabase Site URL setting includes Netlify domain
  3. Verify environment variables are correct

​
Performance Optimization

​
Asset Optimization

Netlify automatically:
  • Compresses assets with Brotli/gzip
  • Serves from global CDN
  • Caches static assets

​
Cache Headers

Vite build automatically generates hashed filenames (app.abc123.js), enabling long-term caching: 
Cache-Control: public, max-age=31536000, immutable

​
Monitoring

​
Analytics

Enable Netlify Analytics:
  1. Go to Analytics tab
  2. Enable analytics (paid feature)
  3. View page views, top pages, and traffic sources

​
Logs

View function logs and form submissions:
  1. Go to Logs tab
  2. Filter by type and date

​
Next Steps

Environment Variables

Configure required variables

Supabase Setup

Complete backend configuration

Build docs developers (and LLMs) love

Get started for freeTalk to us