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

Solved
Highlighted
New Member
2 1 0

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

0 Likes
Shopify Staff
Shopify Staff
96 18 21

Hey @AlexBeeson ,

 

Have you had a chance to go through our Shopify Tutorial on how to build a Shopify App using Node.js and React? This tutorial might provide you with some insights on how to get your React application properly embedded onto your storefront.  You can also view the code for this demo React application from this tutorial here

 

Alternatively, 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 (e.g. your Shopify store domain name my-store.myshopify.com/). 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

Success.

New Member
2 1 0

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