Shopify应用程序代理-如何在请求响应中包括我的资产文件| React / JS / Heroku

Question

我正在通过React＆Express构建一个Shopify应用，该应用通过Heroku部署，我正尝试使用应用代理将其嵌入我的店面。

[当我最终在商店中加载代理的URL时，我的.css和.js块文件在控制台中出现了一个空白屏幕和一堆404。请求已发送，已通过身份验证，我的API的响应为（200）-它不会呈现任何内容。

最后，经过大量研究，我意识到Shopify已将这些CSS和JS文件的路径更改为my-store.myshopify.com/hash.chunk.js等，而不是对我的Heroku服务器的引用。

似乎在此线程中之前曾遇到过此问题：Shopify app - how to include assets using an app-proxy with ruby on rails但是，我似乎找不到与此处介绍的Ruby解决方案等效的节点/反应/ heroku。

任何指导或帮助将不胜感激！

我首先通过Express服务我的React App：

app.use(express.static(path.join(__dirname, 'client/build')));

然后当我的代理URL被点击时，我将客户/构建文件夹中的索引文件发送回去：

router.get('/proxy', (req, res) => {

    res.set('Content-Type', 'application/liquid').sendFile(path.join(__dirname, '../client/build/index.html'));

  });

Answer 1

经过反复尝试，我设法找到了解决我问题的有效方法。

package.json中的首页很重要。我实际上将其设置为.以为构建中的文件创建相对路径时，将其设置为我的Heroku地址。

也需要一些附加的中间件-对于那些有兴趣的人，我为来自Shopify的应用程序代理的现场请求设置了以下路由。

这是在server.js中我导入的任何路由之上设置的：

app.use(express.static(path.join(__dirname, 'client/build')));

这些路由是从/shopify-routes.js文件中导入的：

router.get('/proxy', (req, res) => {
    res.set('Content-Type', 'application/liquid').sendFile(path.join(__dirname, '../client/build/index.html'));
  });

  router.get('/proxy/static/css/:file', (req, res) => {
    res.set('Content-Type', 'text/css').sendFile(path.join(__dirname, `../client/build/static/css/${req.params.file}`));
  });

  router.get('/proxy/static/js/:file', (req, res) => {
    res.set('Content-Type', 'text/javascript').sendFile(path.join(__dirname, `../client/build/static/js/${req.params.file}`));
  });

尽管这可能有点用力，但它已经解决了问题，并且该应用程序现在正在Shopify店面中加载。