En aquest tema, aprendrem a configurar una aplicació bàsica amb Express.js, un framework web minimalista per a Node.js que facilita la creació d'aplicacions web i APIs. Aquest mòdul inclou els següents passos:

  1. Instal·lació d'Express.js
  2. Creació d'un projecte bàsic
  3. Configuració del servidor
  4. Gestió de rutes bàsiques
  5. Execució de l'aplicació

  1. Instal·lació d'Express.js

Primer, necessitem instal·lar Express.js utilitzant npm (Node Package Manager). Assegura't de tenir Node.js i npm instal·lats al teu sistema.

npm install express --save

Aquest comandament instal·larà Express.js i l'afegirà a les dependències del teu projecte.

  1. Creació d'un Projecte Bàsic

Crea un directori per al teu projecte i inicialitza un nou projecte Node.js.

mkdir my-express-app
cd my-express-app
npm init -y

Aquestes comandes crearan un nou directori anomenat my-express-app i inicialitzaran un fitxer package.json amb la configuració bàsica del projecte.

  1. Configuració del Servidor

Crea un fitxer anomenat app.js al directori del teu projecte. Aquest fitxer serà el punt d'entrada de la teva aplicació.

// app.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hola, món!');
});

app.listen(port, () => {
  console.log(`Servidor escoltant a http://localhost:${port}`);
});

Explicació del Codi

  • Línia 1: Importem el mòdul express.
  • Línia 2: Creem una instància de l'aplicació Express.
  • Línia 3: Definim el port en el qual el servidor escoltarà.
  • Línia 5-7: Definim una ruta GET per a la ruta arrel (/) que respon amb el missatge "Hola, món!".
  • Línia 9-11: Iniciem el servidor i fem que escolti al port definit, mostrant un missatge a la consola quan el servidor està en funcionament.

  1. Gestió de Rutes Bàsiques

Afegim algunes rutes addicionals per veure com podem gestionar diferents camins en la nostra aplicació.

// app.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hola, món!');
});

app.get('/about', (req, res) => {
  res.send('Sobre nosaltres');
});

app.get('/contact', (req, res) => {
  res.send('Contacta amb nosaltres');
});

app.listen(port, () => {
  console.log(`Servidor escoltant a http://localhost:${port}`);
});

Explicació del Codi

  • Línia 9-11: Afegim una ruta GET per a /about que respon amb el missatge "Sobre nosaltres".
  • Línia 13-15: Afegim una ruta GET per a /contact que respon amb el missatge "Contacta amb nosaltres".

  1. Execució de l'Aplicació

Per executar la teva aplicació, utilitza el següent comandament:

node app.js

Si tot està configurat correctament, hauràs de veure el següent missatge a la consola:

Servidor escoltant a http://localhost:3000

Ara pots obrir el teu navegador i visitar http://localhost:3000 per veure la teva aplicació en funcionament.

Exercici Pràctic

Exercici

  1. Afegeix una nova ruta GET per a /services que respongui amb el missatge "Els nostres serveis".
  2. Afegeix una nova ruta GET per a /portfolio que respongui amb el missatge "El nostre portafoli".

Solució

// app.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hola, món!');
});

app.get('/about', (req, res) => {
  res.send('Sobre nosaltres');
});

app.get('/contact', (req, res) => {
  res.send('Contacta amb nosaltres');
});

app.get('/services', (req, res) => {
  res.send('Els nostres serveis');
});

app.get('/portfolio', (req, res) => {
  res.send('El nostre portafoli');
});

app.listen(port, () => {
  console.log(`Servidor escoltant a http://localhost:${port}`);
});

Conclusió

En aquesta secció, hem après a configurar una aplicació bàsica amb Express.js, incloent la instal·lació, creació del projecte, configuració del servidor i gestió de rutes bàsiques. Ara estàs preparat per aprofundir en temes més avançats d'Express.js i construir aplicacions web més complexes.

Curs de Node.js

Mòdul 1: Introducció a Node.js

Mòdul 2: Conceptes Bàsics

Mòdul 3: Sistema de Fitxers i I/O

Mòdul 4: HTTP i Servidors Web

Mòdul 5: NPM i Gestió de Paquets

Mòdul 6: Framework Express.js

Mòdul 7: Bases de Dades i ORMs

Mòdul 8: Autenticació i Autorització

Mòdul 9: Proves i Depuració

Mòdul 10: Temes Avançats

Mòdul 11: Desplegament i DevOps

Mòdul 12: Projectes del Món Real

© Copyright 2024. Tots els drets reservats