Как организовать файловую структуру бэкэнда и фронтэнда в MERN

Question

У меня есть бэкэнд на основе экспресс + мангуст. Файловая структура:

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

И обычная папка, основанная на создании реакции, для внешнего интерфейса:

- /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. Каким должен быть package.json и где должен быть node.modules (должен ли сервер и клиент иметь свой собственный package.json и модули?)

Answer 1

В дополнение к принятому ответу разделение структуры папок внутри внешнего интерфейса и внутреннего интерфейса более полезно, если оно основано на бизнес-логике, а не на технической логике.

Разделение всего стека на автономные компоненты, которые предпочтительно не делят файлы между ними, - лучший способ сделать ваше приложение более тестируемым и простым в обновлении. Это в наименьшей степени возможно то, что обычно называют микросервисной архитектурой.

Плохой дизайн: сложно обновить и проверить :

Хороший дизайн: легко обновлять и тестировать :

Answer 2

Основной структурой будет папка root, содержащая папки frontend и backend. Поскольку вы говорите о стеке MERN , у вас будет package.json внутри вашей NodeJS бэкэнд-среды и package.json для вашего React сторона вещей. Внутренний сервер и клиент внешнего интерфейса - это две совершенно разные вещи, так что да, у них обоих есть свои собственные папки node_modules. На бэкэнде вы, вероятно, установили что-то вроде Express для своей среды выполнения Node, Mongoose для более удобного способа общения с MongoDB и т. Д., А на вашем интерфейсе у вас будет React как ваш интерфейс, Redux для управления состоянием и т. д. Кроме того, в зависимости от того, что вы уже перечислили в своих файлах package.json, при запуске npm install отдельно он будет установлен в эти две папки. Если вы хотите установить дополнительные пакеты, просто запустите npm install + "the name of the package" (без «+» и без кавычек) внутри той конкретной папки, где вам это нужно (бэкэнд или / и внешний интерфейс).

Надеюсь, это было полезно. Посмотрите фотографии, особенно 2-й.

Структура приложения

Структура папок

UPDATE:

В разработке я предлагаю установить две дополнительные вещи:

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
  }

Если вы сохранили структуру папок, установили все зависимости (включая две дополнительные, которые я упомянул выше), изменили файл package.json на своем бэкэнде, вы сможете запустить их обе с помощью простой команды:

npm run dev