web-dev-qa-db-ja.com

MERNでバックエンドとフロントエンドのファイル構造を整理する方法

エクスプレス+マングースに基づいたバックエンドがあります。ファイル構造は次のとおりです。

- /models
-- item.js
- /node.modules
-- ...
- server.js
- package-lock.json
- package.json

フロントエンド用の通常のcreate-react-appベースのフォルダー：

- /src
-- /assets
--- index.css
-- /components
--- Somecomponent.js
-- /containers
--- App.js
-- /reducers
--- somereducers.js
- /node.modules
-- ...
-- index.js
-- registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json

一緒に適切に使いたいです。このように整理したかったのです。

- /client 
-- /src
...
-- index.js
-- registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json

- /server
- /models
-- item.js
- /node.modules
-- ...
- server.js
- package-lock.json
- package.json

この段階で立ち往生しました。クライアントフォルダーがサーバーフォルダー内にある場合、またはサーバーフォルダーがクライアント内にある場合に作成できます。 1.しかし、2つのフォルダーが兄弟であるときに実行する方法は？ 2. package.jsonの内容とnode.modulesの場所（サーバーとクライアントの両方が独自のpackage.jsonとモジュールを持っている必要がありますか？）

node.jsreactjsexpressnpm
17
Angelzzz

最も基本的な構造は、rootおよびfrontendフォルダーを含むbackendフォルダーを持つことです。 [〜＃〜] mern [〜＃〜]スタックについて話しているので、内部にpackage.jsonがあります。あなたのNodeJSバックエンド環境とReactの側のpackage.jsonバックエンドサーバーとフロントエンドクライアントはまったく別のものであるため、はい、両方とも独自のnode_modulesフォルダーを持っています。バックエンドでは、おそらくNode runtime、Expressのような便利な方法でMongooseにMongoDBのようなものをインストールしているでしょう。など、フロントエンドには、フロントエンドフレームワークとしてReact、状態管理などのためにReduxがあります。さらに、package.jsonファイル内に既にリストされているものに応じて、npm installseparatelyを実行すると、これらの2つのフォルダーにインストールされます。追加のパッケージをインストールする場合は、npm install + "the name of the package"（ '+'と引用符）が必要な特定のフォルダー内（バックエンドまたはフロントエンド）。

これがお役に立てば幸いです。写真、特に2番目の写真をチェックしてください。

アプリの構造
enter image description here

フォルダ構造

enter image description here

PDATE：

開発では、2つの追加のものをインストールすることをお勧めします。

  1. npm i nodemon
  2. npm i concurrently

Nodemonはすべてのファイルの変更を追跡し、concurrentlyを使用すると、フロントエンドとバックエンドの両方を同時に起動できます。たとえば、あなたのpackage.jsonファイルに移動してbackendフォルダーに移動し、次のように開始セクションを編集できます。

"scripts": {
    "start": "node app.js",   // whatever is your backend starting point
    "backend": "nodemon app.js",   // to start the node development server
    "frontend": "npm run start --prefix frontend", // it goes insede of the client folder and starts the React server
    "dev": "concurrently \"npm run backend\" \"npm run frontend\""  // with this command you'll be able to start them both at once
  }

フォルダー構造を保持し、すべての依存関係（上記の2つを含む）をインストールし、バックエンドのpackage.jsonファイルを変更した場合、簡単なコマンドで両方を開始できます。

npm run dev

28
Bigga_HD

受け入れられた答えに加えて、フロントエンドおよびバックエンド内のフォルダー構造区分は、技術ロジックではなくビジネスロジックに基づいている場合により便利です。

スタック全体を、できればそれらの間でファイルを共有しない自己完結型のコンポーネントに分割することが、アプリをよりテストしやすく、更新しやすくするための最良の方法です。これは可能な限り最小の方法で、一般にマイクロサービスアーキテクチャとして知られているものです。

悪いデザイン：更新とテストが難しい：
Bad Design for folder structure

グッドデザイン：更新とテストが簡単：

Good Design for folder structure

7
Saurabh Ariyan