时间戳

首页 > 解决方案 > 如何将 React App 合并到具有现有 HTML 结构的现有网站中

html - 如何将 React App 合并到具有现有 HTML 结构的现有网站中

问题描述

我们有一个<html>文件存储在 AWS S3 上。该文件包含页眉和页脚信息。

这个文件有它自己的构建管道，我们从数据库中收集一些数据并生成 HTML 并上传到 S3。

我们现在想在这个 HTML 页面中包含一个捆绑的 React 应用程序。即在页面主体内将是捆绑的反应应用程序。

React App 是基于最新的 create-react-app 设置构建的，因此 babel 和 webpack 是预先配置的。如果在没有上述设置的情况下托管应用程序，则反应构建会创建所有相关文件。

有没有办法合并两个页面？

**注意：专门寻找合并作为构建过程的一部分。**

  1. 我们有一个项目可以生成标题 html 并将其发布到 S3 上。我们有触发器可能会触发它在特定时间/更改后重新生成等。

  2. 我们有一个 React 应用程序，它在生产构建中与 babel/webpack 捆绑在一起，并生成输出 HTML/bundle js 等。所有内容都经过缩小和哈希处理，因此文件名是 bundle。随机哈希.js 等

我们需要合并两个输出。S3 的 html 文件需要在其 body/html 中包含 React App。

理想情况下在管道/构建过程中。因此，如果一个更改，合并将重新编译/重新运行。

标签： htmlreactjsamazon-s3react-reduxbuild-automation

解决方案

为此，您需要将您的 react 构建文件夹中的 js、css 和媒体文件托管在 S3 存储桶中，并将以下内容添加到代码中。

<html>
    ..... your static html code 


    <div id="the id used to bootstrap your react app (from the index.html file in the public folder)"></div>

    ......
    links to all the files in your JS, CSS And media files from the react build folder

</html>

我建议尽可能使用托管图像（您也可以将它们托管在 S3 上）和资产，这样您就不需要在 html 文件中添加媒体文件链接。

您可能想查看此链接，了解如何在构建您的反应应用程序时将所有文件捆绑到一个文件中（我没有尝试过这部分）。

推荐阅读