Express, le framework Node.js le plus utilisé au monde, permet aux développeurs de créer des serveurs web backend avec JavaScript. Ce cadre fournit la plupart des éléments dont les développeurs ont besoin dès le départ, en simplifiant le routage et la réponse aux requêtes web.

Nous avons déjà publié un guide sur tout ce que vous devez savoir sur Express.js. Cet article pratique vous montrera comment l’utiliser. Ce tutoriel explique comment créer et déployer un exemple d’application Node.js à l’aide d’Express.js.

Comment créer rapidement des applications avec Express.js

Cet article pratique montre comment créer une application web qui reçoit des requêtes vers un point de terminaison, utilise un paramètre de la requête pour appeler une base de données et renvoie les informations de la base de données sous forme de JSON.

Pré-requis

Pour suivre ce tutoriel, assurez-vous que les éléments suivants sont installés sur votre ordinateur :

  • Node.js et Node Package Manager (npm) – Environnement d’exécution essentiel et gestionnaire de paquets pour JavaScript.
  • Git – Système de contrôle de version distribué facilitant le développement collaboratif de logiciels.

Générateur d’applications Express

Vous pouvez ajouter Express à des applications Node existantes en suivant la procédure décrite dans notre guide Express.js, mais si vous partez de zéro, il existe une option encore plus rapide : le générateur Express.

Le générateur Express officiel d’Express.js est un paquetage Node qui vous permet de générer un nouveau squelette d’application. Pour ce faire, créez d’abord un dossier pour votre application, puis exécutez la commande npx (disponible dans Node.js 8.2.0) :

mkdir express-application
npx express-generator

Lorsque la génération est réussie, le terminal affiche une liste des dossiers/fichiers créés et des commandes pour l’installation des dépendances et l’exécution de l’application. Installez les dépendances en exécutant la commande ci-dessous :

npm install

Lancez ensuite votre serveur web :

DEBUG=myapp:* npm start

L’application squelette comporte une route d’index pré-construite qui affiche une page d’accueil de base. Vous pouvez la visualiser dans votre navigateur à l’adresse localhost:3000.

Exploration de l’application squelette Express

Lorsque vous ouvrez votre application Express dans l’éditeur de code de votre choix, vous trouvez une structure de base qui constitue l’ossature de votre application web.

/
|-- /node_modules
|-- /public
|-- /routes
    |-- index.js
    |-- users.js
|-- /views
    |-- error.jade
    |-- index.jade
    |-- layout.jade
|-- app.js
|-- package.json
  • node_modules : Ce répertoire contient toutes les dépendances et bibliothèques installées pour le projet.
  • public : Contient des ressources statiques telles que CSS, JavaScript, images, etc. Ces fichiers sont servis directement au navigateur du client.
  • routes : Contient les fichiers responsables de la définition des différentes routes et de la gestion des requêtes provenant de différentes URL.
  • vues : Contient les modèles ou les vues que le serveur rend pour créer l’interface utilisateur. Ici, error.jade, index.jade et layout.jade sont des modèles écrits dans le langage de création de modèles Jade. Ils aident à structurer et à rendre le contenu dynamique aux utilisateurs.
  • app.js : Ce fichier sert généralement de point d’entrée pour l’application Express. C’est là que le serveur est configuré, que le middleware est mis en place, que les routes sont définies et que les requêtes et les réponses sont gérées.
  • package.json : Ce fichier contient des métadonnées sur l’application. Il permet de gérer les dépendances et la configuration du projet.

Comprendre la gestion des routes

Dans votre application Express, le répertoire routes est l’endroit où les routes sont définies en tant que fichiers distincts. La route principale, souvent appelée route d’index, se trouve dans le fichier routes/index.js.

Cette route index traite une requête GET et répond par une page web générée en HTML par le framework. Vous trouverez ci-dessous un extrait de code illustrant la manière dont une requête GET est traitée pour générer une page de bienvenue de base :

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
 res.render('index', { title: 'Express' });
});

module.exports = router;

Si vous modifiez la fonction res.render() en res.send()le type de réponse passe de HTML à JSON :

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.send({ key: 'value' });
});

module.exports = router;

Pour étendre les capacités, une autre route est ajoutée au même fichier, introduisant un nouveau point de terminaison qui accepte un paramètre. Cet extrait de code montre comment votre application peut gérer le trafic sur un point de terminaison différent, extraire un paramètre et répondre avec sa valeur en JSON :

/* GET a new resource */
router.get('/newEndpoint', function(req, res, next) {
  res.send({ yourParam: req.query.someParam });
});

L’envoi d’une requête GET à localhost:3000/newEndpoint?someParam=whatever produira une sortie JSON contenant la chaîne « whatever ».

Une requête GET est envoyée à l'application locale en cours d'exécution dans Postman.
Une requête GET est envoyée à l’application locale en cours d’exécution dans Postman.

Hébergement d’applications Kinsta et Express

Faire des requêtes web de votre ordinateur à votre ordinateur, c’est bien, mais le développement web n’est pas terminé tant que vous n’avez pas quitté l’hôte local. Heureusement, Kinsta facilite le déploiement d’applications sur le web, même si vous avez besoin d’une base de données.

Nous allons maintenant nous pencher sur l’extension des capacités de votre application en intégrant des fonctionnalités de base de données et en déployant à la fois l’application et la base de données sur le web, ce qui permet d’y accéder depuis n’importe quel ordinateur.

Avant de déployer votre application Express sur l’hébergement d’applications Kinsta, il est essentiel de pousser le code et les fichiers de votre application vers le fournisseur Git de votre choix (Bitbucket, GitHub ou GitLab). Assurez-vous de créer un fichier .gitignore dans le répertoire racine de votre application et d’inclure node_modules pour empêcher le transfert de ces fichiers vers votre fournisseur Git.

Une fois votre dépôt défini, suivez les étapes suivantes pour déployer votre application Express sur Kinsta :

  1. Connectez-vous ou créez un compte pour afficher votre tableau de bord MyKinsta.
  2. Autorisez Kinsta avec votre fournisseur Git.
  3. Cliquez sur Applications dans la barre latérale gauche, puis sur Ajouter une application.
  4. Sélectionnez le dépôt et la branche à partir desquels vous souhaitez déployer l’application.
  5. Attribuez un nom unique à votre application et choisissez l’emplacement du centre de données.
  6. Configurez ensuite votre environnement de construction. Sélectionnez la configuration Machine de construction standard avec l’option Nixpacks recommandée pour cette démo.
  7. Utilisez toutes les configurations par défaut, puis cliquez sur Créer une application.

Kinsta fonctionne avec le générateur d’applications Express dès le départ ! Une fois que vous avez terminé ces étapes, votre application commencera automatiquement le processus de construction et de déploiement.

L’écran de déploiement fournira une URL où Kinsta déploie votre application. Vous pouvez ajouter /newEndpoint?someParam=whatever pour tester le point de terminaison construit dans la section précédente de cet article.

Comment ajouter une base de données à l’application Express

Pour la plupart des applications de production, il est essentiel d’avoir une base de données. Heureusement, Kinsta simplifie ce processus en fournissant des services de base de données entièrement infogérés qui sont incroyablement faciles à mettre en place.

Voici comment créer une base de données sur Kinsta :

  1. Accédez à la section Bases de données dans la barre latérale du tableau de bord de MyKinsta.
  2. Cliquez sur Créer une base de données. Configurez les détails de votre base de données en saisissant un nom et en sélectionnant le type de base de données.
  3. Sélectionnez l’option PostgreSQL. Un nom d’utilisateur et un mot de passe pour la base de données sont automatiquement générés :

    L'étape de configuration de la base de données MyKinsta qui consiste à ajouter une nouvelle base de données.
    L’étape de configuration de la base de données MyKinsta qui consiste à ajouter une nouvelle base de données.

  4. Sélectionnez l’emplacement du centre de données où vous avez hébergé votre application Express et configurez la taille souhaitée.
  5. Confirmez les informations de paiement et cliquez sur Créer une base de données.

Une fois la base de données créée avec succès :

  1. Accédez aux détails de la base de données en cliquant dessus. Dans la page Vue globale, accédez à la section Connexions internes.
  2. Sélectionnez l’application appropriée.
  3. Cochez l’option Ajouter des variables d’environnement à l’application.
  4. Cliquez sur Ajouter une connexion pour relier la base de données nouvellement créée à votre application.

Ensuite, copiez la chaîne de connexion de la base de données nouvellement créée pour vous y connecter à l’aide d’un outil de base de données. N’importe quel outil de connexion SQL suffira, mais cette démonstration utilise Beekeeper. Ouvrez l’application et cliquez sur Importer depuis une URL, collez la chaîne de connexion et cliquez sur Import. Cela vous permettra d’exécuter SQL sur la base de données hébergée par Kinsta que vous venez de créer.

Ensuite, créez une table élémentaire avec une seule entrée en exécutant quelques instructions SQL sur la base de données hébergée avec votre outil de base de données :

CREATE TABLE "States"
( id integer CONSTRAINT states_pk PRIMARY KEY,
  state_name varchar(100),
  capital varchar(100),
  state_bird varchar(100),
  "createdAt" TIMESTAMPTZ NOT NULL DEFAULT NOW(),
  "updatedAt" TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

INSERT INTO "States"
VALUES(1, 'ohio', 'columbus', 'cardinal');

Ajoutez les paquets de base de données suivants à votre projet :

npm install sequelize pg

La dépendance sequelize est un ORM pour Node.js, et pg sert de client PostgreSQL, permettant l’interaction entre les applications Node.js et les bases de données PostgreSQL.

Ensuite, écrivez le code de l’application qui accepte une requête GET avec un paramètre id et renvoie les informations dans la base de données associée à ce id. Pour cela, modifiez votre fichier index.js en conséquence :

var express = require('express');
var router = express.Router();
const { Sequelize, DataTypes } = require('sequelize');
const sequelize = new Sequelize(process.env.CONNECTION_URI, {
  dialect: 'postgres',
  protocol: 'postgres',
});

const State = sequelize.define('State', {
  // Model attributes are defined here
  state_name: {
  type: DataTypes.STRING,
  allowNull: true,
  unique: false
  },
  capital: {
  type: DataTypes.STRING,
  allowNull: true,
  unique: false
  },
  state_bird: {
  type: DataTypes.STRING,
  allowNull: true,
  unique: false
  },
}, {
  // Other model options go here
});

async function connectToDB() {
  try {
  sequelize.authenticate().then(async () => {
  // await State.sync({ alter: true });
  })
  console.log('Connection has been established successfully.');
  } catch (error) {
  console.error('Unable to connect to the database:', error);
  }
}
connectToDB();

/* GET a new resource */
router.get('/state', async function(req, res, next) {
  const state = await State.findByPk(req.query.id);
  if (state) {
   res.send(state)
  } else {
   res.status(404).send("state not found");
  }
});


/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

/* GET a new resource */
router.get('/newEndpoint', function(req, res, next) {
  res.send({ yourParam: req.query.someParam });
});

module.exports = router;

Validez les modifications du code et poussez-les dans votre dépôt Git. Ensuite, procédez à un redéploiement manuel sur Kinsta ou attendez le déploiement automatique.

Maintenant, lorsque vous interrogez le point de terminaison /states avec id=1, vous recevrez un état de la base de données.

Une requête GET vers l'application entièrement fonctionnelle hébergée sur MyKinsta.
Une requête GET vers l’application entièrement fonctionnelle hébergée sur MyKinsta.

C’est tout ce qu’il y a à faire ! Vous pouvez consulter le code complet du projet sur GitHub.

Résumé

Cet article a montré comment le framework Express permet de créer et de déployer une application Node.js rapidement et facilement. Vous pouvez créer une nouvelle application avec le générateur Express en quelques étapes simples. Avec l’hébergement d’applications Kinsta, le déploiement de l’application est rationalisé et nécessite une configuration minimale.

La puissance et la facilité d’utilisation du framework Express pour le développement d’applications Node.js sont significatives. Avec Kinsta, vous pouvez profiter de l’élan qu’Express et Node.js vous donnent dans la phase de déploiement de votre projet sans perdre de temps avec la configuration.

Que pensez-vous du générateur d’applications Express ? L’avez-vous déjà utilisé pour développer des applications ? N’hésitez pas à partager vos expériences dans les commentaires ci-dessous !

Jeremy Holcombe Kinsta

Rédacteur en chef du contenu et du marketing chez Kinsta, développeur web WordPress et rédacteur de contenu. En dehors de WordPress, j'aime la plage, le golf et le cinéma. J'ai aussi des problèmes avec les personnes de grande taille ;).