A space to discuss online store customization, theme development, and Liquid templating.
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
Solved! Go to the solution
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.
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.
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.
@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.
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;
}
});