Cómo comenzar con Mern Stack

Mern Stack es un conjunto de tecnologías confiables y potentes que se pueden utilizar para desarrollar aplicaciones web escalables. Esta aplicación web comprende una base de datos front-end, back-end y de datos para almacenar los datos. Es un marco JavaScript completo utilizado para crear sitios web y aplicaciones fáciles de usar.

Para comenzar con la pila de Mern, necesitamos hacer lo siguiente, configurar el servidor de nodo, crear una base de datos MongoDB y establecer una conexión con el servidor de nodo. El tercer y el paso más importante es construir el front-end reaccionar.aplicación JS. Este artículo le mostrará cómo realizar todas estas operaciones. Antes de avanzar, discutamos los componentes mencionados de la pila de Mern.

Componentes de Mern Stack

• js se considera el nivel superior en el desarrollo de Mern Stack. Es un declarativo Marco de JavaScript Se utiliza para desarrollar aplicaciones dinámicas del lado del cliente. También le permite crear interfaces complejas conectando los componentes de sus datos desde el servidor de backend y luego los convierte en HTML. React también se destaca en el manejo de interfaces basadas en datos y con estado con un código mínimo y otras funcionalidades, como manejo de errores, listas, formularios, eventos, que espera de un marco web moderno.
• Si desea desarrollar una aplicación basada en Pila que guarda cualquier forma de datos, como eventos, comentarios, perfiles de usuario, contenido y cargas, necesitará una base de datos simple para usar con el front-end y el back-end. Esta es la situación donde Mongodb entra en juego. En la reacción.js front -end, los documentos JSON creados se envían al expreso.JS y el nodo.servidor JS, procesarlos y almacenarlos en la base de datos MongoDB.
• En Desarrollo de Mern Stack, el nivel que está presente entre la base de datos MongoDB y el reaccionamiento.JS Front-end es el "js". Se puede describir como un marco web minimalista, sin opinuar y rápido para el nodo.js. Expresar.JS Framework opera el nodo.servidor js dentro de él. Puedes conectarte al expreso.JS funciona desde su aplicación front-end enviando las solicitudes de publicaciones, gets o http. Estas funciones especificadas se utilizan para cambiar o acceder a los datos de MongoDB a través de promesas o devoluciones de llamada. Expresar.JS también ofrece modelos poderosos para manejar respuestas HTTP, solicitudes y enrutamiento de URL.

Ahora, comencemos con Mern Stack!

Cómo configurar el servidor de nodo en el desarrollo de Mern Stack

Para configurar el servidor de nodo en el desarrollo de Mern Stack, lo primero que debe hacer es descargar Node.JS en su sistema a través de su sitio web oficial:

A continuación, use el archivo descargado para completar la instalación de nodo.JS y después de completar la operación especificada, ejecute el siguiente solicitado en su símbolo del sistema:

> nodo -v

El anterior "nodo"Comando con el"-V"La opción imprimirá la versión actual del"Nodo.js"Que está instalado en su sistema:

Después de instalar nodo.JS, avanzaremos hacia el procedimiento de desarrollo del servidor. Para este propósito, en primer lugar, crearemos una carpeta base y luego instalaremos todos los paquetes o dependencias requeridos para el desarrollo del servidor de nodo.

Para la operación especificada, puede usar también el símbolo del sistema. Sin embargo, utilizaremos el "Código de Visual Studio"Terminal, que también facilitará el trabajo en los archivos del servidor de nodo.

En el siguiente paso, abriremos nuestra carpeta base usando el "Carpeta abierta"Opción del"Archivo"Menú:

Hemos seleccionado el "Empleado-Mern-ProyectoCarpeta para almacenar los archivos relacionados con el servidor de nodo de la pila MERN:

Ahora presiona "Ctrl+Shift+'”Para abrir una nueva ventana de terminal en el código de Visual Studio. También puede utilizar el menú "Terminal" para este propósito:

En el siguiente paso, crearemos un "backend"Carpeta dentro de nuestro"Empleado-Mern-Proyecto"Carpeta raíz o base. Para hacer lo mismo, puede ejecutar el siguiente "mkdir"Comando en el terminal abierto:

> backend mkdir

Después de hacerlo, pasaremos al recién creado "backend"Carpeta para agregar el archivo y los paquetes relacionados con el servidor en él:

> Backend de CD

Dentro del "backend"Carpeta, ahora crearemos un"paquete.json" archivo. El paquete.El archivo JSON es el elemento central de un servidor de nodo en el desarrollo de la pila MERN. Comprende los metadatos de su proyecto Mern Stack y también define los atributos funcionales que luego pueden ser utilizados por el NPM para ejecutar scripts e instalar dependencias.

Para crear un nuevo paquete.Archivo JSON Para su servidor de nodo, escriba el siguiente comando:

> npm init -y

Cómo instalar dependencias para el servidor de nodo en el desarrollo de Mern Stack

Esta sección demostrará el procedimiento de instalar dependencias esenciales como "expresar","CORS","mangosta", y "dotenv"Para su servidor de nodo en el desarrollo de Mern Stack. El administrador de paquetes de nodo o "npm"Se puede usar para instalar las dependencias especificadas de la siguiente manera:

> NPM Instalar Express Cors Mongoose Dotenv

Aquí:

• "Express" se agrega para instalar "Express", que es un marco web ligero para el nodo.js. También tiene la capacidad de admitir muchos artículos intermedios que ayudan a hacer que el código sea más fácil y más corto de escribir.
• "Cors" es un acrónimo para compartir recursos de origen cruzado. Este paquete permite las solicitudes de AJAX acceder a los recursos desde los hosts remotos.
• Se agrega "Mongoose" para instalar el paquete "Mongoose". El paquete Mongoose ayuda al servidor de nodo a interactuar con MongoDB en el desarrollo de Mern Stack.
• Por último, el paquete "dotenv" cargará las variables de entorno del ".env "al" proceso.archivo env ”. También administra las credenciales de la base de datos en un entorno colaborativo.

Para nuestro servidor de nodo, otro paquete que vamos a instalar es "nodemon". Reinicia automáticamente la aplicación de nodo cuando realizó algunos cambios en el archivo al desarrollar el nodo.Aplicación basada en JS:

> SUDO NPM Install -g Nodemon

Cómo ejecutar el servidor de nodo en el desarrollo de Mern Stack

Hasta este punto, hemos instalado el nodo.JS y los paquetes y dependencias requeridos. Ahora es el momento de crear y ejecutar el nodo de backend.servidor JS. Para hacerlo, haga clic en el "backend"Carpeta, y en el menú desplegable, seleccione"Archivo nuevo" opción:

Aquí, puedes un nuevo "servidor.js"El archivo JavaScript se agrega en la carpeta de backend:

Ahora, en el "servidor.js"Archivo, crearemos un"expresar"Servidor, luego adjuntaremos el"expresar.json"Middleware y"CORS". El "expresar.json"El middleware se utilizará para enviar y recibir" JSON ". Además, el nodo.El servidor JS podrá escuchar en el "5000" puerto:

const express = require ('express');
const cors = require ('cors');
Requerir ('Dotenv').config ();
const app = express ();
Const Port = Proceso.envidia.Puerto || 5000;
aplicación.use (cors ());
aplicación.Usar (Express.json ());
aplicación.escuchar (puerto, () =>
consola.log ('Server se ejecuta en el puerto: $ puerto');
);

Después de agregar el código anterior en el "servidor.js"Archivo, presione"Ctrl+S"Para guardar los cambios y luego ejecute su servidor de nodo usando"nodemon":

> servidor de nodemon

Desde la salida, puede ver que nuestro servidor se ejecuta correctamente en el puerto "5000":

Después de ejecutar con éxito el nodo.servidor JS En el puerto especificado, avance hacia el proceso de conexión del nodo.servidor JS a la base de datos MongoDB. Para eso, primero debe crear una cuenta de MongoDB.

Cómo crear una base de datos MongoDB en el desarrollo de Mern Stack

En el desarrollo de Mern Stack, tener una cuenta de base de datos MongoDB es imprescindible. La creación de una cuenta de MongoDB le permite crear una base de datos de acuerdo con sus requisitos. Después de eso, puede agregar un "Grupo"A la recién creada base de datos y generar una cadena de conexión, que lo ayudará a conectar el nodo.servidor JS a la base de datos MongoDB. Entonces, comencemos este procedimiento avanzando hacia el sitio web oficial de MongoDB:

Ahora, cree una cuenta para alojar la base de datos en el "MongoDB Atlas":

Verá el tablero de abajo hacia abajo después de la creación de cuenta de MongoDB. Ahora, haga clic en el "Nuevo proyectoBotón "que se encuentra en el lado derecho del tablero:

En el campo de entrada resaltado, ingrese el nombre de su proyecto MongoDB y haga clic en el "Próximo" botón:

En este punto, se crea su proyecto MongoDB y está todos listo para crear una nueva base de datos:

En el siguiente paso, seleccione el proveedor y la zona para su base de datos. Por ejemplo, hemos seleccionado "Google Cloud"Como proveedor de nubes y"bajo"Como nuestra región. También se recomienda elegir un nivel gratuito que resulte ideal para un entorno de sandbox.

Después de seleccionar las opciones requeridas, haga clic en el "Crear clústerBotón para avanzar:

Para mantener la seguridad de MongoDB, elija una opción entre "Nombre de usuario y contraseña" y "Certificado”Para autenticar la conexión desde o hacia el nodo.js. En nuestro caso, hemos agregado el nombre de usuario y la contraseña:

Ahora, agregue sus direcciones IP a la MongoDB Whitelist. Esta opción permitirá que la dirección IP configurada acceda a los grupos del proyecto:

Después de configurar la dirección IP, haga clic en "Terminar y cerrar" botón:

En unos minutos, se aprovisionará el clúster creado de su proyecto MongoDB:

Cómo generar una cadena MongoDB para conectar el nodo.Servidor JS en el desarrollo de Mern Stack

Después de configurar el "Empleado-Mern-Proyecto"Base de datos, y la recién creada"Clúster", Ve a la "Implementaciones de bases de datosSección "y seleccione el clúster. Después de hacerlo, haga clic en el "ConectarBotón "que se resalta en la imagen dada a continuación:

Luego, se le pedirá que elija el método de conexión para cluster0. Queremos conectar nuestro nodo.Servidor JS a la base de datos MongoDB en el desarrollo de aplicaciones de la pila MERN, por lo que iremos con el "Conecte su aplicaciónOpciones:

A continuación, seleccione el "CONDUCTOR" y es "VERSIÓN"Y luego copie la cadena de conexión desde la parte inferior de la ventana:

Cómo conectar el nodo.Base de datos JS Server to MongoDB en el desarrollo de Mern Stack

En el desarrollo de la pila de Mern, para conectar el nodo.JS y la base de datos MongoDB, usaremos la cadena de conexión, que hemos copiado desde el "Conectarse a clúster0" ventana. Para hacerlo, abra el nodo.JS "servidor.jsArchivo "y asegúrese de que su servidor se esté ejecutando:

> Nodeman Server

En el siguiente paso, agregaremos "mangosta" biblioteca. El "mangosta"Nodo.La biblioteca JS ayuda a establecer una conexión entre el clúster y el nodo MongoDB.Servidor JS:

const mongoose = requirir ('mangoose');

Ahora, crearemos un separado ".envidia"Archivo para almacenar el Atlas MongoDB"Uri" o el "Cadena de conexión". Para este propósito, haga clic en el nodo.carpeta de servidor JS que es "backend"En nuestro caso, y luego crea un"Archivo nuevo":

Hemos nombrado el nuevo archivo como ".envidia":

Si no tiene la cadena de conexión, entonces cópiela desde la sección resaltada:

Luego, agregue la cadena de conexión copiada como "Atlas_uri" en el ".envidia" archivo:

Atlas_uri = MongoDB+srv: // linuxhint:@cluster0.8JDC7.mongodb.net/myfirstdatabase?Redrywrites = True & W = Mayoritary

En el agregado "Atlas_uri"Especifique su nombre de usuario y contraseña de MongoDB y presione"Ctrl+S"Para guardar los cambios adicionales:

Ahora, agregue el siguiente código en su nodo.JS "servidor" archivo:

const uri = proceso.envidia.Atlas_uri;
mangosta.conectar (uri);
Connection const = mongoose.conexión;
conexión.Once ('Open', () =>
consola.log ("Conexión de base de datos MongoDB establecida con éxito");
)

El código agregado intentará conectarse con el "MongoDB Atlas" usando "mangosta"Biblioteca y la altas_uri y si la conexión se establece, se imprimirá"Conexión de base de datos MongoDB establecida con éxito"En la ventana de la terminal:

Prensa "Ctrl+S”Para guardar los cambios adicionales y luego ejecute su nodo.Servidor JS:

> servidor de nodemon

La salida dada a continuación declara que hemos conectado con éxito nuestro nodo.Servidor JS a la base de datos MongoDB en el desarrollo de la pila MERN:

Ahora, verificaremos el método para configurar React.JS en el lado del cliente en el desarrollo de Mern Stack.

Cómo configurar reaccionar.JS en el lado del cliente en el desarrollo de Mern Stack

Para configurar reaccionar.JS En el lado del cliente en el desarrollo de Mern Stack, lo primero que debe hacer es seleccionar un directorio para la instalación del React.Proyecto basado en JS. Puedes usar el "Solicitante del sistema" para este propósito. Sin embargo, utilizaremos el "Código de Visual Studio"Terminal que también facilitará la operación con el React.aplicación JS.

Para hacerlo en primer lugar, buscaremos el "Código de Visual Studio"Aplicación y abrirla:

En la aplicación abierta, haga clic en el "Archivo"Opción de la barra de menú y seleccione el"Carpeta abierta" opción:

Ahora, busque la carpeta donde desee colocar su reaccionamiento.archivo relacionado con la aplicación JS. En nuestro caso, hemos seleccionado el "Empleado-Mern-Proyecto"Carpeta, presente en el"Disco local (E :)":

A continuación, presione "Ctrl+Shift+'"Para abrir la terminal de código de Visual Studio. También puede realizar la operación especificada con la ayuda del menú "Terminal":

En este punto, todos estamos listos para configurar el React.Aplicación JS en el desarrollo de Mern Stack. La ejecución del "NPX"Comando con el"crear"La opción te ayuda a crear un reaccionamiento.aplicación JS. Por ejemplo, el subterráneo "NPX"El comando creará un"MERN-EMSISTEMA"Reaccionar.Aplicación JS que tendrá todas las dependencias requeridas en su carpeta de proyecto:

> NPX Crear reaccion-app Mernemsystem

Espere unos minutos, ya que la instalación de los paquetes llevará algún tiempo:

La salida libre de error a continuación indica que hemos instalado con éxito el "MERN-EMSISTEMA"Reaccionar.Aplicación JS:

El código de Visual Studio cargará automáticamente la carpeta ReactJs-Application creada en él. Ahora, haremos algunos cambios en el "índice.html"Archivo del"MERN-EMSISTEMA"Reaccionar.Aplicación JS:

El "índice.html"Archivo de su reacción.La aplicación JS de alguna manera se verá así:

Aquí, "Aplicación reaccionar"Está representando el"título" de nuestro "MERN-EMSISTEMA" solicitud:

Utilizaremos el reaccionamiento creado.Aplicación JS para desarrollar un sistema de gestión de empleados con Mern Stack. Entonces, en primer lugar, cambiaremos el título de nuestro "MERN-EMSISTEMA"Reaccionar.Aplicación JS a "Sistema de gestión de empleados"Y guarda el abierto"índice.html" archivo:

En el siguiente paso, cambiaremos el directorio de trabajo actual a "MERN-EMSISTEMA"Usando el terminal:

> CD MERN-Emsystem

Ahora, escriba el a continuación "npmComando "para comenzar el desarrollo del servidor web:

> Inicio de NPM

Como puede ver en la salida que nuestro "MERN-EMSISTEMAEl proyecto se compila correctamente y está listo para ver en el navegador:

Escribiendo el "Localhost: 3000"En la barra de direcciones de nuestro navegador veremos la siguiente interfaz para el"MERN-EMSISTEMA"Reaccionar.Aplicación JS:

También puede agregar cambiar el contenido del "Aplicación.js"Archivo JavaScript para manejar o ver los componentes de su aplicación React:

Por ejemplo, agregando el siguiente código en nuestro "Aplicación.js"El archivo guardará el"Sistema de gestión de empleados"Contenido dentro de un contenedor:

importar './Aplicación.CSS ';
función app ()
devolver (

Sistema de gestión de empleados

);

Exportar aplicación predeterminada;

Desde la imagen dada a continuación, puede ver que el agregado "Sistema de gestión de empleados"Contenido para nuestro React.La aplicación JS se muestra correctamente:

Eso se trataba del procedimiento de configurar reaccionar.Aplicación JS en el lado del cliente en el desarrollo de Mern Stack. Puede realizar más personalización de acuerdo con sus requisitos.

Conclusión

Mern Stack es un poderoso marco de aplicaciones web utilizadas para crear sitios web y aplicaciones modernos. Comprende reaccionar.JS para desarrollar el front-end, express y nodo.JS para crear el backend y la base de datos de MongoDB para mantener la base de datos. Este artículo demostró cómo comenzar con Mern Stack. Se proporciona cada procedimiento, desde configurar el React.Aplicación y nodo JS.servidor js para conectar el servidor con la base de datos MongoDB.