Solved

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

AlexBeeson
Shopify Partner
2 1 2

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

Accepted Solution (1)
AlexBeeson
Shopify Partner
2 1 2

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.

View solution in original post

Replies 4 (4)

hassain
Shopify Staff (Retired)
624 104 187

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'

 

To learn more visit the Shopify Help Center or the Community Blog.

AlexBeeson
Shopify Partner
2 1 2

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.

diego_ezfy
Shopify Partner
2935 562 883

@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.

 

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

neveroddoreven
Visitor
1 0 2

I know it's an old thread, but I think there is an easier fix than described above. Hopefully this helps any wayward souls struggling with static assets, the online store, and relative paths...

I found that setting the assetPrefix in the `next.config.js` file seems to work.

module.exports = withCSS({
  assetPrefix: ".",
  webpack: config => {
    const env = { API_KEY: apiKey };
    config.plugins.push(new webpack.DefinePlugin(env));
    return config;
  }
});