WSL

WSL -7-🧰 Docker node

Modul 7 – VS Code + Docker + WSL

🎯 Syfte

Lära dig hur du utvecklar ett Node.js-projekt direkt i en Docker-container, från WSL och med Visual Studio Code som editor.

📦 Förberedelser – Tillägg i VS Code

Installera följande tillägg i Visual Studio Code:

  1. Remote - WSL – Redigera kod direkt i din WSL-distribution.
  2. Docker – GUI för att hantera Docker-images och containrar.
  3. Dev Containers (valfritt) – För att arbeta med .devcontainer-konfigurationer.

🛠️ Projektstruktur

Vi skapar ett enkelt Node.js-projekt med Express och kör det i en container.

node-docker-app/
├── Dockerfile
├── package.json
├── server.js

📄 Skapa koden

1. server.js

const express = require('express');
const app = express();
const PORT = 3000;

app.get('/', (req, res) => {
  res.send('Hej från Node.js i Docker via WSL!');
});

app.listen(PORT, () => {
  console.log(`Servern körs på http://localhost:${PORT}`);
});

2. package.json

{
  "name": "node-docker-app",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}

3. Dockerfile

# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

🔨 Bygga och köra containern

docker build -t node-docker-app .
docker run -p 3000:3000 node-docker-app

Testa sedan: 📂 Gå till http://localhost:3000 i din webbläsare – du ska se meddelandet från servern.

🧑‍💻 Arbeta i VS Code via WSL

  1. Gå till din projektmapp i WSL:
cd ~/node-docker-app
  1. Starta VS Code:
code .
  1. Redigera filer som vanligt – alla ändringar speglas direkt i containern nästa gång du bygger/kör.

🐳 Docker GUI i VS Code

Öppna Docker-panelen i sidofältet:

  • Se images, containrar och volymer.
  • Starta/stoppa containrar.
  • Öppna terminal i en container.
  • Töm loggar.

⚙️ Bonus: Debugga i container (Node.js)

  1. Installera Node.js Debugger-tillägget i VS Code.
  2. Lägg till en launch.json:
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Starta server",
      "program": "${workspaceFolder}/server.js",
      "runtimeExecutable": "node"
    }
  ]
}
  1. Starta debugläge via Run & Debug.

🧪 Övning – Koppla ihop allt

  1. Klona eller skapa ett nytt Node.js-projekt.
  2. Skapa Dockerfile enligt ovan.
  3. Bygg och kör din container.
  4. Öppna projektet i VS Code med code . från WSL.
  5. Testa att editera, debugga och använda Docker-panelen.

🏁 Klar med Modul 7 – Fullstack med WSL + Docker + VS Code!

Du har nu en komplett miljö för modern mjukvaruutveckling som fungerar sömlöst mellan Windows, Linux och containrar.