Vercel

Overview

The architecture of a monorepo deployed to Vercel

Prerequisites

Install following CLI tools globally

bun add -g turbo
bun add -g @dotenv-run/cli
bun add -g vercel

Setup

Follow SvelteKit on Vercel

Install SvelteKit's Vercel adapter plugin
Add the Vercel adapter to your Svelte config
Configure your SvelteKit deployment
Configuration options
Server-Side Rendering
Use Vercel environment variables with SvelteKit
1. VERCEL_COMMIT_REF
Incremental Static Regeneration (ISR)
Web Analytics
Speed Insights
Draft Mode
Rewrites
1. We do not recommend using vercel.json rewrites with SvelteKit.
Edge Middleware
1. We recommend using SvelteKit's server hooks to modify responses.

CLI

#
vercel whoami
vercel teams list
# to switch vercel teams (when user has multiple teams)
vercel teams switch threatmatic
#
vercel env ls
vercel env ls --environment production
vercel env ls --scope threatmatic
# Pull all Development Environment Variables down from the cloud
vercel env pull .env.development.local
# (DANGER)
vercel env add API_TOKEN --sensitive
vercel env rm API_TOKEN

Link

Using Monorepos with Vercel CLI

[!NOTE] If you're working in a monorepo using the Git Integration, you can link multiple projects at once using vc link --repo

vercel link --repo --yes --scope threatmatic --token $VERCEL_TOKEN

[!NOTE] We also need to vercel link in apps/console as turborepo is not detected by vercel-toolbar yet.
this will generate files in apps/console/.vercel

cd apps/console
vercel link

Dev

Test Vercel deployment environment locally and test your Vercel Project before deploying using the vercel dev CLI command.

vercel dev
vercel dev apps/docs

Build

Incremental Static Regeneration (ISR) is a modern web development strategy that allows developers to create and update static pages on-demand, after the initial build.

The result of ISR, for the end-user, feels as fast as static-site generation, served on Vercel's Edge Network.

If your team uses a trunk-based development workflow and you want to deploy using tags and releases, this guide will walk you through the steps to automate deployments via tags instead of branches.

Can you deploy based on tags/releases on Vercel?

Manual Deploy

vercel deploy --prod

Logs

see logs in prod

vercel logs threatmatic-console.vercel.app

Environment Variables

Vercel provides a set of System Environment Variables that are automatically populated by the System, such as the URL of the Deployment or the name of the Git branch deployed. e.g.,:

VERCEL = 1
VERCEL_ENV = production, preview, or development
VERCEL_GIT_COMMIT_REF = feature_branch

You can use then to detect build is targeted for Vercel deployment and use appropriate SvelteKit Adaptors