Comment créer et déployer une application MERN Full-Stack

La pile MERN est une pile technologique populaire pour créer des applications Web full-stack. Il se compose de MongoDB, Express, React et Node.js, chacun jouant un rôle essentiel dans la création d'une application Web moderne. Dans cet article, nous passerons en revue le processus de création d'une application MERN full-stack et de son déploiement sur un serveur en direct.

Qu'est-ce que la pile MERN ?

• MongoDB : Une base de données NoSQL utilisée pour stocker des données dans un format flexible de type JSON.
• Express : Un framework d'application Web léger pour Node.js, qui permet de gérer la logique côté serveur.
• React : Une bibliothèque JavaScript frontale utilisée pour créer des interfaces utilisateur avec des composants réutilisables.
• Node.js : Un environnement d'exécution JavaScript utilisé pour créer la logique et les API côté serveur backend.

Étapes pour créer une application MERN Full-Stack

1. Configuration du backend (Node.js Express MongoDB) :

• Initialisez un projet Node.js et installez les dépendances requises comme express, mongoose et cors.
• Configurez des routes dans Express pour gérer les requêtes API (par exemple, GET, POST, PUT, DELETE).
• Utilisez Mongoose pour vous connecter à MongoDB et définir des modèles de données.
• Configurez un serveur avec Express et configurez-le pour gérer les demandes.
• Implémentez les opérations CRUD (Créer, Lire, Mettre à jour, Supprimer) pour interagir avec MongoDB. Exemple de code back-end :

const express = require('express');
const mongoose = require('mongoose');
const app = express();

// Middleware
app.use(express.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/mernApp', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));

// Define a simple model
const User = mongoose.model('User', { name: String, email: String });

// API route to get all users
app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

app.listen(5000, () => console.log('Server running on port 5000'));

2. Construire le frontend (React) :

• Configurez un projet React à l'aide de create-react-app ou de votre outil préféré.
• Créez des composants React qui correspondent à différentes vues de votre application (par exemple, Accueil, UserList, UserForm).
• Utilisez axios ou fetch pour effectuer des requêtes API au serveur Express et afficher les données dans vos composants.
• Gérez l'état à l'aide de useState ou useContext de React pour la gestion globale de l'état. Exemple de code frontal :

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/api/users')
      .then(response => {
        setUsers(response.data);
      })
      .catch(err => {
        console.error(err);
      });
  }, []);

  return (
    <div>
      <h1 id="Users">Users</h1>
      <ul>
        {users.map(user => (
          <li key="{user._id}">{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3. Connexion du Frontend et du Backend :

• Assurez-vous que le backend s'exécute sur un port différent (par exemple, 5000) et que le frontend (React) s'exécute sur le port 3000.
• Utilisez CORS (Cross-Origin Resource Sharing) pour permettre au frontend de communiquer avec le backend.
• Configurez les paramètres de proxy dans le package.json de React pour simplifier les requêtes API pendant le développement.

Exemple :

"proxy": "http://localhost:5000"

4. Déploiement de l'application MERN :

• Déployez le serveur backend sur une plateforme comme Heroku ou DigitalOcean.
• Pour le frontend, vous pouvez utiliser des services comme Netlify ou Vercel pour déployer votre application React.
• Après le déploiement, mettez à jour les URL de l'API pour qu'elles pointent vers le serveur en direct au lieu de localhost.

Exemples d'étapes de déploiement :

• Pour le déploiement backend, vous pouvez utiliser Heroku CLI :

const express = require('express');
const mongoose = require('mongoose');
const app = express();

// Middleware
app.use(express.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/mernApp', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));

// Define a simple model
const User = mongoose.model('User', { name: String, email: String });

// API route to get all users
app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

app.listen(5000, () => console.log('Server running on port 5000'));

• Pour le déploiement frontend sur Netlify, poussez simplement votre application React sur GitHub et connectez-la à Netlify.

Conclusion
La création et le déploiement d'une application MERN full-stack implique la configuration du backend avec Node.js, Express et MongoDB, et du frontend avec React. En suivant ces étapes, vous pouvez créer une application Web complète qui gère à la fois la logique côté client et côté serveur. Une fois développée, le déploiement de l'application sur des plateformes comme Heroku et Netlify garantit que votre application est active et accessible aux utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!