Shopify App Proxy - Как включить мои файлы активов в ответ на запрос |React / JS / Heroku - PullRequest
Новая
       27

Shopify App Proxy - Как включить мои файлы активов в ответ на запрос |React / JS / Heroku

0 голосов
/ 16 октября 2019

Я создаю приложение Shopify с React & Express, развернутое через Heroku, которое я пытаюсь встроить в свою витрину с помощью прокси приложения.

Когда я наконец загружаю прокси-URL в свой магазин- Я получаю пустой экран и кучу 404-х в консоли для моих чанков .css и .js. Запрос был отправлен, аутентифицирован, и мой ответ API (200) - он просто не будет ничего отображать.

Наконец, после долгих исследований я понял, что Shopify изменил путь к этим файлам CSS и JSбыть my-store.myshopify.com/hash.chunk.js и т. д. вместо ссылки на мой сервер Heroku.

Похоже, эта проблема уже встречалась ранее в этой теме: Shopify app -как включить ресурсы с помощью прокси-приложения с ruby ​​на рельсах Однако я не могу найти узел / реагировать / герою, эквивалентный представленному здесь решению Ruby.

Любое руководство или помощь могутс благодарностью!

Я начинаю с того, что обслуживаю свое приложение React через экспресс: 

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

, а затем, когда мой URL-адрес прокси-сервера активируется, я отправляю обратно индексный файл в папке client / build. : 

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

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

  });

1 Ответ

0 голосов
/ 17 октября 2019

Мне удалось найти рабочее решение моей проблемы после долгих проб и ошибок.

Домашняя страница в package.json важна. У меня был установлен только мой адрес Heroku, когда он фактически должен был быть установлен на herokuaddress.com/YOURPROXYROUTE (то есть / app / my-app)

Требуется также некоторое дополнительное промежуточное программное обеспечение - для тех, кто заинтересован, у меня есть следующие маршрутынастроить на полевые запросы от прокси приложения Shopify.

Это установлено выше любого из моих импортов маршрутов в server.js: 

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

, и эти маршруты импортируются ниже, чем из /Файл shopify-rout.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.

...