Hosting och Production 🌐

Ditt uppdrag 🎯

Ta din app från utvecklingsdator till internet där alla kan använda den:

Förstå skillnaden mellan development och production
Konfigurera din app för cloud hosting
Hantera environment variables säkert
Lösa vanliga deployment-problem

Viktigt: Du ska inte bara följa instruktioner! Du ska förstå VARFÖR varje steg behövs.

Från localhost till världen! 🚀

Hittills har din app bara funnits på localhost:5173. Nu ska vi få den att fungera på en riktig URL som yourapp.render.com som vem som helst kan besöka!

Fas 1: Förstå produktionsmiljöer 🧠

Steg 1: Development vs Production

Före du börjar, förstå skillnaderna:

Development (din dator):

npm run dev startar utvecklingsserver
Hot reload när du ändrar kod
Utvecklingsverktyg och felmeddelanden
SQLite-fil på din hårddisk
Alla secrets i .env fil

Production (molnet):

Optimerad, kompilerad kod
Ingen hot reload eller dev tools
Begränsade felmeddelanden
Databas måste vara persistent
Secrets måste hanteras säkert

Frågor att fundera på:

Varför kan du inte bara kopiera din dev-mapp till en server?
Vad händer med din SQLite-fil när servern startas om?
Hur får dina hemligheter (API keys, etc.) till production utan att commita dem?

Steg 2: Välj hosting-provider

Olika alternativ:

Provider	Fördelar	Nackdelar	Kostnad
Render	Enkelt, gratis tier	Begränsad gratis tier	Gratis → $7/månad
Vercel	Suveränt för frontend	Komplicerat för databaser	Gratis → $20/månad
Railway	Bra för fullstack	Mindre dokumentation	$5/månad
Fly.io	Mycket kraftfullt	Steep learning curve	Gratis → variabel

För denna modul använder vi Render eftersom det är enkelt att komma igång med.

Steg 3: Planera din deployment

Frågor att lösa först:

Adapter: Vilken runtime ska din app köras i? (Node.js, Cloudflare, Deno?)
Databas: Ska du använda samma SQLite eller uppgradera till PostgreSQL?
Environment: Vilka variabler behöver vara olika i production?
Build process: Vilka kommandon ska köras för att bygga din app?

Fas 2: Förbered din app för production 🔧

Steg 1: Ändra SvelteKit adapter

Problem: SvelteKit vet inte vilken runtime du ska använda.

Nuvarande situation:

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';

adapter-auto gissar vilken plattform du använder, men det är inte tillförlitligt.

Din uppgift: Byt till Node.js adapter för Render.

# Ta bort auto adapter
npm uninstall @sveltejs/adapter-auto

# Installera Node adapter
npm install @sveltejs/adapter-node

Uppdatera konfiguration:

// svelte.config.js
import adapter from '@sveltejs/adapter-node';

export default {
  kit: {
    adapter: adapter()
  }
};

Frågor att reflektera:

Vad tror du händer när du bygger med olika adapters?
Vad är skillnaden mellan adapters för Node vs Cloudflare vs Deno?

Steg 2: Konfigurera Node.js version

Problem: Render behöver veta vilken Node.js version din app kräver.

Lägg till i din package.json:

{
  "name": "your-app",
  "scripts": { ... },
  "dependencies": { ... },
  "engines": {
    "node": ">=18"
  }
}

Varför behövs detta?

Render kör din app på sina servrar
De behöver veta vilken Node.js version du utvecklat för
Olika versioner har olika features och buggar

Steg 3: Testa byggprocessen lokalt

Innan du deployer, testa att din app kan byggas:

# Bygg production-version
npm run build

# Testa production-servern lokalt
node build

Besök http://localhost:3000 och kontrollera:

Fungerar alla sidor?
Fungerar databas-operationer?
Finns det några fel i konsolen?

Felsökning om något inte fungerar:

Kolla build/ mappen - vad skapades?
Läs felmeddelanden noggrant
Jämför med din dev-version

Fas 3: Environment variables och säkerhet 🔒

Steg 1: Identifiera secrets

Vad i din app bör INTE vara publikt?

Kontrollera din .env fil:

# Vilka av dessa är känsliga?
DATABASE_URL="file:./dev.db"
API_KEY="sk-1234567890"
APP_URL="http://localhost:5173"

Kategorisera:

Secrets: Lösenord, API keys, secrets
Konfiguration: URLs, databas-anslutningar
Public: App-namn, publika API endpoints

Steg 2: Production environment variables

Fundera: Vilka värden bör vara annorlunda i production?

Development vs Production:

# Development
DATABASE_URL="file:./dev.db"
APP_URL="http://localhost:5173"
NODE_ENV="development"

# Production  
DATABASE_URL="file:./prod.db"  # Eller PostgreSQL URL
APP_URL="https://yourapp.render.com"
NODE_ENV="production"

Steg 3: Säkra secrets

Kritisk säkerhet: Committa ALDRIG secrets till Git!

Kontrollera din .gitignore:

.env
.env.local
.env.production
*.db
node_modules/

Verifiera:

# Kolla vad som är tracked av Git
git status

# Om .env visas - ta bort det OMEDELBART
git rm --cached .env
git commit -m "Remove .env from tracking"

Fas 4: Deploy till Render 🚀

Steg 1: Förbered Git repository

Render behöver din kod från GitHub/GitLab.

Om du inte redan har det:

# Skapa Git repo
git init
git add .
git commit -m "Initial commit"

# Pusha till GitHub/GitLab
# (Skapa först ett repo på GitHub)
git remote add origin https://github.com/yourname/yourapp.git
git push -u origin main

Steg 2: Skapa Render service

Gå till render.com och:

Skapa konto och länka till GitHub
Klicka "New +" → "Web Service"
Välj din repository
Konfigurera service

Konfigurations-utmaning:

Setting	Vad ska du sätta?	Varför?
Name	`your-app-name`	URL blir `your-app-name.render.com`
Branch	`main` eller `master`	Vilken branch ska deployas
Root Directory	Tom (om hela repo är appen)	Var package.json finns
Runtime	Node	Vi använder Node.js adapter
Build Command	`?`	Vilka kommandon bygger din app?
Start Command	`?`	Vilket kommando startar din app?

Fundera själv: Vad ska Build Command och Start Command vara?

Tips om du fastnar...

Build Command: npm install && npx prisma generate && npm run build

Installerar dependencies
Genererar Prisma client för produktions-schema
Bygger SvelteKit app

Start Command: node build

Startar den byggda appen

Steg 3: Konfigurera environment variables

I Render dashboard:

Gå till "Environment"
Lägg till variabler

Vilka variabler behöver du sätta?

DATABASE_URL - var ska databas-filen ligga?
NODE_ENV - production
Andra secrets från din .env

Databas-utmaning: Vart ska du sätta DATABASE_URL?

# Alternativ A: Lokal fil på Render server
DATABASE_URL="file:./prod.db"

# Alternativ B: Extern PostgreSQL (mer robust)
DATABASE_URL="postgresql://user:pass@host:port/db"

För nu, börja med Alternativ A. Vi kan uppgradera senare.

Fas 5: Debug deployment-problem 🔍

Steg 1: Förstå deployment-loggar

När din deploy startar, titta på loggarna i real-time:

Build logs visar:

npm install progress
Prisma generation
SvelteKit build process
Eventuella fel

Runtime logs visar:

Server startup
HTTP requests
Fel i din app
Databas-operationer

Steg 2: Vanliga problem och lösningar

❌ "Command not found: node"

Problem: Node.js version-problem Lösning: Kontrollera engines i package.json

❌ "Cannot find module '@prisma/client'"

Problem: Prisma client genererades inte i build Lösning: Lägg till npx prisma generate i Build Command

❌ "ENOENT: no such file or directory"

Problem: Databas-fil hittas inte Lösning: Kontrollera DATABASE_URL path

❌ "Port 3000 is already in use"

Problem: Render tilldelar en annan port Lösning: Använd process.env.PORT || 3000

Steg 3: Iterativ debugging

Process för att lösa problem:

Läs felmeddelandet noggrant
Googla det exakta felmeddelandet
Jämför med lokal build (npm run build && node build)
Testa en förändring i taget
Committa och pusha för ny deploy

Tålamod: Varje deploy tar 2-5 minuter!

Fas 6: Produktions-optimeringar 🎯

Steg 1: Prestanda-övervakning

När din app är live:

Testa hastighet: PageSpeed Insights
Testa uptime: Besök din app flera gånger per dag
Övervaka loggar: Kolla Render dashboard regelbundet

Steg 2: Databas-upgrade (valfritt)

SQLite-begränsningar i production:

Data försvinner när server startas om
Ingen backup automatiskt
Begränsad concurrent access

PostgreSQL-fördelar:

Persistent data
Automatiska backups
Bättre prestanda
Mer robust

Om du vill uppgradera:

Skapa PostgreSQL databas på Render
Uppdatera DATABASE_URL
Ändra provider i schema.prisma till postgresql
Deploy igen

Steg 3: Custom domain (avancerat)

Standarddomän: your-app.render.com

Custom domain: yourawesomeapp.com

Process:

Köp domän från registrar
Konfigurera DNS records
Lägg till domain i Render
Aktivera SSL certificate

Utmaningar att lösa själv 🎯

Grundnivå:

Få appen live på Render ✓
Konfigurera environment variables ✓
Testa all funktionalitet i production ✓

Mellannivå:

Sätt upp PostgreSQL istället för SQLite
Implementera health check endpoint
Lägg till error monitoring (console logs)

Expertnivå:

Custom domain med SSL
CI/CD pipeline med automatiska tester
Multi-environment setup (staging + production)

Reflektion och lärande 🤔

Efter successful deployment:

Deployment-förståelse:

Vad var svårast med deployment-processen?
Vilka fel stötte du på och hur löste du dem?
Vad förstår du nu om production som du inte förstod innan?

Infrastructure-reflektion:

Hur skiljer sig production från development?
Vilka säkerhetsaspekter blev tydligare?
Vad skulle du göra annorlunda nästa gång?

Användarupplevelse:

Känns din app snabb/långsam i production?
Fungerar all funktionalitet som förväntat?
Vilka förbättringar vill du göra?

Framtida förbättringar 🔮

När du behärskar grunderna:

Säkerhet:

HTTPS enforcement
Security headers
Rate limiting
Input sanitization

Prestanda:

Caching strategies
Image optimization
Database indexing
CDN för statiska filer

Monitoring:

Error tracking (Sentry)
Analytics (Google Analytics)
Uptime monitoring
Performance metrics

Development workflow:

Staging environment
Automated testing
Database migrations
Blue-green deployments

Vanliga produktions-misstag ⚠️

❌ Hardkodade development URLs

// DÅLIGT
const API_URL = 'http://localhost:5173/api';

// BÄTTRE
const API_URL = process.env.NODE_ENV === 'production' 
  ? 'https://yourapp.render.com/api'
  : 'http://localhost:5173/api';

❌ Glöm environment variables

Appen fungerar lokalt men kraschar i production
Kontrollera att alla .env variabler finns i Render

❌ Ignorera säkerhet

// DÅLIGT i production
app.use(cors({ origin: '*' }));

// BÄTTRE
app.use(cors({ origin: process.env.FRONTEND_URL }));

❌ Ingen error handling

// DÅLIGT - okontrollerade exceptions krashar appen
await prisma.user.create(data);

// BÄTTRE
try {
  await prisma.user.create(data);
} catch (error) {
  console.error('Database error:', error);
  return { error: 'Internal server error' };
}

Success checklist ✅

Din app är production-ready när:

Den är tillgänglig på en publik URL
All funktionalitet fungerar (testa allt!)
Inga secrets är committade till Git
Environment variables är korrekt konfigurerade
Error messages är användar-vänliga (inte tekniska stack traces)
Data persisteras mellan server-omstarter
Prestanda är acceptabel (< 3 sekunder load time)

Grattis! 🎉

Du har nu:

Gått från localhost till production
Lärt dig skillnaden mellan development och production
Förstått hur deployment och hosting fungerar
Skapat en app som vem som helst på internet kan använda!

Detta är en STOR milestone! De flesta programmerare tar månader att komma hit.

Du är nu en fullstack-utvecklare! 💪

Med en app live i production kan du visa den för vänner, familj, eller potentiella arbetsgivare. Du förstår hela stacken från databas till frontend till deployment!

Resurser för fördjupning 📚

Render Documentation: render.com/docs
SvelteKit Adapters: kit.svelte.dev/docs/adapters
The Twelve-Factor App: 12factor.net - Best practices för production apps
Environment Variables: github.com/motdotla/dotenv

Ditt uppdrag 🎯​

Fas 1: Förstå produktionsmiljöer 🧠​

Steg 1: Development vs Production​

Steg 2: Välj hosting-provider​

Steg 3: Planera din deployment​

Fas 2: Förbered din app för production 🔧​

Steg 1: Ändra SvelteKit adapter​

Steg 2: Konfigurera Node.js version​

Steg 3: Testa byggprocessen lokalt​

Fas 3: Environment variables och säkerhet 🔒​

Steg 1: Identifiera secrets​

Steg 2: Production environment variables​

Steg 3: Säkra secrets​

Fas 4: Deploy till Render 🚀​

Steg 1: Förbered Git repository​

Steg 2: Skapa Render service​

Steg 3: Konfigurera environment variables​

Fas 5: Debug deployment-problem 🔍​

Steg 1: Förstå deployment-loggar​

Steg 2: Vanliga problem och lösningar​

❌ "Command not found: node"​

❌ "Cannot find module '@prisma/client'"​

❌ "ENOENT: no such file or directory"​

❌ "Port 3000 is already in use"​

Steg 3: Iterativ debugging​

Fas 6: Produktions-optimeringar 🎯​

Steg 1: Prestanda-övervakning​

Steg 2: Databas-upgrade (valfritt)​

Steg 3: Custom domain (avancerat)​

Utmaningar att lösa själv 🎯​

Grundnivå:​

Mellannivå:​

Expertnivå:​

Reflektion och lärande 🤔​

Deployment-förståelse:​

Infrastructure-reflektion:​

Användarupplevelse:​

Framtida förbättringar 🔮​

Säkerhet:​

Prestanda:​

Monitoring:​

Development workflow:​

Vanliga produktions-misstag ⚠️​

❌ Hardkodade development URLs​

❌ Glöm environment variables​

❌ Ignorera säkerhet​

❌ Ingen error handling​

Success checklist ✅​

Grattis! 🎉​

Resurser för fördjupning 📚​