Как укомплектовать Node + React приложение в общий Workspace?

Question

[Persotr27]

Всем привет.
Не знаю как корректно сформулировать свою потребность, но мне нужно создать Web-приложение с React.js на фронте, и Node.js (Express.js) на бэке. Необходимо, чтобы эта сборка считалась единым целым приложением и находилась в одной папке. Также, чтобы можно было запушить в один git репозиторий и задеплоить на единый хостинг (как единый целый апп).
Нужно ли вообще так поступать, или проще стоит создать два отдельных приложения для фронта и бэка? И если да, то как такое реализовать?

Comments

[legacy_js]

Посмотрите этот ролик, может поможет

Answer 1

[iamsergo]

Чтобы создать все в одной папке, можно сделать следующим образом:
1. Написать фронтенд на react.
2. Написать бекенд на node.

После чего, собрать frontend с помощью webpack (он соберется в папку public, точно не помню).
Далее в node возвращать как статику эту папку : app.use(express.static('path.resolve(__dirname,'./public')))
Далее, я заливал на heroku и все работало.

Чтобы реализовать в двух папках, можно сделать так:
1. Написать фронтенд в одной папке.
2. Написать бекенд в другой.

Соединятся они будут по api - из приложения react шлете запросы на бекенд, получаете данные, работаете с ними:
BASE_URL = 'heroku.com/app/my-app-1233'
fetch(`${BASE_URL}/api/todos/1')

Размещаете отдельно фронетнд, отдельно бекенд.
Я размещал фронетенд на github-pages, бекенд на heroku.

Возможно, я где-то ошибаюсь, но суть точно такая.

Comments

[Persotr27]

В общем не знаю, может более опытные пользователи Webpack'a и смогут прийти к решению данным способом, через папку public, у меня получилось слегка по-другому.

Через create-react-app:

1. Создать папку со всем (back + front) приложением ("project") внутрии нее запилить react приложение через create-react-app <name>.
   
2. В Workspacе'e новосозданного реакт приложения, которое находится по пути project/name выполнить билд (npm run build)
   
3. Потом, как статику указать путь именно к этой build папке:
   

   express.static(path.join(__dirname, "../<name>/build"))

   
   

Финальная структура выглядит так:
Прошу заметить, что верхняя папка public - папка с реакт-приложением, (мой name), внутри которой есть папка build, которая используется как статика.
Сам запускной файл сервера "app.js" находится в папке src на одном уровне с public.

Не уверен, что это метод валидный и эталонный, но тем не менее, желаемый эффект достигается. Если нужны более принятые и проверенные способы, стоит поискать в других источниках наверное, и по возможности, описать их здесь :]

Answer 2

[Иван Шумов]

Зависит от сложности. С маленькими проектами можно поступать как угодно. С большими - придётся разделять в любом случае

Answer 3

[7GIT]

Разделяй и властвуй.