AnnoncePrésentation de MongoDB 8.0, la plus rapide des MongoDB ! En savoir plus >

AnnonceVoyage AI rejoint MongoDB pour développer des applications d'IA plus précises et plus fiables sur Atlas. En savoir plus >

Comment utiliser la pile MERN : guide complet

Vous aurez besoin d’un accès à une base de données MongoDB Atlas pour ce tutoriel. Si vous n’avez pas de compte, vous pouvez vous inscrire gratuitement pour suivre le tutoriel.

Commencez gratuitement

Ce tutoriel montre comment construire une application MERN full-stack - ici, une base de données d’employés - avec les outils disponibles les plus récents. Avant de commencer, vous devez connaître les bases de Node.js et de React.js. Vous aurez également besoin d’accéder à la base de données MongoDB Atlas pour ce tutoriel. Le code complet est disponible dans le dépôt GitHub.

Sommaire

Qu’est-ce que la pile MERN ?
Configuration du projet
Connexion à MongoDB Atlas
Configuration de l’application React
Configuration du routeur React
Connexion du front end au back end

Qu’est-ce que la pile MERN ?

La pile MERN est un framework de développement Web composé de MongoDB, Express, React.js et Node.js. C’est l’une des nombreuses variantes de la pile MEAN.

Lorsque vous utilisez la pile MERN, vous travaillez avec React pour implémenter la couche de présentation, Express et Node.js pour créer la couche intermédiaire ou applicative, et MongoDB pour créer la couche de base de données.

Dans ce tutoriel sur la pile MERN, nous utiliserons ces quatre technologies pour développer une application de base capable d’enregistrer les informations des employés et de les afficher à l’aide de l’interface React.

Comment démarrer avec la pile MERN

Pour commencer, vous devrez faire ce qui suit :

Installer Node.js

Installez Node.js en téléchargeant soit la version LTS, soit la version actuelle.
Remarque : La version utilisée dans ce tutoriel est la v20.11.0

Installez un éditeur de code si vous n’en avez pas

Vous pouvez utiliser l’éditeur de code de votre choix pour ce tutoriel. Cependant, pour les besoins de cette démonstration, nous utiliserons Visual Studio Code.

Illustration représentant un tutoriel vidéo.

Si vous êtes un apprenant visuel, consultez la version vidéo de ce tutoriel.

Configuration du projet

(N’hésitez pas à coder avec nous ou à télécharger le code complet depuis le dépôt GitHub.)

MERN nous permet de créer des solutions full-stack. Pour exploiter tout son potentiel, nous allons donc créer un projet de pile MERN. Pour ce projet, nous créerons à la fois un back end et une interface. L’interface sera implémentée avec React et le back end sera implémenté avec MongoDB, Node.js et Express. Nous appellerons le client d’interface et le server back end.

Commençons par créer un répertoire vide : mern. Ce dossier contiendra nos dossiers client et serveur.

Code Snippet

Ensuite, créez un dossier pour le back end et nommez-le « server ». Nous allons initialiser le fichier package.json en utilisant npm init.

Code Snippet

Afin d’utiliser les modules ECMAScript, le format standard officiellement pris en charge pour empaqueter du code JavaScript à des fins de réutilisation, nous allons ajouter une ligne au fichier package.json.

Code Snippet

Nous installerons également les dépendances.

Code Snippet

La commande ci-dessus installe trois packages différents :

mongodb : le pilote de base de données MongoDB qui permet à vos applications Node.js de se connecter à la base de données et de travailler avec les données
express : le framework Web pour Node.js (cela nous facilitera la tâche)
cors : un package Node.js qui permet le partage de ressources entre origines

Nous pouvons vérifier les dépendances installées dans le fichier package.json. Celui-ci doit lister les packages et leurs versions.

Après avoir vérifié que les dépendances ont été correctement installées, nous créons un fichier appelé server.js avec le code suivant :

mern/server/server.js

Code Snippet

Ici, nous importons express et cors à utiliser. const port = process.env.PORT permet d’accéder à la variable port du fichier config.env que nous allons créer.

Connexion à MongoDB Atlas

Il est temps de connecter notre serveur à la base de données. Nous utiliserons MongoDB Atlas comme base de données. MongoDB Atlas est un service de base de données basé sur le cloud qui offre une sécurité et une fiabilité des données robustes. MongoDB Atlas propose un cluster gratuit qui n’expire jamais et qui vous permet d’accéder à un sous-ensemble de caractéristiques et de fonctionnalités d’Atlas.

Suivez le guide Démarrer avec Atlas pour créer un compte, déployer votre premier cluster et localiser la chaîne de connexion de votre cluster.

Maintenant que vous avez la chaîne de connexion, revenez au répertoire du serveur et créez un fichier « config.env ». Là, attribuez la chaîne de connexion à une nouvelle variable ATLAS_URI. Une fois terminé, votre fichier devrait ressembler à celui ci-dessous. Remplacez < username >, < password >, < clusterName >, et < projectId > par le nom d’utilisateur, le mot de passe, le nom du cluster et l’ID du projet de votre base de données.

mern/server/config.env

Code Snippet

Créez un dossier sous le répertoire du serveur nommé db et, à l’intérieur de celui-ci, un fichier nommé connection.js. Nous pouvons y ajouter le code suivant pour nous connecter à notre base de données :

mern/server/db/connection.js

Code Snippet

Points de terminaison de l’API serveur

Nous avons terminé la configuration de la base de données et du serveur. Passons maintenant aux points de terminaison de l’API. Commençons par créer un dossier routes et ajoutons le fichier record.js. Revenez à votre répertoire « server » et créez le nouveau répertoire et le nouveau fichier :

Code Snippet

Le fichier routes/record.js contiendra également les lignes de code suivantes :

mern/server/routes/record.js

Code Snippet

import express from "express";

// This will help us connect to the database
import db from "../db/connection.js";

// This help convert the id from string to ObjectId for the _id.
import { ObjectId } from "mongodb";

// router is an instance of the express router.
// We use it to define our routes.
// The router will be added as a middleware and will take control of requests starting with path /record.
const router = express.Router();

// This section will help you get a list of all the records.
router.get("/", async (req, res) => {
  let collection = await db.collection("records");
  let results = await collection.find({}).toArray();
  res.send(results).status(200);
});

// This section will help you get a single record by id
router.get("/:id", async (req, res) => {
  let collection = await db.collection("records");
  let query = { _id: new ObjectId(req.params.id) };
  let result = await collection.findOne(query);

if (!result) res.send("Not found").status(404);
  else res.send(result).status(200);
});

// This section will help you create a new record.
router.post("/", async (req, res) => {
  try {
    let newDocument = {
      name: req.body.name,
      position: req.body.position,
      level: req.body.level,
    };
    let collection = await db.collection("records");
    let result = await collection.insertOne(newDocument);
    res.send(result).status(204);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error adding record");
  }
});

// This section will help you update a record by id.
router.patch("/:id", async (req, res) => {
  try {
    const query = { _id: new ObjectId(req.params.id) };
    const updates = {
      $set: {
        name: req.body.name,
        position: req.body.position,
        level: req.body.level,
      },
    };

let collection = await db.collection("records");
    let result = await collection.updateOne(query, updates);
    res.send(result).status(200);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error updating record");
  }
});

// This section will help you delete a record
router.delete("/:id", async (req, res) => {
  try {
    const query = { _id: new ObjectId(req.params.id) };

const collection = db.collection("records");
    let result = await collection.deleteOne(query);

res.send(result).status(200);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error deleting record");
  }
});

export default router;

Si vous exécutez l’application à ce stade, vous obtiendrez le message suivant dans votre terminal lorsque la connexion sera établie. Notez que nous utilisons la fonctionnalité de variable d’environnement intégrée dans les dernières versions de Node.js.

Code Snippet

C’est tout pour le back end. Passons maintenant au front end.

Configuration de l’application React

Pour cette partie, nous utiliserons Vite, une manière moderne de créer une application React. Dans un nouveau terminal dans le répertoire mern, configurons ceci :

Code Snippet

Pour notre projet, nous allons utiliser quelques dépendances supplémentaires. Nous commencerons par Tailwind CSS.

Code Snippet

Ensuite, nous allons modifier le champ de contenu dans le fichier tailwind.config.js.

Code Snippet

Dans le fichier src/index.css, nous devons ajouter les directives Tailwind et supprimer tout le reste.

Code Snippet

Enfin, nous allons installer react-router-dom.

Code Snippet

Tailwind est un framework CSS utilitaire qui vous permet d’ajouter des styles CSS en utilisant des noms de classes prédéfinis. Et React Router ajoute le routage de page côté client à React !

Configuration du routeur React

Dans src/main.jsx, nous allons ajouter le code suivant :

mern/client/src/main.jsx

Code Snippet

Nous avons configuré les routes de notre page d’application dans la variable router et utilisé RouterProvider pour synchroniser notre UI avec l’URL. RouterProvider permet des transitions fluides lors du passage d’un composant à l’autre. En fait, il ne rechargera ou n’actualisera que le composant qui doit être modifié au lieu d’actualiser ou de recharger la page entière. Bien que React Router ne soit pas une nécessité, il est important si vous voulez que votre application soit réactive.

Création des composants

Créons maintenant les composants que nous avons définis dans nos routes. Créez un dossier components dans le dossier src. Pour chaque composant que nous créons, nous ajouterons un nouveau fichier .js dans le dossier components. Dans ce cas, nous allons ajouter Navbar.jsx, RecordList.jsx et ModifyRecord.jsx.

Code Snippet

Chaque fichier doit ressembler à ce que montrent les instantanés ci-dessous.

Navbar.jsx

Dans le composant navbar.js, nous allons créer une barre de navigation qui nous reliera aux composants requis à l’aide du code suivant.

mern/client/src/components/Navbar.jsx

Code Snippet

RecordList.jsx

Le code suivant servira de composant de visualisation pour nos enregistrements. Il récupérera tous les enregistrements de notre base de données via une méthode GET.

mern/client/src/components/RecordList.jsx

Code Snippet

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const Record = (props) => (
  <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.name}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.position}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.level}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      <div className="flex gap-2">
        <Link
          className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 h-9 rounded-md px-3"
          to={`/edit/${props.record._id}`}
        >
          Edit
        </Link>
        <button
          className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 hover:text-accent-foreground h-9 rounded-md px-3"
          color="red"
          type="button"
          onClick={() => {
            props.deleteRecord(props.record._id);
          }}
        >
          Delete
        </button>
      </div>
    </td>
  </tr>
);

export default function RecordList() {
  const [records, setRecords] = useState([]);

// This method fetches the records from the database.
  useEffect(() => {
    async function getRecords() {
      const response = await fetch(`http://localhost:5050/record/`);
      if (!response.ok) {
        const message = `An error occurred: ${response.statusText}`;
        console.error(message);
        return;
      }
      const records = await response.json();
      setRecords(records);
    }
    getRecords();
    return;
  }, [records.length]);

// This method will delete a record
  async function deleteRecord(id) {
    await fetch(`http://localhost:5050/record/${id}`, {
      method: "DELETE",
    });
    const newRecords = records.filter((el) => el._id !== id);
    setRecords(newRecords);
  }

// This method will map out the records on the table
  function recordList() {
    return records.map((record) => {
      return (
        <Record
          record={record}
          deleteRecord={() => deleteRecord(record._id)}
          key={record._id}
        />
      );
    });
  }

// This following section will display the table with the records of individuals.
  return (
    <>
      <h3 className="text-lg font-semibold p-4">Employee Records</h3>
      <div className="border rounded-lg overflow-hidden">
        <div className="relative w-full overflow-auto">
          <table className="w-full caption-bottom text-sm">
            <thead className="[&_tr]:border-b">
              <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Name
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Position
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Level
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Action
                </th>
              </tr>
            </thead>
            <tbody className="[&_tr:last-child]:border-0">
              {recordList()}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

Record.jsx

Le code suivant servira de composant de formulaire pour créer ou mettre à jour des enregistrements. Ce composant enverra une commande de création ou de mise à jour à notre serveur.

mern/client/src/components/Record.jsx*

Code Snippet

import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";

export default function Record() {
  const [form, setForm] = useState({
    name: "",
    position: "",
    level: "",
  });
  const [isNew, setIsNew] = useState(true);
  const params = useParams();
  const navigate = useNavigate();

useEffect(() => {
    async function fetchData() {
      const id = params.id?.toString() || undefined;
      if(!id) return;
      setIsNew(false);
      const response = await fetch(
        `http://localhost:5050/record/${params.id.toString()}`
      );
      if (!response.ok) {
        const message = `An error has occurred: ${response.statusText}`;
        console.error(message);
        return;
      }
      const record = await response.json();
      if (!record) {
        console.warn(`Record with id ${id} not found`);
        navigate("/");
        return;
      }
      setForm(record);
    }
    fetchData();
    return;
  }, [params.id, navigate]);

// These methods will update the state properties.
  function updateForm(value) {
    return setForm((prev) => {
      return { ...prev, ...value };
    });
  }

// This function will handle the submission.
  async function onSubmit(e) {
    e.preventDefault();
    const person = { ...form };
    try {
      let response;
      if (isNew) {
        // if we are adding a new record we will POST to /record.
        response = await fetch("http://localhost:5050/record", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(person),
        });
      } else {
        // if we are updating a record we will PATCH to /record/:id.
        response = await fetch(`http://localhost:5050/record/${params.id}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(person),
        });
      }

if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
    } catch (error) {
      console.error('A problem occurred with your fetch operation: ', error);
    } finally {
      setForm({ name: "", position: "", level: "" });
      navigate("/");
    }
  }

// This following section will display the form that takes the input from the user.
  return (
    <>
      <h3 className="text-lg font-semibold p-4">Create/Update Employee Record</h3>
      <form
        onSubmit={onSubmit}
        className="border rounded-lg overflow-hidden p-4"
      >
        <div className="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-slate-900/10 pb-12 md:grid-cols-2">
          <div>
            <h2 className="text-base font-semibold leading-7 text-slate-900">
              Employee Info
            </h2>
            <p className="mt-1 text-sm leading-6 text-slate-600">
              This information will be displayed publicly so be careful what you
              share.
            </p>
          </div>

<div className="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 ">
            <div className="sm:col-span-4">
              <label
                htmlFor="name"
                className="block text-sm font-medium leading-6 text-slate-900"
              >
                Name
              </label>
              <div className="mt-2">
                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-slate-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                  <input
                    type="text"
                    name="name"
                    id="name"
                    className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-slate-900 placeholder:text-slate-400 focus:ring-0 sm:text-sm sm:leading-6"
                    placeholder="First Last"
                    value={form.name}
                    onChange={(e) => updateForm({ name: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <div className="sm:col-span-4">
              <label
                htmlFor="position"
                className="block text-sm font-medium leading-6 text-slate-900"
              >
                Position
              </label>
              <div className="mt-2">
                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-slate-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                  <input
                    type="text"
                    name="position"
                    id="position"
                    className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-slate-900 placeholder:text-slate-400 focus:ring-0 sm:text-sm sm:leading-6"
                    placeholder="Developer Advocate"
                    value={form.position}
                    onChange={(e) => updateForm({ position: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <div>
              <fieldset className="mt-4">
                <legend className="sr-only">Position Options</legend>
                <div className="space-y-4 sm:flex sm:items-center sm:space-x-10 sm:space-y-0">
                  <div className="flex items-center">
                    <input
                      id="positionIntern"
                      name="positionOptions"
                      type="radio"
                      value="Intern"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Intern"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionIntern"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Intern
                    </label>
                    <input
                      id="positionJunior"
                      name="positionOptions"
                      type="radio"
                      value="Junior"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Junior"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionJunior"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Junior
                    </label>
                    <input
                      id="positionSenior"
                      name="positionOptions"
                      type="radio"
                      value="Senior"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Senior"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionSenior"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Senior
                    </label>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
        </div>
        <input
          type="submit"
          value="Save Employee Record"
          className="inline-flex items-center justify-center whitespace-nowrap text-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 hover:text-accent-foreground h-9 rounded-md px-3 cursor-pointer mt-4"
        />
      </form>
    </>
  );
}

Nous ajoutons maintenant ce qui suit au fichier src/App.jsx.

mern/client/src/App.jsx

Code Snippet

Il s’agit de notre composant de mise en page principal. Notre Navbar sera toujours située en haut de chaque page et l’Outlet acceptera les composants enfants que nous avons définis précédemment dans nos routes dans le fichier main.jsx.

Connexion du front end au back end

Nous avons terminé le processus de création des composants. Nous avons également connecté notre application React au back end à l’aide de fetch, qui permet de gérer les requêtes HTTP de manière plus claire et plus simple. Dans Record.jsx, nous avons ajouté le code suivant au bloc onSubmit(e). Lorsqu’une requête POST ou PATCH est envoyée à l’URL, fetch ajoute un nouvel enregistrement à la base de données ou met à jour un enregistrement existant dans la base de données.

Code Snippet

Nous avons également placé le bloc de code suivant dans Record.jsx sous le bloc constructeur afin de charger un enregistrement existant, le cas échéant.

Code Snippet

Enfin, RecordList.jsx. RecordList.jsx récupère les enregistrements de la base de données. Nous allons donc utiliser la méthode GET fetch pour récupérer ces enregistrements. Pour ce faire, nous avons ajouté les lignes de code suivantes au-dessus de la fonction RecordList() dans RecordList.jsx.

Code Snippet

Après avoir tout fermé, suivez ces étapes pour démarrer l’application :

Assurez-vous que l’application serveur est en cours d’exécution. Si ce n’est pas le cas, exécutez la commande suivante dans le répertoire server pour la démarrer :

Code Snippet

Dans un nouveau terminal, accédez au répertoire client et exécutez la commande :

Code Snippet

Voici à quoi ressemblera la page d’accueil du composant d’enregistrement une fois que nous aurons ajouté des enregistrements pour « Jesse Hall », « Kushagra Kesav » et « Stanimira Vlaeva » via le bouton « Créer un employé ».

L’écran qui vous permet d’ajouter un employé ressemble à ceci :

Félicitations ! Vous avez créé votre première application MERN. Pour d’autres idées et concepts avancés, consultez notre Centre pour les développeurs, et n’hésitez pas à poser vos questions dans nos forums communautaires.

Démarrer avec MongoDB Atlas

Essai gratuit