Update embedded app files

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)

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

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";

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 };

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"

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,
+    } %>
   </head>
 
   <body>
-    <div class="app-wrapper">
-      <div class="app-content">
-        <main role="main">
-          <%= yield %>
-        </main>
-      </div>
-    </div>
-
-    <%= render 'layouts/flash_messages' %>
-
-    <script src="https://unpkg.com/@shopify/app-bridge@2"></script>
+    <ui-title-bar title="Shopify App"></ui-title-bar>
 
-    <%= content_tag(:div, nil, id: 'shopify-app-init', data: {
-      api_key: ShopifyApp.configuration.api_key,
-      shop_origin: @shop_origin || (@current_shopify_session.shop if @current_shopify_session),
-      host: @host,
-      debug: Rails.env.development?
-    } ) %>
+    <%= yield %>
 
     <% if content_for?(:javascript) %>
       <div id="ContentForJavascript" data-turbolinks-temporary>

web/config/importmap.rb

@@ -2,6 +2,8 @@
 
 # Pin npm packages by running ./bin/importmap
 
-pin "application", preload: true
-pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
-pin_all_from "app/javascript/lib", under: "lib"
+pin "application"
+pin "@hotwired/turbo-rails", to: "turbo.min.js"
+pin "@hotwired/stimulus", to: "stimulus.min.js"
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
+pin_all_from "app/javascript/controllers", under: "controllers"