Question

关于使用React创建应用程序时如何构造javascript代码，我有一个相对基本的问题。

我想在多页网站中嵌入一个单页应用程序。例如，我可能有一个主页，一个关于页面，一个注册页面等，所有这些都由运行Express的节点服务器提供。他们与React无关。我还使用了护照，该护照在自己的页面上进行身份验证（本地登录，社交登录，注销等）。此外，我在服务器上的/ api /上运行了graphql API。

我还希望在同一网站上提供一个/embed/*上的React应用程序（其中React App的基本URL为https://mywebsite.com/embed/，并且有许多子页面由React处理） -路由器）。

我如何在开发和生产中将使用create-react-app创建的React应用作为较大站点的子目录提供服务？（Cookie应该在React应用之间共享和主要站点。）

我已成功使用create-react-app中的“代理”选项从react应用程序（在端口3000上运行）连接到API（在端口3001上运行）。但是，代理似乎无法转发用户在浏览器中输入的URL。（例如：如果我在代码中使用localhost:3000/api/访问fetch，它将根据需要转发到localhost:3001/api/。但是，如果我在地址栏中输入相同的URL，则不会重定向。相反，我的应用程序加载了。这是有道理的，但不是我想要的行为。）

Answer 1

您不需要对package.json和其他内容做任何事情。即使您拥有图像，字体等任何资产，也应将其包括在包含以下内容的build文件夹（或dist文件夹（如果您使用的是 dist 而不是 build ）中） bundle.js。

通过使用create-react-app，您将在构建文件夹中拥有以下文件：

asset-manifest.json
收藏夹
index.html
manifest.json
静态文件夹
以及您可能会在应用中使用的其他静态文件，并将其放在开发模式下的公共文件夹中

所有代码都将捆绑在一起，并且您不需要package.json，...

但是如果您不使用creat-react-app，它将有所不同，您需要将bundle.js包含在index.html中

但是使用CRA，您并不会自动将所有内容自动化，也不需要做额外的事情。

此链接可帮助您进行路由： Create-React-App in production: Routes not found

在服务器中，您可以像这样提供index.html：

let root = path.join(__dirname, 'client', 'build');
app.use(express.static(root));
app.use(function(req, res, next) {
if (req.method === 'GET' && req.accepts('html') && !req.is('json') && 
 !req.path.includes('.')) {
   res.sendFile('index.html', { root });
 } else next();
 });

希望对您有帮助

如何将create-react-app用作较大网站的子目录？

1 个答案: