У меня есть серверная часть Node / Express, которая использует Pug.js для рендеринга ряда маршрутов на стороне сервера. Приложение на данный момент статично и представляет собой простой сайт.
Я создал интерактивный компонент-конструктор в React.js с помощью CRA. Это позволяет посетителю сайта настраивать продукт в интерактивном режиме. Конечная цель такова:
когда посетитель сайта нажимает на навигационную ссылку конструктора, он будет перенаправлен на страницу, которая будет отображать мои серверные шаблоны, чтобы сохранить внешний вид сайта. Однако в блоке содержимого я хотел бы отобразить созданное мной приложение для реагирования.
Я искал несколько дней и, возможно, просто не понимаю, что я вижу. Я не уверен, что рендеринг на стороне сервера или проксирование помогут мне? Я пробовал прокси CRA и не получил результата.
Изображение структуры папки:
Если кому-то нужна дополнительная информация или он может указать несколько ресурсов, это будет очень полезно.
Я все еще учусь, поэтому прошу прощения, если это нарушает какие-либо рекомендации SO.
заранее спасибо
🤔 А знаете ли вы, что...
JavaScript позволяет создавать собственные серверные приложения с использованием платформы Node.js.
Итак, ваш 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 скрипта - это относительный путь к вашему встроенному компоненту. Затем просто подайте этот шаблон с помощью экспресс, когда они попадут в этот маршрут.