Shopify Hotwire Sample

🔒 Future updates to app template will be published in private repository available only for Github Sponsors. The new version with App Bridge 4, Shopify CLI 3, and the other improvements is already there. Become a sponsor to get an access.

The sample app includes:

• JWT integration for Hotwire Turbo
• JWT integration for Rails Request.JS
• Integration with AppBridge 3.x
• Polaris ViewComponents
• Hotwire::Livereload

Previous versions

• App Bridge 1 sample can be found in app-bridge-1 branch
• App Bridge 2 sample can be found in app-bridge-2 branch

Dependencies

• Redis
• Postgres

OAuth Tunnel in Development

In order to redirect OAuth requests securely to localhost, you'll need to setup a tunnel to redirect from the internet to localhost.

To do that, you can install the cloudflared CLI tool, and run:

# Note that you can also use a different port
cloudflared tunnel --url http://localhost:3000

You will need to keep this window running to maintain the tunnel during development.

For more advanced tunnel setup check out article Setting up Cloudflare Tunnel for development.

Quick start

To run this sample locally, you can clone this repository and follow these steps:

1. Connect to Shopify app:

yarn shopify app config link

2. Pull Shopify app credentials:

yarn shopify app env pull

It will generate .env file with Shopify API credentials.

3. Add HOST with your cloudflare tunnel to .env file:

HOST=https://<Your tunnel host>

4. Update your app URLs in the Shopify Partner dashboard to point to your tunnel.

Set the App URL to https://<your tunnel host>/ and the Allowed redirection URL(s) to https://<your tunnel host>/auth/shopify/callback.

5. Setup Rails app:

bin/setup

6. Start the app:

bin/dev

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

Billing

This sample uses simple billing configuration provided by shopify_app gem. You can configure it in config/initializers/shopify_app.rb using config.billing setting.

Heroku Setup

To run your app in Heroku you need add the Shopify API Key, Shopify API Secret and Host to your config vars. You find the API Key and API Secret in your app setup. The host is your heroku app domain.

This templates config vars are: SHOPIFY_API_KEY, SHOPIFY_API_SECRET, HOST