mernboilerplate antd
1.0.0
在此存储库中，我将继续添加我们在 MERN（MongoDB、Express.js、React.js 和 Node.js）项目中应遵循的生产最佳实践。另外，为了更好的用户体验，我使用 Antd Pro 作为 UI。可能以后我也会使用MUI。
以下是示例列表页面的示例：
顾名思义，这个存储库构建在 Express.js 和 React.js 之上，但是在实现细节中，我们还会发现其他支持技术。
详细的框架和包可以在服务器和客户端目录中的 package.json 文件中找到。
该项目基本上可以通过两种方式运行。一种是使用docker，另一种方式是通过vscode手动运行。
根据 MongoDB 托管选项，我们选择适当的 docker-compose 文件。
目前我们有两个 docker-compose 文件：
docker-compose.mongocloud.yml - MongoDB.com 托管集群docker-compose.yml - 本地 MongoDB 容器docker-compose.mongocloud.yml中的MONGODB_CLOUD_URL更改为适当的 MongoDB URL。docker-compose.yml中的REACT_APP_API_URL更改为适当的 API URL。如果我们想将客户端暴露给互联网，我们需要将REACT_APP_API_URL更改为适当的 API URL。否则，将REACT_APP_API_URL保留为http://localhost:8002 。运行 docker-compose 命令
预计机器必须安装 docker 和 docker-compose。转到存储库的根目录并执行适当的命令。这将在 Docker 环境中启动服务器和客户端容器以及 MongoDB 容器（如果我们使用本地 MongoDB 服务器）。
将 docker 容器与云托管的 MongoDB 结合使用
> cd project-root
> docker-compose -f docker-compose.mongocloud.yml build
> docker-compose -f docker-compose.mongocloud.yml up将 docker 容器与本地 MongoDB 结合使用
> cd project-root
> docker-compose build
> docker-compose up客户端和服务器都已启动并正在运行，如果我们导航到客户端 URL，我们应该会看到以下屏幕。
种子数据 进入 docker 容器内部并执行以下命令。这些将为数据库播种roles 、 users和products数据。
docker exec -it appserver bash
npm run db:seed
npm run db:migrate您应该看到以下输出：
您现在应该登录到应用程序并查看产品列表。
要通过 vscode 运行，我们应该分别运行服务器端和客户端项目，并确保 mongodb 已启动并运行。
在server目录内创建一个.env文件。添加以下条目或进行相应更改。您可以按照.env.sample文件查看格式。
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
我们假设我们在 docker 容器中运行 MongoDB。
cd server
npm i
npm run db:up
npm start cd client-pro
nvm use --lts
yarn
yarn start要为数据库做种，我们需要在 docker 容器中运行以下命令。如果您在 docker 环境之外运行服务器和客户端，您也可以在终端中运行这些命令。我假设我们正在 docker 容器中运行 appserver。
docker exec -it appserver bash
npm run db:seed
npm run db:migrate您应该能够在/server/setup/users.json文件中看到用户名和密码。
我为应用程序引入了权限管理用户界面。下面给出了示例图像。
Sentry.io我们还可以将日志发送到sentry.io。要使用此功能，我们需要将dsn条目添加到client/src/env.config.js中。设置片段如下所示在index.js文件中
Sentry . init ( {
dsn : Config . dsn ,
integrations : [ new Integrations . BrowserTracing ( ) ] ,
tracesSampleRate : 1.0 ,
} ) ; server API要查看 api，请打开浏览器并访问http://localhost:5000/api-docs理想情况下，我们应该将所有 API 端点添加到 swagger 中，但出于演示目的，我们仅添加了 Products API 端点。
为了测试 API，我们可以重用 postman 集合。在 Postman 中打开docs/rbac-mern-boilerplate.postman_collection.json ，您应该会看到具有适当负载的端点。
| 项目 | 命令 | 任务 |
|---|---|---|
| 根 | npm run build | 构建容器 |
| 根 | npm run start | 在docker容器中启动项目和数据库 |
| 根 | docker exec -it appserver /bin/sh然后npm run db:seed | 在容器内执行种子产品 |
| 服务器 | npm i | 安装服务器端依赖项 |
| 服务器 | npm run db:up | 在docker容器中启动数据库 |
| 服务器 | npm run test | 使用jest执行测试 |
| 客户 | npm i | 安装客户端依赖项 |
| 客户 | npm run start | 启动反应应用程序 |
| 客户 | npm run build | 在生产模式下构建 React 应用程序 |
| 客户 | npm run test | 使用Testing Library执行测试 |
在此存储库中，我们包含了单元测试和集成测试。目前，代码覆盖率还很低，但我们正在努力使其在未来某个时候达到 90% 以上
localStorage和axios 。要运行测试，我们可以运行npm run test命令。
Jest作为测试库，并添加了supertest和mongodb-memory-server包，使集成测试更容易。Jest来测试服务层并模拟MongoDB等外部依赖项。要运行测试，我们可以运行npm run test命令。
该项目已获得麻省理工学院许可。
目前，我不会在代码方面接受任何社区贡献。但如果您有任何建议或发现任何错误，请随时提出问题或拉取请求。
另一方面，如果您想了解一些信息，或者想开始讨论这个项目，请在我们的 GitHub 讨论区开始讨论。
我一直在屏幕录制这个项目的编码步骤。您可以在 YouTube 播放列表中找到这些视频。这些视频只有孟加拉语，但我很高兴为国际感兴趣的观众提供特别的专用+付费英语课程。如需任何帮助，请随时通过 [email protected] 与我联系。
谢谢。干杯。
