Hoe te beginnen met Node.js en Express

Handleidingen

Introductie

Express is een webapplicatieframework voor Node.js waarmee je robuuste API’s en webservers veel eenvoudiger en schoner kunt opzetten. Het is een lichtgewicht pakket dat de kernfuncties van Node.js niet verbergt.

In dit artikel ga je Express installeren en gebruiken om een ​​webserver te bouwen.

Vereisten

Als je dit artikel wilt volgen, heb je het volgende nodig:

Deze tutorial is geverifieerd met Node v15.14.0, npm v7.10.0, express v4.17.1, en serve-index v1.9.1.

Stap 1 – Het project instellen

Open eerst je terminalvenster en maak een nieuwe projectdirectory aan:

  1. mkdir express-example

Navigeer vervolgens naar de zojuist aangemaakte directory:

  1. cd express-example

Op dit punt kun je een nieuw npm-project initialiseren:

  1. npm init -y

Vervolgens moet je het express-pakket installeren:

  1. npm install express@4.17.1

Op dit punt heb je een nieuw project klaar om Express te gebruiken.

Stap 2 – Het maken van een Express-server

Nu Express is geïnstalleerd, maak een nieuw server.js bestand aan en open het met je code-editor. Voeg vervolgens de volgende regels code toe:

server.js
const express = require('express');

const app = express();

De eerste regel hier haalt de hoofd-Expressmodule op uit het pakket dat je hebt geïnstalleerd. Deze module is een functie, die we vervolgens uitvoeren op de tweede regel om onze app variabele te maken. Je kunt op deze manier meerdere apps maken, elk met zijn eigen verzoeken en reacties.

server.js
const express = require('express');

const app = express();

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

Deze regels code zijn waar we onze Express-server vertellen hoe een GET-verzoek naar onze server moet worden afgehandeld. Express bevat vergelijkbare functies voor POST, PUT, enz. met app.post(...), app.put(...), enz.

Deze functies nemen twee hoofdparameters. De eerste is de URL waarop deze functie moet worden uitgevoerd. In dit geval richten we ons op '/', wat de root van onze website is: in dit geval localhost:3000.

De tweede parameter is een functie met twee argumenten: req en res. req vertegenwoordigt het verzoek dat naar de server is gestuurd; we kunnen dit object gebruiken om gegevens te lezen over wat de client wil doen. res vertegenwoordigt de respons die we terugsturen naar de client.

Hier roepen we een functie aan op res om een respons terug te sturen: 'Succesvolle respons.'.

server.js
const express = require('express');

const app = express();

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

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Eindelijk, zodra we onze verzoeken hebben ingesteld, moeten we onze server starten! We geven 3000 door aan de listen-functie, die de app vertelt op welke poort te luisteren. De functie die als tweede parameter wordt doorgegeven is optioneel en wordt uitgevoerd wanneer de server start. Dit geeft ons wat feedback in de console om te weten dat onze applicatie draait.

Keer terug naar je terminalvenster en start je applicatie:

  1. node server.js

Bezoek vervolgens localhost:3000 in je webbrowser. Je browservenster zal weergeven: 'Succesvol antwoord'. Je terminalvenster zal weergeven: 'Voorbeeldapp luistert op poort 3000.'.

En daar hebben we het, een webserver! Echter, we willen zeker meer dan slechts één regel tekst terugsturen naar de client. Laten we kort bespreken wat middleware is en hoe deze server kan worden ingesteld als een server voor statische bestanden!

Stap 3 — Gebruik van Middleware

Met Express kunnen we middleware-functies schrijven en gebruiken, die toegang hebben tot alle HTTP-verzoeken die naar de server komen. Deze functies kunnen:

  • Elke code uitvoeren.
  • Wijzigingen aanbrengen in de verzoek- en responsobjecten.
  • De verzoek-responscyclus beëindigen.
  • De volgende middlewarefunctie in de stack aanroepen.

We kunnen onze eigen middlewarefuncties schrijven of third-party middleware gebruiken door ze op dezelfde manier te importeren als we met andere pakketten zouden doen.

Laten we beginnen met het schrijven van onze eigen middleware, en daarna zullen we proberen enkele bestaande middleware te gebruiken om statische bestanden te serveren.

Om een middleware-functie te definiëren, roepen we app.use() aan en geven het een functie door. Hier is een eenvoudige middleware-functie om de huidige tijd in de console af te drukken tijdens elke aanvraag:

server.js
const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

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

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

De oproep naar next() vertelt de middleware om naar de volgende middleware-functie te gaan als die er is. Het is belangrijk om deze aan het einde van onze functie op te nemen – anders blijft de aanvraag hangen bij deze middleware.

We kunnen optioneel een pad doorgeven aan de middleware, die alleen verzoeken naar die route zal afhandelen. Bijvoorbeeld:

server.js
const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

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

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Door '/request-type' als het eerste argument door te geven aan app.use(), zal deze functie alleen worden uitgevoerd voor verzoeken die naar localhost:3000/request-type zijn gestuurd.

Open opnieuw je terminalvenster en voer je applicatie uit:

  1. node server.js

Vervolgens, bezoek localhost:3000/request-type in je webbrowser. Je terminalvenster zal de tijdstempel van het verzoek en 'Request type: GET' weergeven.

Nu gaan we proberen om bestaande middleware te gebruiken om statische bestanden te serveren. Express wordt geleverd met een ingebouwde middleware-functie: express.static. We zullen ook een externe middleware-functie, serve-index, gebruiken om een indexlijst van onze bestanden weer te geven.

Ten eerste, binnen dezelfde map waar de express-server zich bevindt, maak een map genaamd public en plaats daar enkele bestanden in.

Vervolgens, installeer het pakket serve-index:

  1. npm install serve-index@1.9.1

Ten eerste, importeer het serve-index pakket bovenaan het serverbestand.

Vervolgens, voeg de express.static en serveIndex middlewares toe en geef ze het pad aan waarvan toegang moet worden verkregen en de naam van de directory:

server.js
const express = require('express');
const serveIndex = require('serve-index');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.use('/public', express.static('public'));
app.use('/public', serveIndex('public'));

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

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Herstart nu je server en ga naar localhost:3000/public. Je krijgt een lijst te zien van al je bestanden!

Conclusie

In dit artikel heb je Express geïnstalleerd en gebruikt om een webserver te bouwen. Je hebt ook ingebouwde en externe middleware-functies gebruikt.

Ga verder met leren met Hoe je het req-object in Express gebruikt, Hoe je het res-object in Express gebruikt, en Hoe je routes en HTTP-verzoekmethoden definieert in Express.

Source:
https://www.digitalocean.com/community/tutorials/nodejs-express-basics