Web Server

Dette er et eksempel på en simpel web-server, lavet med node js og det ofte benyttede web framework express. Ved at benytte pakker fra npm, kan man ret nemt lave systemet uden at skulle programmere alt op fra grunden.

Opsætning af projekt

Først skal der laves et projekt så node kan finde ud af at køre programmet, og har en package.json fil til at holde styr på projektet og afhængigheder af biblioteksmoduler.

Start med at lave en mappe, som kan indeholde dit projekt. Kald den f.eks. web-server. I denne mappe skal du køre følgende kommando, for at oprette projekt filen package.json.

npm init

Udfyld passende værdier som svar på de spørgsmål programmet stiller. Jeg foreslår at ændre din main fil til server.js.

Dernæst har du mulighed for at installere afhængigheder.

npm install express

Du burde nu have en package.json fil, der ser nogenlunde sådan ud:

{
  "name": "web-server-demo",
  "version": "1.0.0",
  "description": "Demo web server",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Bemærk at installerede pakker er listet under afhængigheder.

Simple server med output

Derefter skal du oprette filen server.js med følgende indhold.

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Nu kan du køre eksemplet med denne kommando:

node server.js

Åben din browser og gå til http://localhost:3000. Her vil du se en side der blot indeholder teksten Hello, World!.

Som du sikkert har bemærket er der ikke noget html på siden. Ved at ændre lidt på serveren kan vi indsætte et par tags således.

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('<html><body><h1>Hello, World!</h1></body></html>')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Husk at genstarte serveren i terminalen, og genindlæse siden i browseren for at se ændringen.

Det bliver hurtigt unødvendigt besværligt at skrive html indholdet midt i server koden. Derfor ændrer vi serveren til at læse det statiske indhold fra filer i en mappe på harddisken.

const express = require('express')
const app = express()
const port = 3000

app.use(express.static(__dirname + "/public"));

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Opret en mappe med navnet public, i samme bibliotek som server.js.

Nu kan vi oprette alle de statiske filer og mapper der ønskes gjort tilgængelige på webserveren, ved at placere dem i mappen public.

Som eksempel kan vi lave en forside, ved at lave filen public/index.html, og give den følgende indhold.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Min Side</title>
</head>
<body>
  <h1>Hej Verden</h1>
  <p>Velkommen til express js webserver server lyn kursus.</p>
</body>
</html>

Herefter er det blot fantasien, der sætter grænser for indholdet. Måske har du brug for at læse en kort introduktion til HTML eller CSS inden du går i gang.

Materiale