Deployment Guide

# Build from YAML configuration
maplibre-arcgis build map.yaml --output dist/index.html

# Or build TypeScript application
npm run build

# Create S3 bucket
aws s3 mb s3://my-map-app

# Enable static website hosting
aws s3 website s3://my-map-app --index-document index.html

# Upload files
aws s3 sync dist/ s3://my-map-app --delete

# Set bucket policy for public access
aws s3api put-bucket-policy --bucket my-map-app --policy file://policy.json

{
  "Version": "2012-10-17",
  "Statement": [{
    "Sid": "PublicReadGetObject",
    "Effect": "Allow",
    "Principal": "*",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::my-map-app/*"
  }]
}

[build]
  command = "npm run build"
  publish = "dist"

[[headers]]
  for = "/*"
  [headers.values]
    # Required for DuckDB WASM
    Cross-Origin-Opener-Policy = "same-origin"
    Cross-Origin-Embedder-Policy = "require-corp"
    
    # Security headers
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"

{
  "headers": [{
    "source": "/(.*)",
    "headers": [
      { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
      { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
    ]
  }]
}

<!-- MapLibre GL JS -->
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css" rel="stylesheet" />

<!-- MapLibre ArcGIS -->
<script src="https://unpkg.com/maplibre-arcgis@latest/dist/maplibre-arcgis.js"></script>
<link href="https://unpkg.com/maplibre-arcgis@latest/dist/maplibre-arcgis.css" rel="stylesheet" />

<script>
  const map = new maplibregl.Map({
    container: 'map',
    style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
  });
  
  map.on('load', () => {
    const auth = new maplibreArcgis.ArcGISAuthManager({
      portalUrl: 'https://www.arcgis.com',
      authMethod: 'apikey',
      apiKey: 'YOUR_API_KEY',
    });
    
    map.addControl(new maplibreArcgis.EsriFeatureServiceControl({
      id: 'layer',
      url: 'https://.../FeatureServer/0',
      auth,
    }), 'top-left');
  });
</script>

# Build stage
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Production stage
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # Required for DuckDB WASM
    add_header Cross-Origin-Opener-Policy same-origin;
    add_header Cross-Origin-Embedder-Policy require-corp;
    
    # Security headers
    add_header X-Frame-Options DENY;
    add_header X-Content-Type-Options nosniff;
    add_header X-XSS-Protection "1; mode=block";

    # Cache static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # SPA fallback
    location / {
        try_files $uri $uri/ /index.html;
    }
}

version: '3.8'

services:
  map-app:
    build: .
    ports:
      - "8080:80"
    restart: unless-stopped
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost/"]
      interval: 30s
      timeout: 10s
      retries: 3

apiVersion: apps/v1
kind: Deployment
metadata:
  name: maplibre-arcgis-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: maplibre-arcgis
  template:
    metadata:
      labels:
        app: maplibre-arcgis
    spec:
      containers:
      - name: nginx
        image: maplibre-arcgis:latest
        ports:
        - containerPort: 80
        resources:
          requests:
            cpu: 100m
            memory: 128Mi
          limits:
            cpu: 500m
            memory: 256Mi
        livenessProbe:
          httpGet:
            path: /
            port: 80
          initialDelaySeconds: 10
          periodSeconds: 30

apiVersion: v1
kind: Service
metadata:
  name: maplibre-arcgis-service
spec:
  selector:
    app: maplibre-arcgis
  ports:
  - port: 80
    targetPort: 80
  type: ClusterIP
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: maplibre-arcgis-ingress
  annotations:
    nginx.ingress.kubernetes.io/enable-cors: "true"
spec:
  rules:
  - host: maps.example.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: maplibre-arcgis-service
            port:
              number: 80

server {
    listen 443 ssl;
    server_name maps.company.com;

    ssl_certificate /etc/ssl/certs/company.crt;
    ssl_certificate_key /etc/ssl/private/company.key;

    # Proxy to ArcGIS Enterprise
    location /arcgis/ {
        proxy_pass https://enterprise.company.com/arcgis/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Serve static map app
    location / {
        root /var/www/map-app;
        try_files $uri $uri/ /index.html;
        
        # DuckDB WASM headers
        add_header Cross-Origin-Opener-Policy same-origin;
        add_header Cross-Origin-Embedder-Policy require-corp;
    }
}

auth:
  portal_url: https://enterprise.company.com/portal
  method: oauth2
  client_id: INTERNAL_CLIENT_ID

layers:
  - id: internal-parcels
    type: feature_service
    url: https://enterprise.company.com/arcgis/rest/services/Parcels/FeatureServer/0

# DuckDB WASM headers
Header set Cross-Origin-Opener-Policy "same-origin"
Header set Cross-Origin-Embedder-Policy "require-corp"

# Cache static assets
<FilesMatch "\.(js|css|png|jpg|svg|woff2)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Cross-Origin-Opener-Policy" value="same-origin" />
        <add name="Cross-Origin-Embedder-Policy" value="require-corp" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

const auth = new ArcGISAuthManager({
  portalUrl: 'https://www.arcgis.com',
  authMethod: 'oauth2',
  clientId: 'CLIENT_ID',
  tokenStorage: 'sessionStorage', // or 'localStorage', 'memory'
});

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' 'wasm-unsafe-eval' cdn.jsdelivr.net unpkg.com;
  style-src 'self' 'unsafe-inline' fonts.googleapis.com;
  font-src 'self' fonts.gstatic.com;
  img-src 'self' data: blob: *.arcgis.com *.tile.openstreetmap.org basemaps.cartocdn.com;
  connect-src 'self' *.arcgis.com s3.amazonaws.com;

// Good - tree-shakeable
import { ArcGISAuthManager, EsriFeatureServiceControl } from 'maplibre-arcgis';

// Avoid - imports everything
import * as MapLibreArcGIS from 'maplibre-arcgis';

const loadDuckDB = async () => {
  const { DuckDBLayerControl } = await import('maplibre-arcgis/duckdb');
  return new DuckDBLayerControl();
};

// Load when user clicks a button
button.addEventListener('click', async () => {
  const control = await loadDuckDB();
  map.addControl(control, 'top-left');
});