mernboilerplate antd
1.0.0
このリポジトリでは、MERN (MongoDB、Express.js、React.js、および Node.js) プロジェクトで従うべき運用のベスト プラクティスを追加し続けます。また、UX を向上させるために、UI に Antd Pro を使用しています。後で MUI も使用するかもしれません。
以下はサンプル リスト ページのサンプルです。
名前が示すように、このリポジトリは Express.js と React.js の上に構築されていますが、実装の詳細では、他のサポート テクノロジも見つかります。
フレームワークとパッケージの詳細は、サーバーおよびクライアント ディレクトリの package.json ファイルにあります。
このプロジェクトは基本的に 2 つの方法で実行できます。 1 つは docker を使用する方法、もう 1 つは vscode を介して手動で実行する方法です。
MongoDB ホスティング オプションに応じて、適切な docker-compose ファイルを選択します。
現在、2 つの 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 サーバーを使用している場合) とともにスピンアップされます。
クラウドでホストされている MongoDB で Docker コンテナを使用する
> cd project-root
> docker-compose -f docker-compose.mongocloud.yml build
> docker-compose -f docker-compose.mongocloud.yml upローカル MongoDB での Docker コンテナの使用
> 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
MongoDB を Docker コンテナーで実行すると仮定します。
cd server
npm i
npm run db:up
npm start cd client-pro
nvm use --lts
yarn
yarn startデータベースをシードするには、Docker コンテナーで次のコマンドを実行する必要があります。サーバーとクライアントを Docker 環境の外で実行している場合は、ターミナルでもこれらのコマンドを実行できます。 appserver を Docker コンテナ内で実行していると仮定します。
docker exec -it appserver bash
npm run db:seed
npm run db:migrate /server/setup/users.jsonファイルでユーザー名とパスワードを確認できるはずです。
アプリケーションの権限管理 UI を導入しました。サンプル画像を以下に示します。
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 コレクションを再利用できます。 docs/rbac-mern-boilerplate.postman_collection.jsonを Postman で開くと、適切なペイロードを持つエンドポイントが表示されるはずです。
| プロジェクト | 指示 | タスク |
|---|---|---|
| 根 | 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コマンドを実行します。
このプロジェクトは MIT ライセンスを受けています。
今のところ、私はコードに関してコミュニティへの貢献を受け付けていません。ただし、ご提案がある場合やバグを見つけた場合は、お気軽にイシューまたはプル リクエストを開いてください。
一方、何か知りたい場合、またはこのプロジェクトについてディスカッションを開始したい場合は、GitHub のディスカッション ボードでディスカッションを開始してください。
このプロジェクトのコーディング手順を画面録画してきました。ビデオは YouTube プレイリストで見つけることができます。これらのビデオはバングラ語のみですが、興味のある国際的な視聴者のために英語で特別な有料セッションを喜んで受講します。何かサポートが必要な場合は、お気軽に [email protected] までご連絡ください。
ありがとう。乾杯。
