Här är en samlad start för att komma igång med Node.js och Express.

Det här är en kort introduktion till det allra mest grundläggande i kursen webbserverprogramering. Där använder vi javascript och Node.js som språk och miljö, med paketet Express för att skapa en server. Här är en snabbstart för att komma igång.

Den här guiden förutsätter att du har installerat Node.js och npm. Se instruktioner från posten webbserverprogrammering.

Code mapp

Jag tycker det är “bäst” och enklast att ha en mapp för all kod. Jag kallar den code och den ligger i hemmappen. För att komma till din hemmapp så kan du skriva cd i terminalen.

cd
mkdir code

Server setup

För att skapa en server kommer vi att skapa en mapp för projektet, detta för att samla allt på ett organiserat och strukturerat sätt. Att vi sparar allt i en mapp låter oss också använda mappen som en bas för ett Git repo.

Följande kommandon skapar mappen, initierar ett npm-projekt, installerar express och nodemon samt skapar en .gitignore fil.

cd
cd code
mkdir test-server
cd test-server
touch server.js
npm init -y
npm i express
npm i nodemon --save-dev
echo "node_modules" > .gitignore

ESM

ESM är en förkortning för ECMAScript Modules och är en del av ES6. Det är en standard för att importera och exportera moduler i JavaScript. Vi vill skriva server med ESM och inte CommonJS. Anledningen till att vi skriver server med ESM är för att det är den moderna standarden för att importera och exportera moduler i JavaScript. Vi framtidssäkrar vår kod med detta.
För att kunna köra koden med ESM i node, behöver vi ange att typen är en module i package.json. package.json är en fil som innehåller metadata om projektet och vilka paket projektet behöver för att köras.

Lägg till följande rad i package.json.

"type": "module",

För att starta servern behöver vi även skapa ett start script i package.json.

"scripts": {
    "dev": "nodemon server.js"
},

För att ha något att starta så lägger vi till följande kod i server.js.

console.log('Hello world');

Sedan startar vi server i terminalen med npm run dev. Om det fungerar så kommer du att se Hello world i terminalen.

Express

Se till att du kan starta filen med npm run dev innan du går vidare. Det är viktigt att du alltid kan starta och köra ditt projekt medans du arbetar.

Nu när vi har en server som startar så kan vi börja med att använda Express. Vi börjar med att importera Express och skapa en instans av det. Instansen behövs för att skapa routes och starta servern.

import express from 'express'

const app = express()

För att starta servern så behöver vi lyssna på en port. Vi kan använda app.listen för att göra detta.

const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`)
});

Om du startar servern nu så kommer du att se att den skriver meddelandet i terminalen, att den startat och körs på localhost:3000. Surfa nu till http://localhost:3000 i din webbläsare så kommer du att se att den inte svarar. Detta beror på att vi inte har någon route.

Routes

En route är en URL som servern svarar på. För att skapa en route så behöver vi en metod och en URL. Metoden för att svara på en GET request är app.get.

Redigera server.js och lägg till följande kod innan app.listen.

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

Om du startar servern nu och går till http://localhost:3000 så kommer du att se att den svarar med Hello world. res.send skickar en respons till klienten.

Templates med nunjucks

Templates används för att skapa dynamiskt innehåll på servern.
För att skapa templates så använder vi språket nunjucks. Ett template språk låter oss skapa html dynamisk på servern. Vi kan då använda oss av variabler och programmeringslogik för att anpassa och generera html för sidorna.

Vi börjar med att installera paketet nunjucks med npm.

npm i nunjucks

För att använda nunjucks så behöver vi konfigurera den. Konfigurationen gör du i server.js, lägg till detta efter raden const app = express(), det är viktigt eftersom nunjucks behöver en instans av express för att fungera.

import nunjucks from 'nunjucks'

...

nunjucks.configure('views', {
    autoescape: true,
    express: app
})

Vi skapar sedan en mapp views där vi lägger våra templates. Skapa mappen med följande kommando.

mkdir views

I mappen views skapar vi två filer index.njkoch layout.njk. I layout.njk skapar vi en grundstruktur för sidan.

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
</head>
<body>
  {% block content %}
  {% endblock %}
</body>
</html>

I index.njk skapar vi en enkel sida som använder layouten.

{% extends "layout.njk" %}

{% block content %}
  <h1>{{ title }}</h1>
  <p>{{ message }}</p>
{% endblock %}

I server.js så skapar vi en route som renderar index.njk. Detta gör vi genom att använda res.render. Render tar två argument, första är filnamnet på templaten och det andra är ett objekt med variabler som skickas till templaten.

app.get('/', (req, res) => {
    res.render('index.njk', {
        title: 'Hello world',
        message: 'This is a message'
    })
})

Om du startar servern nu och går till http://localhost:3000 så kommer du att se att den svarar med en html-sida.

Statiska filer

För att servern ska kunna skicka statiska filer såsom bilder, css och javascript så kan vi använda express.static. Vi kan använda express.static för att skapa en route som pekar på en mapp.

Vi skapar en mapp public där vi lägger våra statiska filer. Skapa mappen med följande kommando.

mkdir public

I mappen public skapar vi en mapp css och en fil style.css. I style.css skriver vi lite css.

body {
    font-family: sans-serif;
    font-size: 1.2rem;
}

I server.js så skapar vi en route som pekar på mappen public.

app.use(express.static('public'))

Om du startar servern nu och går till http://localhost:3000/css/style.css så kommer du att se att den svarar med css-filen.
Vi kan nu använda css-filen i våra templates, redigera layout.njk och lägg till följande rad i sidans <head>.

<link rel="stylesheet" href="/css/style.css">

Middleware

Middleware är funktioner som körs innan en route. Vi kan använda middleware för att logga information om en request.

app.use((req, res, next) => {
    console.log(`${req.method} ${req.url}`);
    next();
});

Vi kan även använda detta för att skapa en 404-sida. Lägg till följande kod efter alla routes.

app.use((req, res) => {
    res.status(404).send('404 - Not found')
});

Hela server.js

Den färdiga koden ser ut så här. Den förutsätter att du skapar views osv.

import express from 'express'
import nunjucks from 'nunjucks'

const app = express()

app.use(express.static('public'))

nunjucks.configure('views', {
    autoescape: true,
    express: app
})

app.get('/', (req, res) => {
    res.render('index.njk', {
        title: 'Hello world',
        message: 'This is a message'
    })
})

app.use((req, res) => {
    res.status(404).send('404 - Not found')
});

const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`)
})

Avslutning

Detta är en snabbstart för att komma igång med Node.js och Express. Det finns mycket mer att lära och utforska. Jag rekommenderar att du kollar in Express dokumentation och Nunjucks dokumentation för att lära dig mer.