App Proxy for Custom App hosted on Heroku changes filepaths to Shopify URL

[rebeccasmith89]

Hello,

I have set up a Next.js app following this tutorial: https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/set-up-your-app. However rather than trying to embed it in the Admin area, I am trying to embed my app into my storefront using an Application Proxy. The proxy is working correctly, however the file paths for the CSS and JS files have been changed to something like 'my-store.myshopify.com/_next/static/chunks/pages/index-f804e9b3852197e6f367.js' when it should be obtaining these files from the app hosted on Heroku. As a result these files can not be found and the app doesn't work properly.

I have seen someone ask a similar question here: https://community.shopify.com/c/Shopify-APIs-SDKs/App-Proxy-Sending-index-html-throws-404-on-the-JS-...

However I am having trouble implementing the solution as it breaks my setup. I believe this is because my setup is different to the above solution as well as this type of way of working is new to me. I was wondering if anyone has an example of their server.js file they can share to help me get this working or understand better what I need to do to resolve this issue?

Many thanks,

Becky

[SBD_]

Hey @rebeccasmith89 

It sounds like this is caused by the application using relative urls e.g. <script src="/file.js"> instead of <script src="https://herokuapp.com/file.js">. When the app is proxied through the Online Store, the browser looks for store.myshopify.com/file.js.

Some potential work arounds:

- Embed with an iframe instead of an app proxy (not great for accessibility, requires theme modification, giving up signed requests).

- Or, update the app to use absolute URLs (will take a little configuring to support different environments).

Let me know if you get stuck.