mernboilerplate antd
1.0.0
En este repositorio seguiré agregando las mejores prácticas de producción que debemos seguir en un proyecto MERN (MongoDB, Express.js, React.js y Node.js). Además, para una mejor experiencia de usuario, estoy usando Antd Pro para la interfaz de usuario. Quizás más adelante también use MUI.
A continuación se muestra un ejemplo de una página de lista de muestra:
Como sugiere el nombre, este repositorio está construido sobre Express.js y React.js; sin embargo, en los detalles de implementación, también encontraremos otras tecnologías de soporte.
Los detalles de los marcos y paquetes se pueden encontrar en los archivos package.json en el directorio del servidor y del cliente.
Este proyecto se puede ejecutar básicamente de dos maneras. Una es usar Docker, la otra forma es ejecutarla manualmente a través de vscode.
Dependiendo de la opción de alojamiento de MongoDB, elegimos el archivo docker-compose apropiado.
Actualmente tenemos dos archivos docker-compose:
docker-compose.mongocloud.yml : clúster alojado en MongoDB.comdocker-compose.yml : contenedor local de MongoDB MONGODB_CLOUD_URL en docker-compose.mongocloud.yml a la URL de MongoDB adecuada.REACT_APP_API_URL en docker-compose.yml a la URL de API adecuada. Si queremos exponer nuestro cliente a Internet, debemos cambiar REACT_APP_API_URL a la URL de API adecuada. De lo contrario, mantenga REACT_APP_API_URL como http://localhost:8002 .Ejecute comandos de Docker-Compose
Se espera que la máquina tenga instalado Docker y Docker-Compose. Vaya a la raíz del repositorio y ejecute los comandos apropiados. Esto activará los contenedores del servidor y del cliente junto con el contenedor MongoDB (si estamos usando el servidor MongoDB local) dentro del entorno Docker.
Uso de contenedores acoplables con MongoDB alojado en la nube
> cd project-root
> docker-compose -f docker-compose.mongocloud.yml build
> docker-compose -f docker-compose.mongocloud.yml upUsando contenedores acoplables con MongoDB local
> cd project-root
> docker-compose build
> docker-compose upTanto el cliente como el servidor están en funcionamiento y deberíamos ver la siguiente pantalla si navegamos a la URL del cliente.
datos semilla Vaya dentro del contenedor acoplable y ejecute los siguientes comandos. Estos generarán la base de datos con roles , users y datos products .
docker exec -it appserver bash
npm run db:seed
npm run db:migrate Deberías ver el siguiente resultado: 
Ahora debería iniciar sesión en la aplicación y ver la lista de productos.
Para ejecutar a través de vscode, debemos ejecutar los proyectos del lado del servidor y del cliente por separado, y también asegurarnos de que mongodb esté en funcionamiento.
Cree un archivo .env dentro del directorio server . Agregue las siguientes entradas o cámbielas en consecuencia. Puede seguir el archivo .env.sample para ver el formato.
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
Suponemos que ejecutamos MongoDB en el contenedor acoplable.
cd server
npm i
npm run db:up
npm start cd client-pro
nvm use --lts
yarn
yarn startPara inicializar la base de datos, necesitamos ejecutar los siguientes comandos en el contenedor de la ventana acoplable. También puede ejecutar estos comandos en la terminal si está ejecutando el servidor y el cliente fuera del entorno de Docker. Supongo que estamos ejecutando el servidor de aplicaciones en el contenedor acoplable.
docker exec -it appserver bash
npm run db:seed
npm run db:migrate Debería poder ver el nombre de usuario y la contraseña en el archivo /server/setup/users.json .
He introducido una interfaz de usuario de gestión de permisos para la aplicación. A continuación se muestra una imagen de muestra.
Sentry.io También podemos enviar los registros a sentry.io. Para usar esta función, necesitamos agregar la entrada dsn en client/src/env.config.js . El fragmento de configuración es como el siguiente en el archivo index.js
Sentry . init ( {
dsn : Config . dsn ,
integrations : [ new Integrations . BrowserTracing ( ) ] ,
tracesSampleRate : 1.0 ,
} ) ; server de prueba Para ver la API, abra su navegador y visite http://localhost:5000/api-docs Idealmente, deberíamos agregar todos los puntos finales de la API al swagger, pero para fines de demostración, solo agregamos el punto final de la API de Productos.
Para probar las API, podemos reutilizar la colección de cartero. Abra docs/rbac-mern-boilerplate.postman_collection.json en Postman y debería ver los puntos finales con las cargas útiles adecuadas.
| Proyecto | Dominio | Tarea |
|---|---|---|
| raíz | npm run build | Construye los contenedores |
| raíz | npm run start | Inicie los proyectos y la base de datos en contenedores acoplables. |
| raíz | docker exec -it appserver /bin/sh luego npm run db:seed | Ejecuta productos de semillas dentro del contenedor. |
| servidor | npm i | Instalar dependencias del lado del servidor |
| servidor | npm run db:up | Inicie la base de datos en un contenedor acoplable |
| servidor | npm run test | Ejecutar pruebas usando jest |
| cliente | npm i | Instalar dependencias del lado del cliente |
| cliente | npm run start | Inicie la aplicación de reacción |
| cliente | npm run build | Cree la aplicación de reacción en modo de producción |
| cliente | npm run test | Ejecutar pruebas usando Testing Library |
En este repositorio, hemos incluido pruebas unitarias y pruebas de integración. Por ahora, la cobertura del código es muy baja, pero estamos trabajando en ello para que supere el 90 % en algún momento en el futuro.
localStorage y axios . Para ejecutar las pruebas, podemos ejecutar el comando npm run test .
Jest como biblioteca de pruebas y hemos agregado paquetes supertest y mongodb-memory-server para facilitar las pruebas de integración.Jest para probar las capas de servicio y burlarnos de las dependencias externas como MongoDB . Para ejecutar las pruebas, podemos ejecutar el comando npm run test .
Este proyecto tiene licencia del MIT.
Por ahora, no acepto ninguna contribución de la comunidad en términos de código. Pero si tiene alguna sugerencia o encontró algún error, no dude en abrir un problema o una solicitud de extracción.
Por otro lado, si desea saber algo o iniciar una discusión sobre este proyecto, inicie una discusión en nuestro foro de discusión de GitHub.
He estado grabando en pantalla los pasos de codificación de este proyecto. Puedes encontrar los vídeos en la lista de reproducción de YouTube. Estos videos están solo en bengalí , pero me complace realizar sesiones especiales dedicadas y pagas en inglés para una audiencia internacional interesada. No dudes en comunicarte conmigo en [email protected] para cualquier tipo de ayuda.
Gracias. Salud.
