node.ucp

node.ucp

Dies ist ein vollwertiges isomorphes JavaScript-Bedienfeld, das über NodeJs und React geschrieben wurde. Der Zweck dieses Bedienfelds ist es, für andere als Beispiel- oder Boilerplate-Code zu dienen, da er vollwertig und sehr flexibel ist. Ich habe den Code geschrieben, um für verschiedene Anwendungsfälle und Datenbanktypen und -strukturen leicht anpassbar zu sein.

Sie finden Lösungen, die von mir zu vielen Problemen im Zusammenhang mit der Server -Side -Rendering, Reagieren, dem Umgang mit Cache -Busting von volatilen Ressourcen in Servicemitarbeitern und Handhabung von Sitzungen im Quellcode dieser Anwendung finden können.

Der Code verwendet die Pfeilfunktionen von ES6 und verspricht erheblich. Machen Sie sich also mit diesen Konzepten vertraut, wenn Sie es noch nicht sind!

Ich habe versucht, so viel wie möglich zu kommentieren, um die Arbeit der Anwendung im Quellcode zu erklären. Wenn die Dinge jedoch nicht klar sind, können Sie sich gerne fragen.

Demo

Anmeldeinformationen:

Benutzername: Jonas

Passwort: Test

Klicken Sie hier für die Demo.

Klicken Sie hier, um die Bilder in den Bildern in der Demo nicht zu funktionieren.

Voraussetzungen

• Nodejs v6.11.3 oder höher
• MySQL Version 5.6.5 oder höher, wenn Sie die Beispieldatenbank verwenden möchten.
• Wenn Sie Linux verwenden, müssen Sie Knotengypen installieren. Installieren Sie es mit dem folgenden Befehl:

sudo npm install -g node-gyp

• Wenn Sie Windows verwenden, müssen Sie auch Windows -Build -Tools installieren, um einige DePetenzen zu kompilieren und zu erstellen. Installieren Sie es mit dem folgenden Befehl:

npm install --global --production windows-build-tools

Installation

1. Navigieren Sie zu einem leeren Ordner, in dem der Quellcode platziert werden soll.
2. Klonen Sie das Repository mit dem folgenden Befehl:

git clone https://github.com/zeus2198/node.ucp 

ODER

Laden Sie das Repository manuell vom grünen Clone or Download -Schaltfläche im oberen rechten Teil des Repositorys herunter und extrahieren Sie den Inhalt in einem leeren Ordner. 3. Stellen Sie sicher, dass Sie sich im Projekt im Projekt befinden, und geben Sie den folgenden Befehl ein, um die von der Anwendung benötigten Pakete zu installieren:

npm install

Die Installation der Pakete kann einige Zeit dauern. 5. Importieren Sie die Beispieldatenbank ( ./sample-database.sql ) in Ihren MySQL-Server. 4. Öffnen Sie ./config/config.json -Datei und bearbeiten Sie die Konfigurationsdatei wie Ihre Systemeinstellungen.

Die Anwendung starten

Entwicklermodus:

Um die Anwendung im Entwicklermodus zu starten, verwenden Sie den folgenden Befehl:

npm run start-dev

Im Entwicklermodus passieren die folgenden Dinge:

• Die Anwendung startet automatisch neu, wenn sich in der beliebigen Datei im Ordner ./src ändert.
• Der gemeinsam genutzte Client-Server-Teil der Anwendung wird automatisch für den Anwendungsstart gebündelt.
• Die Anwendung verwendet global.css anstelle von global.min.css , das standardmäßig nicht zwischenstrahlt wird. Beachten Sie, dass wenn Sie sich für die Verwendung nginx für die Serviertage der statischen Datei (wie später beschrieben) entscheiden, die .css -Dateien je nach NGINX -Konfiguration zwischenspeichern können.
• Das automatische Cache -Busting für die Bundle -Datei erfolgt beim Neustart des Anwendung. Dieses Cache -Busting wird vom Service Worker ( ./public/js/sw.js ) erkannt und die Bundle -Datei wird dann in unserem Cache ersetzt!

Produktionsmodus:

Bevor Sie die Anwendung im Produktionsmodus starten, müssen Sie den gemeinsam genutzten Client-Server-Teil der Anwendung unter einer Datei einbündet, damit er dem Client zugestellt werden kann, um dies zu tun, um den folgenden Befehl zu verwenden:

npm run make

Beachten Sie ./public/css/global.css dass der obige Befehl auch den Inhalt ./public/css/global.min.css

Verwenden Sie nach Abschluss der Bündelung den folgenden Befehl, um die Anwendung zu starten:

npm start

Im Produktionsmodus passieren die folgenden Dinge:

• Die Anwendung verwendet global.min.css und nicht global.css , eine zwischengespeicherte Ressource.
• Das Cache -Busting für Bundle -Datei findet weiterhin statt, aber nur für die mit dem Befehl npm run make erstellte Bundle -Datei.
• Der Produktionsmodus von Express (unsere in der Anwendung verwendete Webserver-API) ist aktiviert.

Kunstwerk

Sie finden die Photoshop -Dateien des in diesem Projekt verwendeten Kunstwerks von hier aus

Notizen

• Das ./src/shared/
• Die Anwendung verwendet Service -Mitarbeiter, die nur in Localhost- und HTTPS -fähigen Domänen arbeiten. Stellen Sie daher sicher, dass Sie das HTTPS -Protokoll mit Ihrer Domäne verwenden.
• Geschützte Routen werden auf der serverseitigen Seite nicht gerendert.
• Um Cache zu löschen , öffnen Sie ./public/js/sw.js und bearbeiten Sie die Versionszeichenfolge. Schließen Sie dann die gesamte im Browser geöffnete Anwendungsregisterkarte und öffnen Sie die Anwendung erneut. Verwenden Sie dies, um global.min.css aus dem Cache zu löschen, wenn Sie die Datei global.css bearbeiten.
• Erhalten Sie ein kostenloses SSL -Zertifikat und verwenden Sie NGINX, um Proxy eine Domäne in Ihre Anwendung umzukehren.

Verwenden verschiedener Datenbanken

Die Datei ./src/db/db.api.abstract.js Erfordern Sie dann diese Datei in Ihrer benutzerdefinierten Datenbank -API -Ebene und überschreiben Sie die abstrakten Methoden. Siehe ./src/db/mysql.api.js Datei für Implementierungsbeispiele. Beachten Sie, dass jede Methode ein Versprechen zurückgeben sollte.

Nachdem Sie mit dem Schreiben von API für Ihren DB fertig sind, besuchen Sie ./config/config.json und bearbeiten Sie die Option databaseAPI , um den Namen der Datei mit Ihrer DB -API -Ebene zu entsprechen. Die Datei sollte in ./src/db/ Verzeichnis platziert werden.

Servieren statische Dateien mit Nginx

Ich empfehle, NGINX zum Servieren statischer Dateien anstelle von NodeJs zu verwenden. Dazu können Sie Ihrer Konfiguration der Sever -Block den folgenden Standortblock hinzufügen:

 location /public {
	alias  /path/to/your/app/public;
}

Wenn Sie sich für Nginx entscheiden, um statische Dateien zu servieren, möchten Sie möglicherweise auch die GZIP -Komprimierung für Ihre Anwendung in Nginx verlagern. Wenn Sie dies tun, was Sie sollten, deaktivieren Sie die Komprimierung auf der Anwendungsseite, indem Sie die folgenden zwei Zeilen von ./node.ucp.js

 //./node.ucp.js
// comment out the following lines if you use nginx for gzip compression
import compression from 'compression' ;

app . use ( compression ( ) ) ;

Verwenden von Process Manager, um sicherzustellen, dass die App für immer im Produktionsmodus ausgeführt wird

Im Produktionsmodus möchten Sie möglicherweise einen Prozessmanager haben, der die Anwendung neu starten kann, wenn sie abstürzt. Ich empfehle, PM2 für diesen Zweck zu verwenden. Installieren Sie den PM2 mit dem folgenden Befehl:

npm install pm2 -g

Bevor Sie PM2 verwenden, um Ihre Anwendung im Produktionsmodus zu starten, stellen Sie sicher, dass die Anwendung tatsächlich startet und ausgeführt wird. Andernfalls bleibt Ihre Anwendung in Start and Neustart -Schleife stecken.

Ich habe bereits eine Konfigurationsdatei für PM2 erstellt, um die Anwendung zu starten, um die Anwendung im Produktionsmodus mit PM2 -Typ zu starten:

pm2 start node.ucp.pm2.json