Как обслуживать статический HTML-файл непосредственно с сервера в React + Express?

Question

Я скачал симпатичную html-страницу со ссылками на необходимые css и js от разработчика веб-сайта и хочу использовать ее в качестве моей целевой страницы.У меня полнофункциональное приложение React, и я хочу использовать этот загруженный html-файл в качестве целевой страницы для / route.Как лучше всего это сделать?

Я посмотрел на <div dangerouslySetInnerHTML>, как в примере ниже, но это приводит к медленной загрузке страницы.

export default class StaticContainer extends Component {
  state = {
    __html: "" // copy/paste html here
  }


  render() {
    return (
        <div dangerouslySetInnerHTML={this.state} />
    );
  }
}```

Answer 1

Решено это путем проксирования определенных путей непосредственно к серверу, используя http-proxy-middleware.См. Раздел под названием Конфигурирование прокси вручную в документации React для получения дополнительной информации.

Установка http-proxy-middleware.Создайте файл src/setupProxy.js в клиентском приложении React следующим образом:

const proxy = require('http-proxy-middleware');

// Matches landing page at / alone
var landingPageFilter = function (pathname, req) {
    console.log(pathname);
    return pathname.match('^\/$') && req.method === 'GET';
};

module.exports = function (app) {
    // this is for APIs
    app.use(proxy('/api', { target: 'http://localhost:3001/' }));
    // this is for the landing page
    app.use(proxy(landingPageFilter, { target: 'http://localhost:3001/' }));
};

В моем случае я использовал Express для своего сервера, созданного с использованием express-generator.Обрабатывал эти маршруты в app.js, как показано ниже:

app.use('/api/', indexRouter);

app.use("/", (req, res) => {
  res.status(200).sendFile(path.resolve(__dirname, "../public", "landing_page.html"));
});

, где landing_page.html - это загруженная страница, которую мы хотели обслуживать без React

Редактировать: Это работало только в dev.Для продвижения вам нужно будет создать страницы React и обслуживать их.Следуйте этому руководству , но убедитесь, что у вас есть правильный путь для построения страниц React.В учебнике это client/build.Может отличаться в зависимости от вашей структуры каталогов.