6 ☁️Deployment

🎯 Syfte

Publicera frontend och backend på internet via en gratis molnplattform. Vi använder Render.com som erbjuder:

• Stöd för Docker eller direkt Node.js/React
• Automatisk deploy från GitHub
• Gratisnivå med HTTPS och CI-liknande byggflöde

🌐 Steg 1: Förbered GitHub-repo

1. Se till att senaste koden är pushad till GitHub
2. Repon bör innehålla:
   • frontend/ (React-app)
   • backend/ (Node/Express-API)
   • (valfritt) docker-compose.yml
   • .github/workflows/ci.yml

🛠️ Steg 2: Skapa två tjänster i Render

Gå till: https://dashboard.render.com

📦 A. Backend – Node Service

1. Klicka New → Web Service
2. Koppla GitHub och välj backend-repot
3. Ställ in:
   • Name: calc-backend
   • Environment: Node
   • Build Command: npm install
   • Start Command: node server.js
   • Port: 5000 (viktigt!)
   • Root Directory: backend
4. Klicka Create Web Service

🎨 B. Frontend – Static Site

1. Klicka New → Static Site
2. Välj samma repo
3. Ställ in:
   • Name: calc-frontend
   • Build Command: npm install && npm run build
   • Publish Directory: frontend/build
4. Klicka Create Static Site

🔄 Steg 3: Anpassa frontend för extern backend

I frontend/src/App.js, byt URL från http://localhost:5000/... till din riktiga backend-URL:

const response = await fetch(`https://calc-backend.onrender.com/calc/${op}?a=${a}&b=${b}`);

(Du får exakt URL från Render när backend är live.)

🔐 Steg 4: Hantera miljövariabler (om du har .env)

I backend:

• Gå till "Environment" i Render och lägg in PORT=5000

🧪 Övning – Gör ditt projekt tillgängligt på webben

1. Skapa Render-konton och tjänster
2. Justera API-anrop i frontend
3. Deploya båda delar från GitHub
4. Testa kalkylatorn live på nätet

✅ Klar med Projektmodul 6!

Du har nu ett fullständigt fullstack-projekt:

• Dockeriserat
• Versionshanterat
• CI/CD-automatiserat
• Publicerat i molnet

I nästa modul avslutar vi projektet med dokumentation, vidareutvecklingsidéer och reflektion.