Comment commencer avec Mern Stack

Mern Stack est un ensemble de technologies fiables et puissantes qui peuvent être utilisées pour développer des applications Web évolutives. Cette application Web comprend une base de données frontale, back-end et pour stocker les données. Il s'agit d'un cadre JavaScript complet utilisé pour créer des sites Web et des applications conviviaux.

Pour commencer avec la pile Mern, nous devons effectuer la question suivante, configurer le serveur de nœuds, créer une base de données MongoDB et établir une connexion avec le serveur de nœuds. La troisième et la plus importante étape consiste à construire la réaction frontale.Application JS. Cet article vous montrera comment effectuer toutes ces opérations. Avant d'aller de l'avant, discutons des composantes mentionnées de la pile Mern.

Composants de la pile Mern

• js est considéré comme le niveau supérieur du développement de la pile Mern. C'est un déclaratif Framework JavaScript utilisé pour développer des applications côté client dynamique. Il vous permet également de créer des interfaces complexes en connectant les composants de vos données à partir du serveur backend, puis en les rendant sous forme de HTML. React excelle également à gérer les interfaces axées sur les données et avec état avec un code minimal et d'autres fonctionnalités telles que la gestion des erreurs, les listes, les formulaires, les événements, que vous attendez d'un cadre Web moderne.
• Si vous souhaitez développer une application basée sur Pile Mern qui enregistre toute forme de données telles que les événements, les commentaires, les profils d'utilisateurs, le contenu et les téléchargements, vous aurez besoin d'une base de données simple à utiliser avec le frontal et le back-end. C'est la situation où Mongodb entre en jeu. Dans la réaction.JS front-end, les documents JSON créés sont envoyés à l'Express.JS et le nœud.JS Server, les traitant et les stockant dans la base de données MongoDB.
• Dans Développement de la pile Mern, Le niveau qui est présent entre la base de données MongoDB et la réaction.JS front-end est le «js". Il peut être décrit comme un cadre Web minimaliste, sans opinion et rapide pour le nœud.js. Exprimer.JS Framework exploite le nœud.serveur js à l'intérieur. Vous pouvez vous connecter à l'Express.JS fonctionne à partir de votre application Front-end en envoyant les messages, obtient ou les demandes HTTP. Ces fonctions spécifiées sont ensuite utilisées pour modifier ou accéder aux données MongoDB via des promesses ou des rappels. Exprimer.JS propose également des modèles puissants pour gérer les réponses HTTP, les demandes et le routage d'URL.

Maintenant, commençons avec la pile Mern!

Comment configurer le serveur de nœuds dans le développement de la pile Mern

Pour configurer le serveur de nœuds dans Mern Stack Development, la première chose que vous devez faire est de télécharger le nœud.JS sur votre système via son site officiel:

Ensuite, utilisez le fichier téléchargé pour terminer l'installation du nœud.JS et après avoir terminé l'opération spécifiée, exécutez la donnée ci-dessous dans votre invite de commande:

> nœud -v

Le-donné ci-dessus "nœud«Commande avec le«-V"L'option imprimera la version actuelle du"Nœud.js«Qui est installé sur votre système:

Après avoir installé le nœud.JS, nous allons avancer vers la procédure de développement du serveur. À cette fin, premièrement, nous créerons un dossier de base, puis installerons tous les packages ou dépendances requis pour le développement du serveur de nœuds.

Pour l'opération spécifiée, vous pouvez utiliser également l'invite de commande. Cependant, nous utiliserons le «Code Visual Studio»Terminal qui facilitera également le travail dans les fichiers du serveur de nœuds.

À l'étape suivante, nous ouvrirons notre dossier de base en utilisant le «Dossier ouvert"Option du"Déposer" menu:

Nous avons sélectionné le «Employee-Mern-Project”Dossier de stockage des fichiers liés au serveur de nœuds de la pile Mern:

Maintenant, appuyez sur "Ctrl + shift+'"Pour ouvrir une nouvelle fenêtre de terminal dans le code Visual Studio. Vous pouvez également utiliser le menu «Terminal» à cet effet:

Dans la prochaine étape, nous créerons un «backend"Dossier à l'intérieur de notre"Employee-Mern-Project»Root ou dossier de base. Pour faire de même, vous pouvez exécuter le diable "mkdir”Commande dans le terminal ouvert:

> backend MKDIR

Après cela, nous allons entrer dans le nouvellement créé "backend”Dossier pour ajouter le fichier et les packages liés au serveur:

> Backend CD

À l'intérieur du «backend«Dossier, nous allons maintenant créer un«emballer.json" déposer. Le paquet.Le fichier JSON est l'élément central d'un serveur de nœuds dans le développement de la pile Mern. Il comprend les métadonnées de votre projet de pile Mern et définit également les attributs fonctionnels qui peuvent ensuite être utilisés par le NPM pour exécuter les scripts et installer des dépendances.

Pour créer un nouveau package.Fichier JSON pour votre serveur de nœuds, saisissez la commande suivante:

> npm init -y

Comment installer des dépendances pour le serveur de nœuds dans le développement de la pile Mern

Cette section démontrera la procédure d'installation de dépendances essentielles telles que «exprimer","cors","mangouste", et "dotenv"Pour votre serveur de nœuds dans le développement de la pile Mern. Le gestionnaire de packages de nœuds ou «NPM«Peut être utilisé pour installer les dépendances spécifiées de la manière suivante:

> npm install express coors mongoose dotenv

Ici:

• "Express" est ajouté pour installer "Express" qui est un cadre Web léger pour le nœud.js. Il a également la capacité de prendre en charge de nombreuses femmes intermédiaires qui aident à rendre le code plus facile et plus court à écrire.
• «CORS» est un acronyme pour le partage des ressources croisées. Ce package permet aux demandes AJAX d'accéder aux ressources des hôtes distants.
• "Mongoose" est ajouté pour installer le package "Mongoose". Le package Mongoose aide le serveur de nœuds à interagir avec MongoDB dans le développement de la pile Mern.
• Enfin, le package «Dotenv» chargera les variables environnementales du «.Env »au« processus.fichier env. Il gère également les informations d'identification de la base de données dans un environnement collaboratif.

Pour notre serveur de nœuds, un autre package que nous allons installer est «nomon". Il redémarre automatiquement l'application Node lorsque vous avez apporté des modifications dans le fichier tout en développant le nœud.Application basée sur JS:

> sudo npm install -g nodemon

Comment exécuter le serveur de nœuds dans le développement de la pile Mern

Jusqu'à ce point, nous avons installé le nœud.JS et les packages et dépendances requis. Maintenant, il est temps de créer et d'exécuter le nœud backend.serveur JS. Pour ce faire, cliquez sur le «backend”Dossier, et à partir du menu déroulant, sélectionnez le"Nouveau fichier" option:

Ici, vous pouvez un nouveau "serveur.js"Le fichier javascript est ajouté dans le dossier backend:

Maintenant, dans le «serveur.js«Fichier, nous allons créer un«exprimer«Serveur, alors nous joindrons le«exprimer.json"Middleware et"cors". Le "exprimer.json«Middleware sera utilisé pour envoyer et recevoir« JSON ». Aussi, le nœud.JS Server sera autorisé à écouter sur le «5000" port:

const Express = require ('express');
const CORS = require ('CORS');
exiger ('dotenv').config ();
const app = express ();
const port = processus.env.Port || 5000;
appliquer.use (CORS ());
appliquer.utiliser (exprimer.JSON ());
appliquer.écouter (port, () =>
console.log ('Server s'exécute sur le port: $ port');
);

Après avoir ajouté le code ci-dessus dans le «serveur.js«Fichier, appuyez sur«Ctrl + s"Pour enregistrer les modifications, puis exécuter votre serveur de nœuds en utilisant"nomon»:

> serveur NODEMON

À partir de la sortie, vous pouvez voir que notre serveur s'exécute avec succès sur le port "5000»:

Après avoir réussi à exécuter le nœud.JS Server sur le port spécifié, avancez vers le processus de connexion du nœud.JS Server à la base de données MongoDB. Pour cela, vous devez d'abord créer un compte MongoDB.

Comment créer une base de données MongoDB dans le développement de la pile Mern

Dans Mern Stack Development, avoir un compte de base de données MongoDB est un incontournable. La création d'un compte MongoDB vous permet de créer une base de données en fonction de vos exigences. Après cela, vous pouvez ajouter un "Grappe«À la base de données nouvellement créée et générer une chaîne de connexion, ce qui vous aidera à connecter le nœud.JS Server à la base de données MongoDB. Alors, commençons cette procédure en se dirigeant vers le site officiel de MongoDB:

Maintenant, créez un compte pour l'hébergement de la base de données dans le «MongoDB Atlas»:

Vous verrez le tableau de bord donné après la création de compte MongoDB. Maintenant, cliquez sur le "Nouveau projet»Bouton qui est situé sur le côté droit du tableau de bord:

Dans le champ de saisie en surbrillance, entrez le nom du projet MongoDB et cliquez sur «sur le«Suivant" bouton:

À ce stade, votre projet MongoDB est créé et vous êtes tous prêts à créer une nouvelle base de données:

À l'étape suivante, sélectionnez le fournisseur et la zone de votre base de données. Par exemple, nous avons sélectionné «Google Cloud«En tant que fournisseur de cloud et«lowa"Comme notre région. Il est également recommandé de choisir un niveau gratuit qui s'avère idéal pour un environnement de bac à sable.

Après avoir sélectionné les options requises, cliquez sur "Créer un cluster”Bouton pour avancer:

Pour maintenir la sécurité MongoDB, choisissez une option entre «Nom d'utilisateur et mot de passe" et "Certificat”Pour authentifier la connexion depuis ou vers le nœud.js. Dans notre cas, nous avons ajouté le nom d'utilisateur et le mot de passe:

Maintenant, ajoutez vos adresses IP à la liste blanche MongoDB. Cette option permettra à l'adresse IP configurée d'accéder aux clusters du projet:

Après avoir configuré l'adresse IP, cliquez sur "Terminer et fermer" bouton:

En quelques minutes, le cluster créé de votre projet MongoDB sera provisionné:

Comment générer une chaîne mongodb pour connecter le nœud.JS Server dans le développement de la pile Mern

Après avoir configuré le "Employee-Mern-Project«Base de données, et la nouvelle création«Cluster0», Allez au«Déploiements de base de données”Section et sélectionnez le cluster. Après cela, cliquez sur le "Connecter”Bouton qui est mis en surbrillance dans l'image ci-dessous:

Ensuite, il vous sera demandé de choisir la méthode de connexion pour Cluster0. Nous voulons connecter notre nœud.JS Server dans la base de données MongoDB dans le développement d'applications de pile Mern, nous allons donc aller avec le «Connectez votre application«Options:

Ensuite, sélectionnez le "CONDUCTEUR" et son "VERSION»Puis copiez la chaîne de connexion en bas de la fenêtre:

Comment connecter le nœud.Base de données JS Server à MongoDB dans le développement de la pile Mern

Dans le développement de la pile Mern, pour connecter le nœud.JS et la base de données MongoDB, nous utiliserons la chaîne de connexion, dans laquelle nous avons copié à partir du "Connectez-vous à Cluster0" fenêtre. Pour ce faire, ouvrez le nœud.JS "serveur.js”Fichier et assurez-vous que votre serveur est en cours d'exécution:

> Server Nodeman

Dans la prochaine étape, nous ajouterons "mangouste" bibliothèque. Le "mangouste»Node.La bibliothèque JS aide à établir une connexion entre le cluster MongoDB et le nœud.serveur JS:

const Mongoose = require («Mongoose»);

Maintenant, nous allons créer un séparé ".env"Fichier pour stocker l'atlas MongoDB"Uri" ou la "Chaîne de connexion". À cette fin, cliquez sur le nœud.Dossier de serveur JS qui est "backend«Dans notre cas, puis crée un«Nouveau fichier»:

Nous avons nommé le nouveau fichier comme «.env»:

Si vous n'avez pas la chaîne de connexion, copiez-le à partir de la section en surbrillance:

Ensuite, ajoutez la chaîne de connexion copiée comme «Atlas_uri" dans le ".env" déposer:

Atlas_uri = mongodb + srv: // linuxhint: @ cluster0.8jdc7.mongodb.net / myfirstdatabase?retRyWrites = true & w = majoritaire

Dans l'ajout "Atlas_uri"Spécifiez votre nom d'utilisateur MongoDB et votre mot de passe et appuyez sur"Ctrl + s«Pour enregistrer les modifications supplémentaires:

Maintenant, ajoutez le code suivant dans votre nœud.JS "serveur" déposer:

const uri = processus.env.Atlas_uri;
mangouste.connecter (uri);
const Connexion = Mongoose.connexion;
connexion.une fois ('open', () =>
console.log ("Connexion de la base de données MongoDB établie avec succès");
)

Le code ajouté essaiera de se connecter avec le "MongoDB Atlas" en utilisant "mangouste«Bibliothèque et altas_uri et si la connexion est établie, elle imprimera«La connexion de la base de données MongoDB établie avec succès”Sur la fenêtre du terminal:

Presse "Ctrl + s"Pour enregistrer les modifications ajoutées, puis exécuter votre nœud.serveur JS:

> serveur NODEMON

La sortie sous-donnée déclare que nous avons réussi à connecter notre nœud.JS Server vers la base de données MongoDB dans le développement de la pile Mern:

Maintenant, nous allons vérifier la méthode de configuration de React.JS sur côté client dans le développement de la pile Mern.

Comment configurer React.JS sur côté client dans le développement de la pile Mern

Pour configurer React.JS sur le côté client dans le développement de la pile Mern, la première chose que vous devez faire est de sélectionner un répertoire pour l'installation de la réact.Projet basé sur JS. Vous pouvez utiliser le "Invite de commande" dans ce but. Cependant, nous utiliserons le «Code Visual Studio»Terminal qui facilitera également le fonctionnement avec la réaction.Application JS.

Pour le faire d'abord, nous chercherons le «Code Visual Studio»Application et ouvrez-le:

Dans l'application ouverte, cliquez sur le «Déposer”Option de la barre de menu et sélectionnez"Dossier ouvert" option:

Maintenant, parcourez le dossier où vous voulez placer votre réaction.Fichier lié à l'application JS. Dans notre cas, nous avons sélectionné le «Employee-Mern-Project”Dossier, présent dans le«Disque local (e :)»:

Ensuite, appuyez sur "Ctrl + shift + '”Pour ouvrir le terminal de code Visual Studio. Vous pouvez également effectuer l'opération spécifiée à l'aide du menu «Terminal»:

À ce stade, nous sommes tous prêts à configurer la réaction.Application JS dans le développement de la pile Mern. L'exécution du «NPX«Commande avec le«create-react-app"L'option vous aide à créer une réaction.Application JS. Par exemple, le Prédire ci-dessous "NPX«La commande créera un«Mern-Emsystem»Réagir.Application JS qui aura toutes les dépendances requises dans son dossier de projet:

> npx create-react-app Mern-emsystem

Attendez quelques minutes, car l'installation des packages prendra un certain temps:

La sortie sans erreur sous-donnée indique que nous avons réussi à installer le «Mern-Emsystem»Réagir.Application JS:

Le code Visual Studio chargera automatiquement le dossier ReactJS-Application Created. Maintenant, nous allons apporter quelques modifications dans le «indice.html«Fichier du«Mern-Emsystem»Réagir.Application JS:

Le "indice.html"Fichier de votre réaction.L'application JS ressemblera en quelque sorte à ceci:

Ici, "Application React"Représente le"titre" de nôtre "Mern-Emsystem" application:

Nous utiliserons la réaction créée.Application JS pour développer un système de gestion des employés avec Mern Stack. Ainsi, premièrement, nous changerons le titre de notre «Mern-Emsystem»Réagir.Application JS à "Système de gestion des employés"Et enregistrez l'ouverture"indice.html" déposer:

Dans la prochaine étape, nous modifierons le répertoire de travail actuel en «Mern-Emsystem”Utilisation du terminal:

> CD Mern-EMSystem

Maintenant, rédigez-vous ci-dessous "NPM«Commande pour démarrer le développement du serveur Web:

> start npm

Comme vous pouvez le voir sur la sortie que notre «Mern-Emsystem»Le projet est compilé avec succès et prêt à visualiser dans le navigateur:

En tapant le «LocalHost: 3000"Dans la barre d'adresse de notre navigateur, nous verrons l'interface suivante pour le"Mern-Emsystem»Réagir.Application JS:

Vous pouvez également ajouter un changement du contenu du "Appliquer.js”Fichier JavaScript pour gérer ou afficher les composants de votre application React:

Par exemple, l'ajout du code suivant dans notre «Appliquer.js«Le fichier enregistrera le«Système de gestion des employés”Contenu à l'intérieur d'un conteneur:

importer './ Application.CSS ';
Function App ()
retour (

Système de gestion des employés

));

Exporter l'application par défaut;

À partir de l'image ci-dessous, vous pouvez voir que l'ajout "Système de gestion des employés”Contenu pour notre réaction.L'application JS est affichée avec succès:

C'était tout au sujet de la procédure de configuration de la réaction.Application JS sur côté client dans le développement de la pile Mern. Vous pouvez faire une personnalisation supplémentaire en fonction de vos exigences.

Conclusion

Mern Stack est un puissant cadre d'application Web utilisé pour créer des sites Web et des applications modernes. Il comprend la réaction.JS pour développer le front-end, l'express et le nœud.JS pour créer le backend et la base de données MongoDB pour maintenir la base de données. Cet article a démontré comment commencer avec la pile Mern. Chaque procédure est fournie, de la configuration de la réaction.Application et nœud JS.JS Server à la connexion du serveur à la base de données MongoDB.