Skip to main content

Deploy to Netlify

Deploy your SvelteBolt application to Netlify with serverless functions support in under 10 minutes.

Prerequisites​

  • SvelteBolt project ready locally
  • GitHub/GitLab account with your code pushed
  • Netlify account (free tier available)
  • Supabase project configured with database schema and auth enabled
  • Stripe account with API keys (for payments)

Step 1: Prepare SvelteKit for Netlify​

SvelteBolt uses adapter-auto by default, which automatically detects the deployment platform and installs the appropriate adapter. For Netlify, this means @sveltejs/adapter-netlify will be installed automatically during the build process.

However, if you want to configure Netlify-specific options, you can explicitly install and configure the Netlify adapter:

import adapter from "@sveltejs/adapter-netlify";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({
      edge: false,
      split: false,
    }),
  },
};

export default config;

Install Netlify adapter (optional):

bun add -D @sveltejs/adapter-netlify
# or
npm install -D @sveltejs/adapter-netlify

Note: The respective adapter will be installed by default when you use adapter-auto, but adding it to your project allows you to specify Netlify-specific options like edge and split configuration.

Step 2: Connect Repository​

  1. Go to netlify.com and sign in
  2. Click "Add new site" → "Import an existing project"
  3. Connect your Git provider:
    • Connect GitHub/GitLab if not already connected
    • Choose your SvelteBolt repository
    • Click "Deploy site"

Step 3: Configure Build Settings​

Netlify should auto-detect, but verify these settings:

Build command: bun run build (or npm run build) Publish directory: build Functions directory: build/server (auto-configured)

Step 4: Environment Variables​

Add environment variables in Netlify dashboard:

  1. Go to Site settings → Environment variables
  2. Add each variable:
# Supabase (Required - Main Database)
PUBLIC_SUPABASE_URL=https://your-project.supabase.co
PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6...
SUPABASE_SERVICE_ROLE_SECRET=eyJhbGciOiJIUzI1NiIsInR5cCI6...

# Stripe (Required for payments)
PUBLIC_STRIPE_KEY=pk_live_51ABC123...
STRIPE_SECRET_KEY=sk_live_51ABC123...
STRIPE_WEBHOOK_SECRET=whsec_ABC123...
  1. Choose deployment context:
    • All (production and deploy previews)
    • Production (live site only)
    • Deploy previews (branch previews only)

Step 5: Deploy​

  1. Click "Deploy site"
  2. Wait 3-5 minutes for build to complete
  3. Your app will be live at https://random-name.netlify.app

Step 6: Update Stripe Webhooks​

Important: Update your Stripe webhook URL:

  1. Go to Stripe Dashboard → Developers → Webhooks
  2. Select your webhook endpoint
  3. Update the URL to: https://your-site.netlify.app/api/stripe/webhook
  4. Save changes

Step 7: Configure Supabase for Production​

Important: Add your Netlify domain to Supabase settings:

  1. Go to Supabase Dashboard → Authentication → URL Configuration
  2. Add Site URL: https://your-site.netlify.app
  3. Add Redirect URLs:
    • https://your-site.netlify.app/auth/callback
    • https://your-site.netlify.app/auth/confirm
  4. Save configuration

For custom domains:

  • Update Site URL to your custom domain
  • Add custom domain to redirect URLs
  • Update any hardcoded URLs in your app

Custom Domain (Optional)​

  1. In Netlify dashboard, go to Site settings → Domain management
  2. Add custom domain
  3. Configure DNS as instructed
  4. SSL automatically enabled
  5. Update Stripe webhook URL to use custom domain

Netlify Features​

Deploy Previews​

  • Every pull request gets a unique preview URL
  • Test changes before merging to main
  • Share previews with team members

Branch Deploys​

  • Deploy specific branches for staging
  • Set up staging environment from development branch
  • Test features in isolation

Troubleshooting​

Common SvelteKit + Netlify Issues​

❌ "Function invocation failed" errors:

# Add to netlify.toml
[build]
  command = "bun run build"
  functions = "build/server"

[functions]
  node_bundler = "esbuild"

❌ Build fails with adapter error:

# Ensure correct adapter in svelte.config.js
import adapter from '@sveltejs/adapter-netlify';

❌ API routes timing out:

  • Netlify functions have 10s timeout (free tier)
  • Optimize database queries
  • Consider upgrading to Pro for 26s timeout

❌ Environment variables not available:

  • Check variables are set for correct deployment context
  • Redeploy after adding new variables
  • Verify naming matches exactly (case-sensitive)

❌ Large bundle size issues:

# Add to netlify.toml
[build]
  environment = { NODE_OPTIONS = "--max_old_space_size=4096" }

❌ Supabase connection issues:

  • Add your Netlify domain to Supabase CORS settings
  • Include both https://your-site.netlify.app and custom domain
  • Verify database schema is properly migrated
  • Check if Row Level Security (RLS) policies are correctly configured
  • Ensure Supabase project is not paused (free tier limitation)
  • Test Supabase connection with a simple query first
  • Check if auth providers are enabled in Supabase dashboard
  • Verify email templates are configured for auth flows
  • Ensure service role key has correct permissions

Performance Optimization​

Add netlify.toml for optimization:

[build]
  command = "bun run build"
  functions = "build/server"

[functions]
  node_bundler = "esbuild"

[[headers]]
  for = "/build/*"
  [headers.values]
    Cache-Control = "public, immutable, max-age=31536000"

[[headers]]
  for = "*.js"
  [headers.values]
    Cache-Control = "public, max-age=31536000"

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

Edge Functions (Optional)​

For ultra-fast response times, use Netlify Edge Functions:

// netlify/edge-functions/api.js
export default async (request, context) => {
  // Your API logic here
  return new Response("Hello from the edge!");
};

export const config = {
  path: "/api/edge/*",
};

Monitoring​

Check these after deployment:

✅ Site loads correctly at your Netlify URL
✅ Authentication works (login/signup)
✅ Stripe payments process successfully
✅ Webhooks receive events (check function logs)
✅ Database connections work
✅ API routes respond correctly
✅ Form submissions work (if using Netlify forms)

Monitor in Netlify dashboard:

  • Functions tab for serverless function logs
  • Deploys tab for build history
  • Analytics for traffic insights

Next Steps​