VERCEL

Vercel (formerly Zeit) is a cloud application application company offering a fully feature CDN, edge network, and domain registry provider.

The XYZ host can be deployed as a serverless function with the Vercel CLI from the repository root on local or codespaces.

The Vercel CLI can be installed with pnpm install vercel.

A project config vercel.json is required in the root.

The config json defines [security] headers, rewrites for XYZ endpoints, and process environment variables.

{
  "version": 2,
  "build": {
    "env": {
      "NODE_ENV": "production"
    }
  },
  "functions": {
    "api/api.js": {
      "includeFiles": "{public,resources}/**"
    }
  },
  "trailingSlash": false,
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "no-cache"
        },
        {
          "key": "Access-Control-Allow-Headers",
          "value": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        },
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; base-uri 'self'; object-src 'self'; connect-src 'self' geolytix.github.io *.maptiler.com *.mapbox.com www.google-analytics.com api.github.com; worker-src 'self' blob:; child-src 'self' blob:; frame-src 'self' www.google.com www.gstatic.com; form-action 'self'; style-src 'self' 'unsafe-inline' geolytix.github.io unpkg.com cdn.jsdelivr.net fonts.googleapis.com; font-src 'self' geolytix.github.io unpkg.com cdn.jsdelivr.net fonts.gstatic.com; script-src 'self' 'unsafe-inline' unpkg.com cdn.skypack.dev api.mapbox.com www.google.com www.gstatic.com cdn.jsdelivr.net www.google-analytics.com www.googletagmanager.com blob:; img-src 'self' geolytix.github.io api.ordnancesurvey.co.uk *.tile.openstreetmap.org api.mapbox.com res.cloudinary.com *.global.ssl.fastly.net raw.githubusercontent.com cdn.jsdelivr.net gitcdn.xyz data:; media-src 'self' res.cloudinary.com;"
        }
      ]
    }
  ],
  "rewrites": [
    {
      "source": "/public/(.*)",
      "destination": "/$1"
    },
    {
      "source": "/api/query/:_template?",
      "destination": "/api/api.js"
    },
    {
      "source": "/api/module/:module?",
      "destination": "/api/api.js"
    },
    {
      "source": "/api/location/:method?",
      "destination": "/api/api.js"
    },
    {
      "source": "/api/user/:method?/:key?",
      "destination": "/api/api.js"
    },
    {
      "source": "/api/workspace/:key?",
      "destination": "/api/api.js"
    },
    {
      "source": "/api/layer/:format?/:z?/:x?/:y?",
      "destination": "/api/api.js"
    },
    {
      "source": "/api/provider/:provider?",
      "destination": "/api/api.js"
    },
    {
      "source": "/api/(.*)",
      "destination": "/api/api.js"
    },
    {
      "source": "/view/:_template?",
      "destination": "/api/api.js"
    },
    {
      "source": "/",
      "destination": "/api/api.js"
    }
  ],
  "env": {
    "TITLE":"XYZ | MAPP"
  }
}

Headers

Content Security Policy [CSP]

The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a given page.

The sample vercel.json provides some common CSP directives used to access common services and resources for GEOLYTIX hosted production deployments to Vercel. The browser development console will prompt an exception if a CSP policy is missing.

includeFiles

All folders and files in the /public folder are made available to api [serverless] function through the includeFiles config.

A rewrite can be added to access these files through the host.

Files in the resources directory are available to the XYZ host but not publicly accessible.

Rewrites

Source paths for XYZ endpoints can be amended with a directory string in order to access the XYZ api on a path from the application domain assigned by vercel.

DIR

The DIR environment variable must be set with the URL path used to prefix source rewrites.

SAML

A rewrite for the SAML endpoint must be added if SAML is made available for the instance.

{
  "source": "/saml/(.*)",
  "destination": "/api/api.js"
},

Deploy

Calling the Vercel CLI utility with pnpm vercel will require the user to login to Vercel.

You can sign up to Vercel for a free Hobby account using Google or Github SSO. Once logged in to the Vercel dashboard you can follow the link to authenticate the Vercel CLI.

You can use the defaults for project settings. XYZ does not require a specific framework.

After the resources have been uploaded to Vercel and the deployment has been built you will be presented with a deployment URL to visit the Mapp application.

This deployment URL will change with each new deployment.

You will see the permanent project domain in the Overview tab of your Vercel project.

.vercel

A successful deployment to Vercel will create a .vercel project folder in the root directory. Subsequent production deployments vercel --force --prod will automatically overwrite the existing deployment. The .vercel folder must be deleted in order to create a new or update a different deployment hosted through the Vercel platform.

.env and .vercelignore

The env directive must be removed from the vercelignore file if the process environment variables are provided in an [dot]env file.