mernboilerplate antd

Bienvenue dans le projet RBAC MERN Boilerplate

Un référentiel passe-partout MERN complet (travail en cours maintenant) avec fonctionnalité RBAC, suivant toutes les meilleures pratiques de production.

Dans ce référentiel, je continuerai d'ajouter les meilleures pratiques de production que nous devrions suivre dans un projet MERN (MongoDB, Express.js, React.js et Node.js). Aussi pour une meilleure UX, j'utilise Antd Pro pour l'interface utilisateur. Peut-être plus tard, j'utiliserai également MUI.

Vous trouverez ci-dessous un exemple de page de liste :

Pile technologique

Comme son nom l'indique, ce référentiel est construit sur Express.js et React.js, mais dans les détails de l'implémentation, nous trouverons également d'autres technologies de support.

Côté client

• React - Une bibliothèque JavaScript pour créer des interfaces utilisateur
• Ant Design Pro - Un système de conception pour les produits de niveau entreprise. Créer une expérience de travail efficace et agréable
• Bibliothèque de tests - Bibliothèque de tests React
• Umi Request - Client HTTP pour l'exécution de la requête HTTP du navigateur au serveur.

Côté serveur

• Node.js - E/S événementielles pour le backend
• Express.js - Framework Web rapide, sans opinion et minimaliste pour Node.js
• MongoDB - La plateforme de données d'application pour les bases de données NoSQL
• Mangouste - mangouste
• Swagger - Swagger (Pas encore fait)
• Jest - Cadre de test JavaScript
• Super Test - Cadre de test d'API Super Test

Les frameworks et packages détaillés peuvent être trouvés dans les fichiers package.json dans le répertoire du serveur et du client.

Exécuter l'application

Ce projet peut être exécuté essentiellement de deux manières. L'une utilise Docker, l'autre consiste à l'exécuter manuellement via vscode.

Docker

En fonction de l'option d'hébergement MongoDB, nous choisissons le fichier docker-compose approprié.

Docker compose des fichiers

Actuellement, nous avons deux fichiers docker-compose :

• docker-compose.mongocloud.yml - Cluster hébergé MongoDB.com
• docker-compose.yml - Conteneur MongoDB local

Remarques

1. Nous devons remplacer l' MONGODB_CLOUD_URL dans docker-compose.mongocloud.yml par l'URL MongoDB appropriée.
2. Nous devons remplacer REACT_APP_API_URL dans docker-compose.yml par l'URL de l'API appropriée. Si nous souhaitons exposer notre client à Internet, nous devons remplacer REACT_APP_API_URL par l'URL de l'API appropriée. Sinon, conservez REACT_APP_API_URL sous la forme http://localhost:8002 .

Exécuter les commandes docker-compose

Il est prévu que docker et docker-compose soient installés sur la machine. Accédez à la racine du référentiel et exécutez les commandes appropriées. Cela fera tourner les conteneurs serveur et client ainsi que le conteneur MongoDB (si nous utilisons le serveur MongoDB local) dans l'environnement Docker.

Utiliser des conteneurs Docker avec MongoDB hébergé dans le cloud

 > cd project-root
> docker-compose -f docker-compose.mongocloud.yml build
> docker-compose -f docker-compose.mongocloud.yml up

Utiliser des conteneurs Docker avec MongoDB local

 > cd project-root
> docker-compose build
> docker-compose up

Le client et le serveur sont tous deux opérationnels et nous devrions voir l'écran suivant si nous accédons à l'URL du client.

• données de départ Accédez à l'intérieur du conteneur Docker et exécutez les commandes ci-dessous. Ceux-ci alimenteront la base de données avec des données roles , users et products .

  docker exec -it appserver bash
  npm run db:seed
  npm run db:migrate

  Vous devriez voir le résultat suivant :

  

  

  Vous devriez maintenant être connecté à l'application et voir la liste des produits.

Code de Visual Studio

Conditions préalables

• Node.js : Pour exécuter des packages npm
• MongoDB : En tant que base de données pour l'application

Mesures

• Pour exécuter via vscode, nous devons exécuter les projets côté serveur et client séparément, et également nous assurer que mongodb est opérationnel.

• Créez un fichier .env dans le répertoire server . Ajoutez les entrées ci-dessous ou modifiez-les en conséquence. Vous pouvez suivre le fichier .env.sample pour voir le format.

   DB_HOST=localhost
  DB_PORT=27017
  DB_NAME=appdb
  JWT_SECRET=secret
  JWT_EXPIRES_IN=3600
  PORT=5000
  IS_MONGODB_CLOUD_URL=false
  MONGODB_CLOUD_URL=mongodb+srv:// <USER >: <PASSWORD >@cluster0.abcd.mongodb.net/myFirstDatabase?retryWrites=true
  

Commandes du serveur

Nous supposons que nous exécutons MongoDB dans le conteneur Docker.

 cd server
npm i
npm run db:up
npm start

Commandes client

 cd client-pro
nvm use --lts
yarn
yarn start

Ensemencement de données

Pour amorcer la base de données, nous devons exécuter les commandes suivantes dans le conteneur Docker. Vous pouvez également exécuter ces commandes dans le terminal si vous exécutez le serveur et le client en dehors de l'environnement Docker. Je suppose que nous exécutons le serveur d'applications dans le conteneur Docker.

docker exec -it appserver bash
npm run db:seed
npm run db:migrate

Vous devriez pouvoir voir le nom d'utilisateur et le mot de passe dans le fichier /server/setup/users.json .

Interface utilisateur de gestion des autorisations

J'ai introduit une interface utilisateur de gestion des autorisations pour l'application. Un exemple d’image est donné ci-dessous.

Journal centralisé sur Sentry.io

Nous pouvons également envoyer les journaux à sentry.io. Pour utiliser cette fonctionnalité, nous devons ajouter l'entrée dsn dans client/src/env.config.js . L'extrait de configuration est comme ci-dessous dans le fichier index.js

 Sentry . init ( {
  dsn : Config . dsn ,
  integrations : [ new Integrations . BrowserTracing ( ) ] ,
  tracesSampleRate : 1.0 ,
} ) ; 

API server de test (PAS ENCORE FAIT)

Pour afficher l'API, ouvrez votre navigateur et visitez http://localhost:5000/api-docs Idéalement, nous devrions ajouter tous les points de terminaison de l'API dans le swagger, mais à des fins de démonstration, nous avons uniquement ajouté le point de terminaison de l'API des produits.
Pour tester les API, nous pouvons réutiliser la collection postman. Ouvrez docs/rbac-mern-boilerplate.postman_collection.json dans Postman et vous devriez voir les points de terminaison avec les charges utiles appropriées.

Scripts

Projet	Commande	Tâche
racine	npm run build	Construit les conteneurs
racine	npm run start	Démarrez les projets et la base de données dans des conteneurs Docker
racine	docker exec -it appserver /bin/sh puis npm run db:seed	Exécute les produits semenciers à l’intérieur du conteneur
serveur	npm i	Installer les dépendances côté serveur
serveur	npm run db:up	Démarrer la base de données dans un conteneur Docker
serveur	npm run test	Exécuter des tests en utilisant jest
client	npm i	Installer les dépendances côté client
client	npm run start	Démarrez l'application React
client	npm run build	Créez l'application React en mode production
client	npm run test	Exécuter des tests à l'aide de Testing Library

Types de tests

Dans ce référentiel, nous avons inclus à la fois les tests unitaires et les tests d'intégration. Pour l'instant, la couverture du code est très faible, mais nous y travaillons pour qu'elle dépasse les 90 % dans le futur.

Côté client

• Nous avons incorporé uniquement des tests unitaires côté client et simulé toutes les dépendances externes comme localStorage et axios .

Pour exécuter les tests, nous pouvons exécuter la commande npm run test .

Côté serveur

• Tests d'intégration : nous avons intégré Jest en tant que bibliothèque de tests et nous avons ajouté les packages supertest et mongodb-memory-server pour faciliter les tests d'intégration.
• Tests unitaires : nous avons utilisé Jest pour tester les couches de service et simuler les dépendances externes comme MongoDB .

Pour exécuter les tests, nous pouvons exécuter la commande npm run test .

Licence

Ce projet est sous licence MIT.

Contribution

Pour l’instant, je n’accepte aucune contribution communautaire en termes de code. Mais si vous avez des suggestions ou si vous avez trouvé des bugs, n'hésitez pas à ouvrir un problème ou une pull request.

D'un autre côté, si vous voulez savoir quelque chose ou si vous souhaitez démarrer une discussion sur ce projet, veuillez démarrer une discussion sur notre forum de discussion GitHub.

Tutoriels sur la façon de créer ou d'utiliser ce projet

J'ai enregistré sur écran les étapes de codage de ce projet. Vous pouvez retrouver les vidéos dans la playlist YouTube. Ces vidéos sont uniquement en bengali , mais je suis heureux de proposer des sessions spéciales dédiées et payantes en anglais pour un public international intéressé. N'hésitez pas à me contacter à [email protected] pour tout type d'aide.

Merci. Acclamations.