Как настроить проект React внутри экспресса по следующим соображениям? - PullRequest
Новая
       7

Как настроить проект React внутри экспресса по следующим соображениям?

0 голосов
/ 12 октября 2018

У меня есть проект express со следующей настройкой:

  1. Он использует handlebars для рендеринга шаблонов.
  2. Приложение сервера имеет данные с состоянием.

Теперь мне нужно провести рефакторинг страницы, чтобы использовать React с учетом нижеприведенных соображений:

  1. Я мог бы обработать index.html только для /path:id и отправить на него данные.(например, Username или пользовательские метатеги)
  2. Я мог бы использовать webpack функции разработки, такие как HMR, без перезапуска серверного приложения. (Чтобы сохранить данные сервера при разработке клиентского приложения)
  3. Было бы лучше визуализировать index.htm с handlebars.
  4. Ajax-запросы от /path/:id имеют учетные данные внутри cookie с адреса источника.

1 Ответ

0 голосов
/ 20 октября 2018

После нескольких дней попыток решить эту проблему, я нашел решение для этого, как показано ниже:

  1. Я пропустил handlebars до отображения index страницы /path/:id.
  2. Для обработки webpack в разработке я использовал http-proxy-middleware внутри моего express приложения. 

if (app.settings.env === 'development') {
  const target = "http://localhost:3000";
  const proxy = proxyMiddleware({ target })
  app.use('/static', proxy);
  app.use("/play/table/:id", proxy);
  app.use("/sockjs-node", proxyMiddleware("/sockjs-node", { target, ws: true }));
  app.use(["/*.hot-update.(js|json)", "/*.hot-update.js.map"], proxy);
}
Для того, чтобы получить начальные данные для /path/:id, я сделал несколько хаков, как показано ниже: 

const pathname = window.location.pathname;
const id = pathname.split('/').reverse()[0]

const pageData = fetch(`/path/${id}`).then(response => response.json())
...