la-ruby/shopify-hotwire-sample

A sample app for Shopify's JWT integration with Hotwire Turbo

Shopify Hotwire Sample

The sample app includes:

• JWT integration for Hotwire Turbo
• JWT integration for Rails Request.JS
• App Bridge 2.0
• Polaris ViewComponents
• Hotwire::Livereload

Since the shopify_app gem is not fully compatible with App Bridge 2 this sample uses fork.

The old App Bridge 1 sample can be found in app-bridge-1 branch.

Quick start

To run this app locally, you can clone this repository and do the following.

1. Connect to Shopify:

shopify rails connect

2. Setup Rails app:

bin/setup

3. Run ngrok on port 3000:

ngrok http 3000

4. Start the app:

rails s

5. Install and open this app on a development shop.

Optional

6. Add an ngrok configuration

~/.ngrok2/ngrok.yml

authtoken: $$$$$$$$$$$
region: eu

tunnels:
  hotwire-example:
    addr: 3000
    proto: http
    bind_tls: true
    subdomain: hotwire-example
  hotwire-webpack:
    addr: 3035
    proto: http
    bind_tls: true
    subdomain: hotwire-webpack
    host-header: localhost:3035

7. Add NGROK_WEBPACK_TUNNEL to your .env file

SHOPIFY_API_KEY=foo
SHOPIFY_API_SECRET=bar

// This is needed so you don't get CORS issues when Webpack pings while inside the Shopify admin
NGROK_WEBPACK_TUNNEL=hotwire-webpack.eu.ngrok.io

8. Use foreman to run the Rails server & Webpack at the same time

foreman start -f Procfile.dev