{"success":true,"data":{"id":"019cf291-710c-76ca-b124-742cbd869139","title":"Deploying SvelteKit to Netlify","slug":"deploying-sveltekit-to-netlify","content":"# Deploying SvelteKit to Netlify\n\nNetlify is a powerful platform for deploying SvelteKit applications, offering features like form handling, edge functions, and branch-based deployments. This guide walks through the complete deployment process.\n\n## Why Netlify?\n\n- **JAMstack pioneer**: Optimized for modern frontend frameworks\n- **Form handling**: Built-in form submissions without backend code\n- **Edge functions**: Run code at the edge ( Deno runtime)\n- **Branch deploys**: Every branch gets its own URL\n- **Split testing**: A/B testing with traffic splitting\n- **Large free tier**: Generous limits for side projects\n\n## Prerequisites\n\n- Git repository with SvelteKit code\n- Netlify account (free tier available)\n- Node.js 20+ installed\n\n### Install Development Tools\n\nWe recommend using **mise** (version manager) and **pnpm** (package manager) instead of npm:\n\n**Install mise**:\n```bash\ncurl https://mise.run | sh\n# Add to your shell (follow post-install instructions)\necho 'eval \"$(mise activate)\"' >> ~/.bashrc\n# or for zsh\necho 'eval \"$(mise activate zsh)\"' >> ~/.zshrc\n```\n\n**Install Node.js via mise**:\n```bash\nmise use -g nodejs@latest\n```\n\n**Install pnpm**:\n```bash\ncurl -fsSL https://get.pnpm.io/install.sh | sh -\n```\n\nWhy pnpm over npm?\n- Faster installs through content-addressable storage\n- Strict dependency isolation prevents phantom dependencies\n- Disk space efficient through hard-linking\n- More reliable lockfile format\n\n## Step 1: Prepare Your Project\n\n### Configure Adapter\n\nInstall the Netlify adapter:\n\n```bash\ncd frontend\npnpm install -D @sveltejs/adapter-netlify\n```\n\nUpdate `svelte.config.js`:\n\n```javascript\nimport adapter from '@sveltejs/adapter-netlify';\nimport { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\nconst config = {\n preprocess: vitePreprocess(),\n kit: {\n adapter: adapter({\n // Optional: split routes into separate functions\n split: false\n })\n }\n};\n\nexport default config;\n```\n\n### Environment Variables\n\nCreate `frontend/.env.production`:\n\n```bash\nPUBLIC_API_URL=https://tcs-svc-9k2m.yourdomain.com\nPUBLIC_GRAPHQL_ENDPOINT=https://tcs-svc-9k2m.yourdomain.com/graphql\nPUBLIC_APP_URL=https://your-app.netlify.app\n```\n\n**Security Note**: Use an obscure subdomain like `tcs-svc-9k2m` instead of predictable names like `api` or `backend`. Attackers scan for common subdomains automatically. An unguessable name hides your backend from reconnaissance and reduces automated attacks.\n\n### Netlify Configuration\n\nCreate `frontend/netlify.toml`:\n\n```toml\n[build]\n command = \"pnpm run build\"\n publish = \"build\"\n\n[build.environment]\n NODE_VERSION = \"20\"\n\n[[redirects]]\n from = \"/api/*\"\n to = \"https://tcs-svc-9k2m.yourdomain.com/api/:splat\"\n status = 200\n force = true\n\n[[redirects]]\n from = \"/graphql\"\n to = \"https://tcs-svc-9k2m.yourdomain.com/graphql\"\n status = 200\n force = true\n\n[[headers]]\n for = \"/*\"\n [headers.values]\n X-Frame-Options = \"DENY\"\n X-Content-Type-Options = \"nosniff\"\n Referrer-Policy = \"strict-origin-when-cross-origin\"\n```\n\n## Step 2: Deploy via Web UI\n\n### Connect Repository\n\n1. Go to [netlify.com](https://netlify.com) and log in\n2. Click \"Add new site\" → \"Import an existing project\"\n3. Connect to Git provider (GitHub, GitLab, Bitbucket)\n4. Select your repository\n\n### Configure Build Settings\n\nNetlify auto-detects SvelteKit, but verify:\n\n- **Build command**: `pnpm run build`\n- **Publish directory**: `build`\n- **Production branch**: `main`\n\nIf your frontend is in a subdirectory:\n- **Base directory**: `frontend`\n\nClick \"Deploy site\"\n\n### Wait for Deployment\n\nNetlify builds and deploys your site. You'll receive:\n- Site URL: `https://random-name-123456.netlify.app`\n- Admin URL: `https://app.netlify.com/sites/your-site`\n\n## Step 3: Deploy via CLI\n\n### Install Netlify CLI\n\n```bash\npnpm add -g netlify-cli\n```\n\n### Login\n\n```bash\nnetlify login\n```\n\n### Initialize Project\n\n```bash\ncd frontend\nnetlify init\n```\n\nSelect:\n- \"Create & configure a new site\"\n- Your team\n- Site name (optional)\n\n### Deploy\n\n**Draft deploy** (for testing):\n```bash\nnetlify deploy\n```\n\n**Production deploy**:\n```bash\nnetlify deploy --prod\n```\n\n## Step 4: Environment Variables\n\n### Via Web UI\n\n1. Site settings → Environment variables\n2. Add variables:\n - Key: `PUBLIC_API_URL`\n - Value: `https://tcs-svc-9k2m.yourdomain.com`\n - Scope: All (or Production/Deploy previews)\n\n### Via CLI\n\n```bash\nnetlify env:set PUBLIC_API_URL https://tcs-svc-9k2m.yourdomain.com\n```\n\n### Via netlify.toml\n\n```toml\n[context.production.environment]\n PUBLIC_API_URL = \"https://tcs-svc-9k2m.yourdomain.com\"\n\n[context.deploy-preview.environment]\n PUBLIC_API_URL = \"https://tcs-stg-4m7k.yourdomain.com\"\n```\n\n## Step 5: Custom Domain\n\n### Add Domain\n\n1. Site settings → Domain management\n2. Click \"Add custom domain\"\n3. Enter your domain: `yourapp.com`\n4. Click \"Verify\"\n\n### Configure DNS\n\n**Option A: Netlify DNS (Recommended)**\n\n1. Change nameservers at your registrar to:\n ```\n dns1.p04.nsone.net\n dns2.p04.nsone.net\n dns3.p04.nsone.net\n dns4.p04.nsone.net\n ```\n\n**Option B: External DNS (CNAME)**\n\nAdd CNAME record:\n```\nType: CNAME\nName: www\nValue: your-site.netlify.app\n```\n\nFor apex domain (yourapp.com), use A records:\n```\nType: A\nName: @\nValue: 75.2.60.5\nValue: 99.83.231.61\n```\n\n### Enable HTTPS\n\nNetlify automatically provisions SSL certificates via Let's Encrypt. No manual setup needed.\n\n## Step 6: Form Handling (Optional)\n\nNetlify can handle form submissions without a backend:\n\n### Add Form to SvelteKit\n\n```svelte\n\n\n```\n\n### View Submissions\n\nSubmissions appear in:\n- Netlify dashboard → Forms\n- Can be exported as CSV\n- Can trigger webhooks\n\n## Step 7: Edge Functions (Optional)\n\nCreate `frontend/netlify/edge-functions/hello.ts`:\n\n```typescript\nimport type { Config, Context } from '@netlify/edge-functions';\n\nexport default async (request: Request, context: Context) => {\n return new Response(JSON.stringify({\n message: \"Hello from the edge!\",\n location: context.geo?.city\n }), {\n headers: { 'Content-Type': 'application/json' }\n });\n};\n\nexport const config: Config = {\n path: \"/api/hello\"\n};\n```\n\nEdge functions run at the edge, close to users.\n\n## Advanced Configuration\n\n### Redirects and Rewrites\n\n```toml\n# netlify.toml\n[[redirects]]\n from = \"/old-path\"\n to = \"/new-path\"\n status = 301\n\n[[redirects]]\n from = \"/api/*\"\n to = \"https://backend.example.com/:splat\"\n status = 200\n force = true\n headers = {X-From = \"Netlify\"}\n```\n\n### Headers\n\n```toml\n[[headers]]\n for = \"/*.js\"\n [headers.values]\n Cache-Control = \"public, max-age=31536000\"\n```\n\n### Branch Deploy Contexts\n\n```toml\n[context.production]\n command = \"pnpm run build\"\n\n[context.staging]\n command = \"pnpm run build:staging\"\n\n[context.deploy-preview]\n command = \"pnpm run build:preview\"\n```\n\n## Troubleshooting\n\n### Build Failures\n\nCheck build logs in Netlify dashboard. Common issues:\n\n**Node version mismatch**:\n```toml\n[build.environment]\n NODE_VERSION = \"20\"\n```\n\n**Lock file issues**:\n```bash\n# Regenerate lock file\nrm pnpm-lock.yaml\npnpm install\n```\n\n### 404 on Client-Side Routes\n\nAdd to `netlify.toml`:\n\n```toml\n[[redirects]]\n from = \"/*\"\n to = \"/index.html\"\n status = 200\n```\n\nOr use the SvelteKit Netlify adapter which handles this automatically.\n\n### Environment Variables Not Working\n\n- Check scope (Production vs Deploy previews)\n- Ensure variables start with `PUBLIC_` for browser access\n- Trigger a new deploy after adding variables\n\n## Production Checklist\n\n- [ ] Site builds without errors\n- [ ] Environment variables configured\n- [ ] Custom domain added (if applicable)\n- [ ] HTTPS enabled\n- [ ] API endpoints connect to backend\n- [ ] Forms working (if using Netlify Forms)\n- [ ] Branch deploys tested\n- [ ] Analytics configured (optional)\n\n## Next Steps\n\n- [Deploy Phoenix to Fly.io](/guidebooks/ai-assisted-coding/deploy-phoenix-flyio)\n- [Deploy Phoenix to Dokploy](/guidebooks/ai-assisted-coding/deploy-phoenix-dokploy)\n- [SSL and Domain Configuration](/guidebooks/ai-assisted-coding/ssl-domains)","access_level":"public","order":3,"meta_description":"Complete guide to deploying your SvelteKit frontend on Netlify. Includes form handling, edge functions, and branch deploys.","youtube_video_id":null,"estimated_read_time":12,"is_email_locked":false,"section":{"id":"019cf291-70f9-7ded-847b-1b8a9f8210b2","title":"Deployment Guides","slug":"deployment-guides","description":"Step-by-step deployment guides for SvelteKit and Phoenix applications. Deploy to Cloudflare Pages, Netlify, Fly.io, or your own VPS with Dokploy.","order":7,"access_level":"mixed"}},"cached":false,"stale":false}

Stay in the loop