Skip to content

Latest commit

 

History

History
41 lines (24 loc) · 3.07 KB

Quickstart.md

File metadata and controls

41 lines (24 loc) · 3.07 KB

Quickstart

This guide assumes you have completed the steps to create a new Rails app using the Shopify App gem found in the Usage section of the project's README.

Table of contents

Optionally Setup SSH tunnel for development

Use Shopify App Bridge to embed your app in the Shopify Admin

Optionally Setup SSH tunnel for development

Local development supports both http and https schemes. By default http and localhost are used.

To use https, your local app needs to be accessible from the public Internet in order to install it on a Shopify store to use the App Proxy Controller or receive webhooks.

In order to receive requests securely, you'll need to setup a tunnel from the internet to localhost. You can use Cloudflare for this.

To do so, install the cloudflared CLI tool, and run:

# The port must be the same as the one you run the Rails app on later. We use the Rails default below.
cloudflared tunnel --url http://localhost:3000

Keep this window running to keep the tunnel and make note of the URL this command prints out. The URL will look like https://some-random-words.trycloudflare.com.

Visit the "App Setup" section for your app in the Shopify Partners dashboard. Set the URL as "App URL" on this settings page and add it to the "Allowed redirection URL(s)", after appending /auth/shopify/callback to the end (e.g. https://some-random-words.trycloudflare.com/auth/shopify/callback).

Add the same URL as HOST in your .env file e.g.

HOST='https://some-random-words.trycloudflare.com/'

Use Shopify App Bridge to embed your app in the Shopify Admin

A basic example of using Shopify App Bridge is included in the install generator. An instance Shopify App Bridge is automatically initialized in shopify_app.js.

The flash_messages.js file converts Rails flash messages to App Bridge Toast actions automatically. By default, this library is included via unpkg in the embedded_app layout.

For more advanced uses it is recommended to install App Bridge via npm or yarn.