mernboilerplate antd

Willkommen beim RBAC MERN Boilerplate-Projekt

Ein vollständiges (derzeit in Arbeit befindliches) MERN-Boilerplate-Repository mit RBAC-Funktion, das alle Best Practices für die Produktion befolgt.

In diesem Repository werde ich weiterhin die Best Practices für die Produktion hinzufügen, die wir in einem MERN-Projekt (MongoDB, Express.js, React.js und Node.js) befolgen sollten. Für eine bessere UX verwende ich außerdem Antd Pro für die Benutzeroberfläche. Vielleicht werde ich später auch MUI verwenden.

Unten sehen Sie das Beispiel einer Beispiellistenseite:

Technologie-Stack

Wie der Name schon sagt, basiert dieses Repository auf Express.js und React.js, in den Implementierungsdetails finden wir jedoch auch andere unterstützende Technologien.

Kundenseite

• React – Eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen
• Ant Design Pro – Ein Designsystem für Produkte auf Unternehmensebene. Schaffen Sie ein effizientes und angenehmes Arbeitserlebnis
• Testbibliothek – React Testing-Bibliothek
• Umi Request – HTTP-Client für die Ausführung einer HTTP-Anfrage vom Browser an den Server.

Serverseitig

• Node.js – ereignisgesteuerte E/A für das Backend
• Express.js – Schnelles, unabhängiges, minimalistisches Web-Framework für Node.js
• MongoDB – Die Anwendungsdatenplattform für NoSQL-Datenbanken
• Mungo - Mungo
• Swagger - Swagger (noch nicht fertig)
• Jest – JavaScript-Testframework
• Super Test – Super-Test-API-Test-Framework

Details zu Frameworks und Paketen finden Sie in den package.json-Dateien im Server- und Client-Verzeichnis.

Ausführen der Anwendung

Dieses Projekt kann grundsätzlich auf zwei Arten durchgeführt werden. Eine davon ist die Verwendung von Docker, die andere Möglichkeit ist die manuelle Ausführung über vscode.

Docker

Abhängig von der MongoDB-Hosting-Option wählen wir die passende Docker-Compose-Datei.

Docker erstellt Dateien

Derzeit haben wir zwei Docker-Compose-Dateien:

• docker-compose.mongocloud.yml – Von MongoDB.com gehosteter Cluster
• docker-compose.yml – Lokaler MongoDB-Container

Notizen

1. Wir müssen die MONGODB_CLOUD_URL in docker-compose.mongocloud.yml in die entsprechende MongoDB-URL ändern.
2. Wir müssen die REACT_APP_API_URL in docker-compose.yml in die entsprechende API-URL ändern. Wenn wir unseren Client dem Internet zugänglich machen möchten, müssen wir die REACT_APP_API_URL in die entsprechende API-URL ändern. Andernfalls behalten Sie REACT_APP_API_URL als http://localhost:8002 bei.

Führen Sie Docker-Compose-Befehle aus

Es wird erwartet, dass auf dem Computer Docker und Docker-Compose installiert sein müssen. Gehen Sie zum Stammverzeichnis des Repositorys und führen Sie die entsprechenden Befehle aus. Dadurch werden die Server- und Client-Container zusammen mit dem MongoDB-Container (wenn wir einen lokalen MongoDB-Server verwenden) innerhalb der Docker-Umgebung hochgefahren.

Verwendung von Docker-Containern mit in der Cloud gehostetem MongoDB

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

Verwendung von Docker-Containern mit lokaler MongoDB

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

Der Client und der Server sind beide betriebsbereit und wir sollten den folgenden Bildschirm sehen, wenn wir zur Client-URL navigieren.

• Seed-Daten Gehen Sie in den Docker-Container und führen Sie die folgenden Befehle aus. Dadurch wird die Datenbank mit roles , users und products gefüllt.

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

  Sie sollten die folgende Ausgabe sehen:

  

  

  Sie sollten sich jetzt bei der Anwendung anmelden und die Produktliste sehen.

Visual Studio-Code

Voraussetzungen

• Node.js: Zum Ausführen von NPM-Paketen
• MongoDB: Als Datenbank für die Anwendung

Schritte

• Zur Ausführung über vscode sollten wir die server- und clientseitigen Projekte getrennt ausführen und außerdem sicherstellen, dass mongodb betriebsbereit ist.

• Erstellen Sie eine .env Datei im server . Fügen Sie die folgenden Einträge hinzu oder ändern Sie sie entsprechend. Sie können der Datei .env.sample folgen, um das Format anzuzeigen.

   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
  

Serverbefehle

Wir gehen davon aus, dass wir die MongoDB im Docker-Container ausführen.

 cd server
npm i
npm run db:up
npm start

Client-Befehle

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

Daten-Seeding

Zum Seeding der Datenbank müssen wir die folgenden Befehle im Docker-Container ausführen. Sie können diese Befehle auch im Terminal ausführen, wenn Sie den Server und den Client außerhalb der Docker-Umgebung ausführen. Ich gehe davon aus, dass wir Appserver im Docker-Container ausführen.

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

Sie sollten den Benutzernamen und das Passwort in der Datei /server/setup/users.json sehen können.

Benutzeroberfläche für die Berechtigungsverwaltung

Ich habe eine Berechtigungsverwaltungs-Benutzeroberfläche für die Anwendung eingeführt. Beispielbild ist unten angegeben.

Zentralisiertes Protokoll bei Sentry.io

Wir können die Protokolle auch an sentry.io senden. Um diese Funktion nutzen zu können, müssen wir den dsn Eintrag in client/src/env.config.js hinzufügen. Das Setup-Snippet sieht wie folgt in der Datei index.js aus

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

server API (NOCH NICHT FERTIG)

Um die API anzuzeigen, öffnen Sie Ihren Browser und besuchen Sie http://localhost:5000/api-docs Idealerweise sollten wir alle API-Endpunkte zum Swagger hinzufügen, aber für Demozwecke haben wir nur den Produkte-API-Endpunkt hinzugefügt.
Zum Testen der APIs können wir die Postman-Sammlung wiederverwenden. Öffnen Sie docs/rbac-mern-boilerplate.postman_collection.json in Postman und Sie sollten die Endpunkte mit den entsprechenden Nutzlasten sehen.

Skripte

Projekt	Befehl	Aufgabe
Wurzel	npm run build	Erstellt die Container
Wurzel	npm run start	Starten Sie die Projekte und die Datenbank in Docker-Containern
Wurzel	docker exec -it appserver /bin/sh dann npm run db:seed	Führt Saatgutprodukte im Behälter aus
Server	npm i	Installieren Sie serverseitige Abhängigkeiten
Server	npm run db:up	Starten Sie die Datenbank in einem Docker-Container
Server	npm run test	Führen Sie Tests mit jest durch
Kunde	npm i	Installieren Sie clientseitige Abhängigkeiten
Kunde	npm run start	Starten Sie die React-App
Kunde	npm run build	Erstellen Sie die React-App im Produktionsmodus
Kunde	npm run test	Führen Sie Tests mithilfe Testing Library aus

Arten von Tests

In dieses Repository haben wir sowohl Unit-Tests als auch Integrationstests aufgenommen. Derzeit ist die Codeabdeckung sehr gering, aber wir arbeiten daran, sie in Zukunft auf über 90 % zu bringen

Kundenseite

• Wir haben nur Unit-Tests auf der Clientseite integriert und alle externen Abhängigkeiten wie localStorage und axios simuliert.

Um die Tests auszuführen, können wir den Befehl npm run test ausführen.

Serverseitig

• Integrationstests: Wir haben Jest als Testbibliothek integriert und die Pakete supertest und mongodb-memory-server hinzugefügt, um den Integrationstest zu vereinfachen.
• Unit-Tests: Wir haben Jest verwendet, um die Serviceschichten zu testen und die externen Abhängigkeiten wie MongoDB zu simulieren.

Um die Tests auszuführen, können wir den Befehl npm run test ausführen.

Lizenz

Dieses Projekt ist MIT-lizenziert.

Beitrag

Im Moment akzeptiere ich keine Community-Beiträge in Bezug auf den Code. Wenn Sie jedoch Vorschläge haben oder Fehler gefunden haben, können Sie gerne ein Problem oder eine Pull-Anfrage eröffnen.

Wenn Sie hingegen etwas wissen oder eine Diskussion über dieses Projekt beginnen möchten, starten Sie bitte eine Diskussion im Diskussionsforum unseres GitHub.

Tutorials zum Erstellen oder Verwenden dieses Projekts

Ich habe die Codierungsschritte dieses Projekts auf dem Bildschirm aufgezeichnet. Die Videos finden Sie in der YouTube-Playlist. Diese Videos gibt es nur in Bangla , aber ich nehme gerne an speziellen, kostenpflichtigen Sitzungen auf Englisch für ein internationales interessiertes Publikum teil. Wenn Sie Hilfe benötigen, können Sie mich gerne unter [email protected] kontaktieren.

Danke. Prost.