Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kirillplatonov/shopify-hotwire-sample

A sample app for Shopify's JWT integration with Hotwire Turbo
https://github.com/kirillplatonov/shopify-hotwire-sample

jwt rails ruby shopify

Last synced: about 2 months ago
JSON representation

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

Awesome Lists containing this project

README

        

# 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](https://github.com/sponsors/kirillplatonov) to get an access.

The sample app includes:
- JWT integration for [Hotwire Turbo](https://turbo.hotwired.dev/)
- JWT integration for [Rails Request.JS](https://github.com/rails/request.js)
- Integration with AppBridge 3.x
- [Polaris ViewComponents](https://github.com/baoagency/polaris_view_components)
- [Hotwire::Livereload](https://github.com/kirillplatonov/hotwire-livereload)

![Shopify Hotwire Sample](.github/assets/preview.png)

## Previous versions

- App Bridge 1 sample can be found in [`app-bridge-1`](https://github.com/kirillplatonov/shopify-hotwire-sample/tree/app-bridge-1) branch
- App Bridge 2 sample can be found in [`app-bridge-2`](https://github.com/kirillplatonov/shopify-hotwire-sample/tree/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](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation/), and run:

```shell
# 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](https://kirillplatonov.com/posts/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:

```shell
yarn shopify app config link
```

2. Pull Shopify app credentials:

```shell
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://
```

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

Set the `App URL` to `https:///` and the `Allowed redirection URL(s)` to `https:///auth/shopify/callback`.

5. Setup Rails app:

```shell
bin/setup
```

6. Start the app:

```shell
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`