App Proxy || Sending index.html throws 404 on the JS and CSS files

Solved
Highlighted
Shopify Partner
2 1 1

Hi Everyone,

 

I'm building a React application with Express, deployed via Heroku, which I'm trying to embed into my storefront using an Application Proxy.

 

Everything seemed to be working fine, however when I finally load the proxied URL on my store - I get a blank screen and a bunch of 404's in the console for my .css and .js chunk files. The request was sent, authenticated, and my API's response appears to be okay within the storefront - it just won't render anything.

 

Finally, after much research I realized that Shopify has changed the path to these CSS and JS files to be my-store.myshopify.com/hash.chunk.js etc. instead of the reference to my Heroku server.

 

It appears this problem has been encountered before in this thread: https://community.shopify.com/c/Shopify-APIs-SDKs/Shopify-app-how-to-include-assets-using-an-app-pro.... However, I can't seem to find a node/react/heroku equivalent to the Ruby solution presented here.

 

Any guidance or help would be greatly appreciated!

 


Thank you,


Alex

1 Like
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
624 103 124

Hey @AlexBeeson ,

 

It looks like in React you should be able to able to set the parameter `homepage` in your `package.json` file to change the public path of your assets to what the deployment path will actually be. You can read more about this here

 

Also, you should be able to avoid this problem by importing your .css and .js asset files locally instead of referencing them from your Heroku server :

import asset1 from './asset1.css'

 

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
Shopify Partner
2 1 1

This is an accepted solution.

Hi Hassain,

 

Thanks so much for your reply and effort here.  Unfortunately, the tutorial is focused on embedding a react app in the admin with next.js as opposed to the storefront with an application proxy.

 

The homepage in package.json is important though. I had it set to my Heroku address when it should actually be set to `.` to create a relative path for files in the build.

 

Some additional middleware is required as well - for those interested I have the following routes set up to field requests from Shopify's app proxy.

 

This is set up above any of my route imports in server.js:

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

and these routes are imported below that from a /shopify-routes.js file:

 

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}`));
  });

 

 

Though this may be a bit heavy-handed, it has solved the problem and the app is loading within the Shopify storefront now.

0 Likes
Highlighted
Astronaut
1075 173 211

@AlexBeeson thanks for that, I'm on the same track as you are. Just a question, during development, do you need to go "yarn build" every time you want to update your app?

Cheers.

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes