Можно ли обслуживать компонент / приложение React на стороне клиента в экспресс-маршруте на стороне сервера?

У меня есть серверная часть Node / Express, которая использует Pug.js для рендеринга ряда маршрутов на стороне сервера. Приложение на данный момент статично и представляет собой простой сайт.

Я создал интерактивный компонент-конструктор в React.js с помощью CRA. Это позволяет посетителю сайта настраивать продукт в интерактивном режиме. Конечная цель такова:

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

Я искал несколько дней и, возможно, просто не понимаю, что я вижу. Я не уверен, что рендеринг на стороне сервера или проксирование помогут мне? Я пробовал прокси CRA и не получил результата.

Изображение структуры папки:

Можно ли обслуживать компонент / приложение React на стороне клиента в экспресс-маршруте на стороне сервера?

Если кому-то нужна дополнительная информация или он может указать несколько ресурсов, это будет очень полезно.

Я все еще учусь, поэтому прошу прощения, если это нарушает какие-либо рекомендации SO.

заранее спасибо

🤔 А знаете ли вы, что...
JavaScript позволяет создавать собственные серверные приложения с использованием платформы Node.js.


647
1

Ответ:

Решено

Итак, ваш CRA выглядит примерно так

  import React from 'react';
    import ReactDOM  from 'react-dom';

    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('app')
    );

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

<div id = "app"></div>
<script src = "bundle.js"></script>

Где src скрипта - это относительный путь к вашему встроенному компоненту. Затем просто подайте этот шаблон с помощью экспресс, когда они попадут в этот маршрут.