Wat is Express.js en hoe begin je ermee?

Als je nog niet weet wat een framework precies is of hoe frontend, backend en full-stack verschillen, lees dan eerst de pagina met de populairste frameworks. Hier begin je direct met Express.js. Dat is een van de meest gebruikte backend frameworks. Het helpt je een server bouwen met JavaScript. De server is het deel van je site dat op een computer draait die je bezoeker nooit ziet. In deze pagina leer je hoe je een eerste server start en welke begrippen je nodig hebt.

Waarom kies je voor Express?

Express is gemaakt voor Node.js. Node.js laat JavaScript draaien buiten de browser, op een server. Express verscheen in 2010 en is sindsdien het standaardframework voor Node.js. Het is klein en minimalistisch. Je krijgt de basis en bouwt zelf de rest.

Denk aan een lege werkplaats met goed gereedschap. Express levert je de tafel, de gereedschapskist en een paar handige stellingen. Hoe je alles inricht, bepaal je zelf. Dat geeft veel vrijheid, maar het vraagt ook een beetje zelfstandigheid.

Wat is een server?

Een server is een computer die altijd aan staat en wacht op verzoeken. Als de browser een adres opvraagt, stuurt de server een antwoord terug. Denk aan de keuken van een restaurant. De gast ziet alleen de eetzaal, maar in de keuken gebeurt het echte werk.

Express schrijf je in JavaScript. Je werkt dus met dezelfde taal aan de voorkant en aan de achterkant van je site. Dat maakt de leercurve vriendelijker.

Hoe zet je een eerste Express-project op?

Eerst heb je Node.js nodig. Installeer het via de officiële Node.js-website. Daarna maak je een nieuwe map aan en installeer je Express:

Terminal

mkdir my-api
cd my-api
npm init -y
npm install express

Wat doen deze commando's?

• mkdir my-api maakt een nieuwe map.
• cd my-api zet je in die map.
• npm init -y maakt een bestand package.json. Daarin staat wat je project nodig heeft.
• npm install express downloadt het Express-pakket en zet het in je project.

Meer uitleg over de opties vind je in de officiële Express-documentatie.

Hoe ziet een Express-project eruit?

Een klein Express-project bevat vaak deze bestanden:

my-api/
  index.js            ← het startpunt van je server
  package.json        ← de lijst met je project en pakketten
  node_modules/       ← de gedownloade pakketten (maak je niet zelf)

De map node_modules wordt groot. Je hoeft er niets in aan te passen. npm beheert die map voor je.

Een kort voorbeeld

Maak het bestand index.js aan met deze code:

index.js

const express = require('express')

const app = express()
const port = 3000

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

app.get('/api/users', (req, res) => {
    res.json([
        { id: 1, name: 'Anna' },
        { id: 2, name: 'Boris' },
    ])
})

app.listen(port, () => {
    console.log(`Server draait op http://localhost:${port}`)
})

Wat gebeurt hier?

• require('express') haalt het Express-pakket op.
• app is je server. Je voegt er routes aan toe.
• app.get('/', ...) vertelt de server wat te doen als iemand het adres / opvraagt.
• req (request) is het verzoek van de bezoeker. res (response) is het antwoord dat je terugstuurt.
• res.json(...) stuurt data terug in een formaat dat andere programma's makkelijk lezen.
• app.listen(port) start de server op poort 3000. Een poort is als een deur met een nummer. De server luistert daar naar verzoeken.

Start de server met:

Terminal

node index.js

Open daarna http://localhost:3000 in je browser. Je ziet de tekst "Hallo, wereld!". Ga naar http://localhost:3000/api/users en je ziet een lijst met namen in JSON-formaat. JSON is een tekstformaat dat lijkt op een lijst met sleutels en waarden.

Stop de server

Druk in je terminal op Ctrl + C om de server te stoppen. Start hem daarna opnieuw met node index.js als je iets hebt aangepast.

Welke kernbegrippen moet je kennen in Express?

Een paar begrippen zijn genoeg om al veel te bouwen:

• Routes bepalen welke actie er gebeurt bij een adres. app.get('/') reageert op het startadres.
• Requests zijn de verzoeken van de bezoeker. Ze bevatten bijvoorbeeld een adres of gegevens uit een formulier.
• Responses zijn de antwoorden van de server. Met res.send() stuur je tekst, met res.json() stuur je data.
• Middleware zijn tussenstappen die elk verzoek passeert, zoals een controle of het verzoek klopt. Denk aan een portier bij de ingang van een club.
• HTTP-methoden zoals GET, POST, PUT en DELETE geven aan wat de bezoeker wil doen. Met GET haal je iets op. Met POST stuur je iets naar de server.

Wil je deze onderdelen verder uitzoeken? De officiële Express-gids legt routes en middleware uitgebreid uit.

Wanneer kies je voor Express?

• Je wil maximale vrijheid en zelf kiezen welke onderdelen je gebruikt.
• Je bouwt een API: een koppelvlak waarmee andere programma's of een frontend gegevens ophalen. Een website in React of Vue kan bijvoorbeeld data halen bij een Express-server.
• Je team kent al JavaScript en wil dezelfde taal aan de voor- en achterkant gebruiken.
• Je wil een klein of middelgroot project snel opzetten.

Heb je liever een framework dat meer voor je regelt? Dan zijn Laravel (PHP) en Django (Python) goede alternatieven. Die komen met veel ingebouwde functies, zoals een beheerpaneel en een databasekoppeling. Express is juist klein en vrij.

Veelgemaakte fout

Zorg dat elke route eindigt met een antwoord. Als een route nooit res.send() of res.json() aanroept, wacht de bezoeker tot de browser er een time-out op zet.

Wat leer je hierna?

Je hebt nu een werkende server gebouwd die tekst en data teruggeeft. Probeer eens een route toe te voegen die een begroeting geeft met een naam uit het adres. Daarna is het slim om te kijken hoe een frontend data bij jouw server ophaalt. Lees dan de React-pagina of de Vue-pagina om te zien hoe een pagina met een API praat.

Je bouwt nu aan de achterkant van een echte website. Dat is een grote stap. Ga zo door!