Skip to content
Luke Walsh edited this page Dec 18, 2022 · 1 revision

App proxies are way for your app to display content directly inside a shop with it's own URL (like http://cool-shop.com/apps/cool-app).

Shopify makes a request to the app, this package will verify the request, you can then return any content you wish to display inside the shop.

Shopify Setup

  1. Visit your app in the Shopify Dashboard
  2. Click Extensions
  3. Click Manage Extensions
  4. Scroll down to Online Store and enable it
  5. Enter the handle (example: apps/proxy, or tools/your-app, etc)
  6. Enter the URL to the proxy route of your application
  7. Hit save

Creating an App Proxy: Controller Method

Proxy Controller

php artisan make:controller AppProxyController

This will create a file AppProxyController.php in app/Http/Controllers.

Route Entry

Open app/routes/web.php and create a new GET entry to point to the newly created controller.

Route::get('/proxy', 'AppProxyController@index')->middleware('auth.proxy');

This will point /proxy to AppProxyController and it's method index. The key here is the use of the auth.proxy middleware which will take care of validating the proxy signature before sending the request to the controller.

You're now free to create an app proxy entry in your app's configuration in the partner dashboard, point the URL to your new proxy route, example: https://your-domain.com/proxy.

Creating an App Proxy: Simple Method

At its basics, you can simply open routes/web.php and add this:

Route::get('/proxy', function () {
   return response('Hello, world!')->withHeaders(['Content-Type' => 'application/liquid']);
})->middleware('auth.proxy');

Now, when visiting the proxy URL on your shop, you should see "Hello, world!" embedded into your Shopify theme.

Notes

Responses

Be sure to return a 200 response on your controller method. If you wish to integrate nicely with the shop's theming be sure to also respond with content type being application/liquid.

Browser "downloads" Liquid

If the browser is prompting download of application/liquid file, and your response is 200 status with header Content-Type: application/liquid, you should check that your .htaccess file in the /public directory is not redirecting the path to a non-trailing slash version otherwise the 301 redirect will cause Shopify to download the file. You should add !^/?yourproxypath* directly after the RewriteRule, replacing yourproxypath with the path for your application proxy.

E.g.

# Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

Changes to

# Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule !^/?myproxy*$ ^ %1 [L,R=301]

Ensure you clear your cache as the 301 redirect may be stored in your browser's storage.

If this doesn't fix the problem then the issue lies within your server setup, not the package.

For more information, see Shopify's docs on application proxies.