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

質問

express + mongooseをベースにしたバックエンドを持っています。ファイル構成は以下の通りです。

- /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. 2.package.jsonは何で、node.modulesはどこにあるべきか（サーバーとクライアントの両方がそれ自身のpackage.jsonとモジュールを持つべきかどうか）？

どのように解決するのですか？

最も基本的な構造としては root フォルダがあり、その中に frontend と backend フォルダーを使用します。あなたが話しているのは MERN をスタックすると package.json の中に NodeJS バックエンド環境と package.json を使用します。 React 側のものです。バックエンドサーバとフロントエンドクライアントは2つの全く別のもので、そう、両方とも独自の node_modules フォルダを持っています。バックエンドでは、おそらく次のようなものがインストールされているでしょう。 Express のようなものをインストールしているでしょう。 Mongoose と話すより便利な方法です。 MongoDB などを使用し、フロントエンドでは React をフロントエンドのフレームワークとして使用します。 Redux で状態管理を行う、などです。さらに、package.json ファイルに記述した内容に応じて npm install 別途 を実行すると、この2つのフォルダにインストールされます。もし、追加のパッケージをインストールしたい場合は npm install + "the name of the package" (を実行してください（'+'と引用符を使用しないでください）。

お役に立ったでしょうか？写真、特に2枚目をご覧ください。

アプリの構造

フォルダの構造

UPDATEです。

開発では、さらに2つのことをインストールすることを提案します。

1. npm i -D nodemon
2. npm i -D concurrently

注 -D フラグを指定すると、それらを devDependencies .

nodemon はすべてのファイルの変更を追跡し、あなたのためにバックエンドサーバを再起動するつもりです。ですから、それが "backend" フォルダの中にインストールされなければならないことは明らかです。あなたがしなければならないことは、バックエンドフォルダ内の package.json ファイル(backend)の中に入って、新しいスクリプトを追加するだけです。このようなものです。

"scripts": {
"start": "node app.js",  // in production
"dev": "nodemon app.js", // in development
}

concurrently を使えば、フロントエンドとバックエンドの両方を同時に起動することができます。私はトップレベルの ルート フォルダー -[フロントエンドとバックエンドの両方を含むフォルダー]の中で新しいNodeプロジェクトを初期化することをお勧めします。そのためには npm init コマンドで行い、その後に concurrently パッケージをインストールします。

さて、新しく作成した package.json ファイルを ルート フォルダを開き、開始部分をこのように編集します。

   "scripts": {
       "dev": "concurrently \"cd backend && npm run dev\" \"cd frontend && npm start\" "
   }

これは バックエンド フォルダの中に入って dev コマンドを実行します ( 先ほど設定したものと同じ ) が起動するので nodemon . さらに、それは フロントエンド フォルダの中に入り、デフォルトの start コマンドを実行します -これはまさに私たちが欲しいものです。

フォルダー構造を維持し、すべての依存関係 (上記で述べた追加の 2 つを含む) をインストールした場合、 コマンドを変更し、 コマンドを削除します。 package.json ファイル内を root フォルダにあるファイルから、簡単なコマンドで両方を起動できるようになります。

npm run dev // このとき、ルートフォルダ内であることを確認してください。）