node.ucp

node.ucp

Il s'agit d'un panneau de contrôle Isomorphe JavaScript isomorphe à part entière écrit en haut de NodeJS et React. Le but de ce panneau de commande est de servir d'exemple ou de code de passe-partout pour les autres car il est à part entière et très flexible. J'ai écrit le code pour être facilement adaptable à différents cas d'utilisation et types de bases de données et structures.

Vous pouvez trouver des solutions écrites par moi à de nombreux problèmes liés au rendu côté serveur, réagir, gérer la rupture de cache des ressources volatiles dans les travailleurs du service et les séances de manipulation manuellement dans le code source de cette application.

Le code utilise les fonctions Arrow d'Es6 et promettez considérablement, alors familiarisé avec ces concepts si vous ne l'êtes pas déjà!

J'ai essayé de commenter autant que possible pour expliquer le fonctionnement de l'application dans le code source, mais si les choses ne sont pas claires, n'hésitez pas à demander.

Démo

Informations de connexion:

Nom d'utilisateur: Jonas

Mot de passe: tester

Cliquez ici pour la démo.

Cliquez ici pour les images au cas où la démo ne fonctionne pas.

Condition préalable

• Nodejs v6.11.3 ou version ultérieure
• MYSQL Version 5.6.5 ou version ultérieure si vous souhaitez utiliser l'exemple de base de données.
• Si vous utilisez Linux, vous devez installer Node-Gyp. Installez-le à l'aide de la commande suivante:

sudo npm install -g node-gyp

• Si vous utilisez Windows, vous devez également installer Windows Build Tools pour compiler et construire certaines des dépréances. Installez-le à l'aide de la commande suivante:

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

Installation

1. Accédez à un dossier vide où vous souhaitez que le code source soit placé.
2. Clone le référentiel à l'aide de la commande suivante:

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

OU

Téléchargez le référentiel manuellement à partir du Clone or Download situé dans la partie supérieure droite du référentiel et extraire le contenu dans un dossier vide. 3. Assurez-vous que vous êtes dans la racine le projet et tapez la commande suivante pour installer les packages nécessaires à l'application:

npm install

L'installation des packages peut prendre un certain temps. 5. Importez l'exemple de base de données ( ./sample-database.sql ) dans votre serveur MySQL. 4. Ouvrez ./config/config.json Fichier et modifiez le fichier de configuration selon les paramètres de votre système.

Démarrage de la demande

Mode développeur:

Pour démarrer l'application en mode développeur, utilisez la commande suivante:

npm run start-dev

En mode développeur, les choses suivantes se produisent:

• L'application redémarre automatiquement chaque fois qu'il y a une modification du fichier dans le dossier ./src .
• La partie partagée client-serveur de l'application est automatiquement regroupée sur le démarrage de l'application.
• L'application utilise global.css au lieu de global.min.css qui n'est pas mise en cache par défaut. Notez que si vous décidez d'utiliser nginx pour servir un fichier statique (comme décrit plus loin), il peut mettre en cache les fichiers .css en fonction de la configuration Nginx.
• Le casting automatique du cache pour le fichier de bundle a lieu sur le redémarrage de l'application. Cette rupture de cache est détectée par le travailleur des services ( ./public/js/sw.js ) et le fichier de bundle est ensuite remplacé dans notre cache!

Mode de production:

Avant de démarrer l'application en mode de production, vous devez regrouper la partie partagée client-serveur de l'application dans un seul fichier afin qu'elle puisse être servie au client, pour le faire, utilisez la commande suivante:

npm run make

Notez que la commande ci-dessus divisera également le contenu ./public/css/global.css et le stocker en tant que ./public/css/global.min.css .

Une fois le regroupement terminé, utilisez la commande suivante pour démarrer l'application:

npm start

En mode de production, les choses suivantes se produisent:

• L'application utilise global.min.css et non global.css qui est une ressource en cache.
• L'échantillonnage du cache pour le fichier de bundle aura toujours lieu, mais uniquement pour le fichier de bundle créé à l'aide de la commande de la commande npm run make .
• Le mode de production d'Express (notre API Web-Server utilisé dans l'application) est activé.

Œuvres d'art

Vous pouvez trouver les fichiers Photoshop des illustrations utilisées dans ce projet à partir d'ici

Notes

• Le répertoire ./src/shared/ contient le code commun dans le client et la partie du serveur afin que vous n'exposez aucune information sensible dans cette section.
• L'application utilise des travailleurs de service qui ne fonctionnent que sur les domaines activés localHost et HTTPS, alors assurez-vous d'utiliser le protocole HTTPS avec votre domaine.
• Les itinéraires protégés ne sont pas rendus à côté du serveur.
• Pour effacer le cache , ouvrez ./public/js/sw.js et modifiez la chaîne de version. Ensuite, fermez tout l'onglet Application ouverte dans le navigateur et ouvrez à nouveau l'application. Utilisez-le pour effacer global.min.css hors du cache lorsque vous modifiez le fichier global.css .
• Obtenir un certificat SSL gratuit et utiliser Nginx pour inverser la procuration d'un domaine à votre application.

En utilisant différentes bases de données

Le fichier ./src/db/db.api.abstract.js contient une classe abstraite pour notre API de base de données, lisez les commentaires pour les spécifications de la méthode. Ensuite, nécessitez ce fichier dans votre couche API de base de données personnalisée et remplacez les méthodes abstraites. Voir ./src/db/mysql.api.js Fichier pour l'exemple d'implémentation. Notez que chaque méthode doit renvoyer une promesse.

Après avoir terminé avec API d'écriture pour votre base de données, rendez-vous vers ./config/config.json et modifiez l'option databaseAPI pour faire correspondre le nom du fichier contenant votre couche API DB. Le fichier doit être placé dans ./src/db/ répertoire.

Servant des fichiers statiques à l'aide de nginx

Je recommande d'utiliser Nginx pour servir des fichiers statiques au lieu de NodeJS. Pour ce faire, vous pouvez ajouter le bloc d'emplacement suivant à votre configuration de bloc de séparation:

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

Si vous décidez d'aller avec Nginx pour servir des fichiers statiques, vous voudrez peut-être déplacer la compression GZIP pour votre application à Nginx également. Si vous le faites, ce que vous devriez, désactivez la compression du côté de l'application en commentant les deux lignes suivantes du fichier ./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 ( ) ) ;

Utilisation de Process Manager pour s'assurer que l'application fonctionne pour toujours en mode de production

En mode de production, vous voudrez peut-être avoir un gestionnaire de processus qui peut redémarrer l'application si elle se bloque, je recommande d'utiliser PM2 à cet effet. Installez le PM2 à l'aide de la commande suivante:

npm install pm2 -g

Maintenant, avant d'utiliser PM2 pour démarrer votre application en mode de production, assurez-vous que l'application démarre et s'exécute sinon votre application sera coincée dans le démarrage et le redémarrage de la boucle.

J'ai déjà créé un fichier de configuration pour PM2 pour démarrer l'application, pour démarrer l'application en mode de production avec le type PM2:

pm2 start node.ucp.pm2.json