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] 與我聯繫。
謝謝。乾杯。
