Search code examples
ruby-on-railsshopifyasset-pipelineshopify-app

Shopify app - how to include assets using an app-proxy with ruby on rails

I'm building a shopify app-proxy using ruby on rails. i’m using the shopify_app gem.

in my controller actions i have the following set: 

render layout: false, content_type: ‘application/liquid’

,so that the app is embedded within the shop’s layout/theme.liquid.

my question is how do i then pull assets into the app? I’ve tried including them manually into the template files using:

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>


<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

but alas, i get 404 not found errors. currently i’m putting asset files into the store’s theme which doesn’t seem ideal.

Solution

  • Don't skip the layout

    If you want to insert your own js and css inside the theme's <head> with all the others, don't set layout: false. Shopify will grab and append your assets into the theme.

    404s' Probable Cause: Wrong Asset Host

    Take a look at the requests that are returning a 404 and verify that the asset host is your own custom or heroku domain, and not the Shopify store's domain. Here's how you can check:

    1. Open up your favorite browser, open the dev tool, then go to the "Network" tab.
    2. Locate your js and css 404 requests.
    3. If the requests are going to https://the-shopify-store-domain.com/assets/application-3b57310f71432b97ccf86f51aawtert735dwtertbd9783ed06a5296871536a24.css, then that means it's looking for the assets in the wrong domain. Instead it should be making the requests to your own domain such as: https://your-own-name.herokuapp.com/assets/application-3b57310f71432b97ccf86f51aawtert735dwtertbd9783ed06a5296871536a24.css

    Solution

    Since this is a proxy app, the host domain is getting updated to the Shopify store's domain instead of the original source. So you need to be specific about where your assets are stored. Luckily, you can do this easily in Rails by changing the asset host configuration to your own host:

    config.action_controller.asset_host = "https://your-custom-domain-or-herokuapp-domain.com"

    Tip: This setting is commented out by default on a new rails app in the production.rb file.

    Hope this helps!