diff --git a/README.md b/README.md index afe16e4..6f718c1 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,9 @@ This template combines a number of third party open source tools: - [`@formatjs/intl-locale`](https://formatjs.io/docs/polyfills/intl-locale) is used as a polyfill for [`Intl.Locale`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) if necessary. - [`@formatjs/intl-pluralrules`](https://formatjs.io/docs/polyfills/intl-pluralrules) is used as a polyfill for [`Intl.PluralRules`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules) if necessary. +> [!NOTE] +> If you'd prefer not to use React, you can [replace it with a Stimulus frontend](https://github.com/Shopify/shopify-app-template-ruby/wiki/Replacing-React-frontend-with-Stimulus). + ## Getting started ### Requirements @@ -70,15 +73,20 @@ However, the CLI will not manage your Ruby dependencies automatically, so you wi To make the process easier, the template provides a script to run the necessary steps: 1. Start off by switching to the `web` folder: + ```shell cd web ``` -1. Install the ruby dependencies: + +2. Install the ruby dependencies: + ```shell bundle install ``` -1. Run the [Rails template](https://guides.rubyonrails.org/rails_application_templates.html) script. + +3. Run the [Rails template](https://guides.rubyonrails.org/rails_application_templates.html) script. It will guide you through setting up your database and set up the necessary keys for encrypted credentials. + ```shell bin/rails app:template LOCATION=./template.rb ``` @@ -136,17 +144,19 @@ rake build:all ``` ### Making your first API call + You can use the [ShopifyAPI](https://github.com/Shopify/shopify-api-ruby) gem to start make authenticated Shopify API calls. -* [Make a GraphQL Admin API call](https://github.com/Shopify/shopify-api-ruby/blob/main/docs/usage/graphql.md) -* [Make a GraphQL Storefront API call](https://github.com/Shopify/shopify-api-ruby/blob/main/docs/usage/graphql_storefront.md) -* [Make a Rest Admin API call](https://github.com/Shopify/shopify-api-ruby/blob/main/docs/usage/rest.md) +- [Make a GraphQL Admin API call](https://github.com/Shopify/shopify-api-ruby/blob/main/docs/usage/graphql.md) +- [Make a GraphQL Storefront API call](https://github.com/Shopify/shopify-api-ruby/blob/main/docs/usage/graphql_storefront.md) +- [Make a Rest Admin API call](https://github.com/Shopify/shopify-api-ruby/blob/main/docs/usage/rest.md) Examples from this app template: -* Making Admin **GraphQL** API request to create products: - * `ProductCreator#create` (web/app/services/product_creator.rb) -* Making Admin **Rest** API request to count products: - * `ProductsController#count` (web/app/controllers/products_controller.rb) + +- Making Admin **GraphQL** API request to create products: + - `ProductCreator#create` (web/app/services/product_creator.rb) +- Making Admin **Rest** API request to count products: + - `ProductsController#count` (web/app/controllers/products_controller.rb) ## Hosting @@ -203,16 +213,16 @@ We fixed this issue with v3.4.0 of the CLI, so after updating it, you can make t ... ``` -### I'm seeing "App couldn't be loaded" error due to browser cookies +### I'm seeing "App couldn't be loaded" error due to browser cookies + - Ensure you're using the latest [shopify_app](https://github.com/Shopify/shopify_app/blob/main/README.md) gem that uses Session Tokens instead of cookies. - - See ["My app is still using cookies to authenticate"](https://github.com/Shopify/shopify_app/blob/main/docs/Troubleshooting.md#my-app-is-still-using-cookies-to-authenticate) + - See ["My app is still using cookies to authenticate"](https://github.com/Shopify/shopify_app/blob/main/docs/Troubleshooting.md#my-app-is-still-using-cookies-to-authenticate) - Ensure `shopify.app.toml` is present and contains up to date information for the app's redirect URLS. To reset/update this config, run ```shell shopify app dev --reset ``` - ## Developer resources - [Introduction to Shopify apps](https://shopify.dev/docs/apps/getting-started) diff --git a/web/app/controllers/home_controller.rb b/web/app/controllers/home_controller.rb index 0e5cff0..c7c8ba6 100644 --- a/web/app/controllers/home_controller.rb +++ b/web/app/controllers/home_controller.rb @@ -13,6 +13,7 @@ def index redirect_to(ShopifyAPI::Auth.embedded_app_url(params[:host]), allow_other_host: true) else contents = File.read(File.join(Rails.env.production? ? PROD_INDEX_PATH : DEV_INDEX_PATH, "index.html")) + contents.sub!("%VITE_SHOPIFY_API_KEY%", ShopifyApp.configuration.api_key) render(plain: contents, content_type: "text/html", layout: false) end diff --git a/web/app/javascript/application.js b/web/app/javascript/application.js index e524d16..874eae8 100644 --- a/web/app/javascript/application.js +++ b/web/app/javascript/application.js @@ -1,2 +1,3 @@ // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails -import "@hotwired/turbo-rails" +import "@hotwired/turbo-rails"; +import "controllers"; diff --git a/web/app/javascript/controllers/application.js b/web/app/javascript/controllers/application.js new file mode 100644 index 0000000..baf4e52 --- /dev/null +++ b/web/app/javascript/controllers/application.js @@ -0,0 +1,8 @@ +import { Application } from "@hotwired/stimulus"; + +const application = Application.start(); +// Configure Stimulus development experience +application.debug = false; +window.Stimulus = application; + +export { application }; diff --git a/web/app/javascript/controllers/index.js b/web/app/javascript/controllers/index.js new file mode 100644 index 0000000..373c3ed --- /dev/null +++ b/web/app/javascript/controllers/index.js @@ -0,0 +1,5 @@ +// This file is auto-generated by ./bin/rails stimulus:manifest:update +// Run that command whenever you add a new controller or create them with +// ./bin/rails generate stimulus controllerName + +import { application } from "./application" diff --git a/web/app/javascript/lib/flash_messages.js b/web/app/javascript/lib/flash_messages.js deleted file mode 100644 index 8f54171..0000000 --- a/web/app/javascript/lib/flash_messages.js +++ /dev/null @@ -1,24 +0,0 @@ -var eventName = typeof(Turbolinks) !== 'undefined' ? 'turbolinks:load' : 'DOMContentLoaded'; - -if (!document.documentElement.hasAttribute("data-turbolinks-preview")) { - document.addEventListener(eventName, function flash() { - var flashData = JSON.parse(document.getElementById('shopify-app-flash').dataset.flash); - - var Toast = window['app-bridge'].actions.Toast; - - if (flashData.notice) { - Toast.create(app, { - message: flashData.notice, - duration: 5000, - }).dispatch(Toast.Action.SHOW); - } - - if (flashData.error) { - Toast.create(app, { - message: flashData.error, - duration: 5000, - isError: true, - }).dispatch(Toast.Action.SHOW); - } - }); -} diff --git a/web/app/javascript/lib/shopify_app.js b/web/app/javascript/lib/shopify_app.js deleted file mode 100644 index 5d21ea1..0000000 --- a/web/app/javascript/lib/shopify_app.js +++ /dev/null @@ -1,13 +0,0 @@ -var data = document.getElementById('shopify-app-init').dataset; -var AppBridge = window['app-bridge']; -var createApp = AppBridge.default; -window.app = createApp({ - apiKey: data.apiKey, - host: data.host, -}); - -var actions = AppBridge.actions; -var TitleBar = actions.TitleBar; -TitleBar.create(app, { - title: data.page, -}); diff --git a/web/app/views/layouts/_flash_messages.html.erb b/web/app/views/layouts/_flash_messages.html.erb deleted file mode 100644 index e0eaefa..0000000 --- a/web/app/views/layouts/_flash_messages.html.erb +++ /dev/null @@ -1,3 +0,0 @@ -<% content_for :javascript do %> - <%= content_tag(:div, nil, id: 'shopify-app-flash', data: { flash: { notice: flash[:notice], error: flash[:error] } }) %> -<% end %> diff --git a/web/app/views/layouts/embedded_app.html.erb b/web/app/views/layouts/embedded_app.html.erb index 9f28e75..444c688 100644 --- a/web/app/views/layouts/embedded_app.html.erb +++ b/web/app/views/layouts/embedded_app.html.erb @@ -13,27 +13,16 @@ <%= javascript_include_tag 'application', "data-turbolinks-track" => true %> <% end %> <%= csrf_meta_tags %> + + <%= javascript_include_tag 'https://cdn.shopify.com/shopifycloud/app-bridge.js', data: { + 'api-key': ShopifyApp.configuration.api_key, + } %>
-