关于使用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,则不会重定向。相反,我的应用程序加载了。这是有道理的,但不是我想要的行为。)
答案 0 :(得分:0)
您不需要对package.json和其他内容做任何事情。即使您拥有图像,字体等任何资产,也应将其包括在包含以下内容的build文件夹(或dist文件夹(如果您使用的是 dist 而不是 build )中) bundle.js。
通过使用create-react-app,您将在构建文件夹中拥有以下文件:
所有代码都将捆绑在一起,并且您不需要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();
});
希望对您有帮助