Hi,

I am getting this error when I try to serve the project. Can you please advise?

Webpacker can't find application in /Users/Shared/Projects/next-gen-auth-app-demo/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "entrypoints": {
  }
}

This is not an issue actually.
I am just wondering if you can provide a demo for Node developers, like an update or another version for this:
https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react

Thank you for your time.

I spent a good amount of time trying to figure out why my styles imported in the JS(X) files were not being loaded in production.

The issue was explained in the second point here:
https://github.com/rails/webpacker/blob/master/docs/css.md#css-sass-and-scss

I missed that because I copy-pasted the layout file from this project.

This project also uses error-prone way to include Shopify Polaris styles. It loads styles from unpkg CDN, requesting a specific version (all good here). However, this version number is hardcoded in the erb file, while there's also Shopify Polaris package version in package.json.
To avoid this, you can import Shopify Polaris styles in your JS(X) files like so:
import '@shopify/polaris/dist/styles.css'

What I actually ended up doing was to have app/javascript/packs/application.js and app/javascript/packs/application.scss as per webpack(er) documentation: https://github.com/rails/webpacker/blob/master/docs/css.md#importing-css-as-a-multi-file-pack-webpacker-v5

The app/javascript/packs/application.scss then imports Shopify Polaris: @import '@shopify/polaris/dist/styles.css';

Does this work with shopify_app v.18? With Polaris? With react routing? With app_bridge react utils? So many gaps and unknowns! Why should I invest time and base my app on an example "of the current moment" over a front-end landscape that seems to be changing drastically every couple of months?

I have followed the steps to install the sample app named "mlbrains-react". I am running both ngrok and "rails s" in 2 screens.
As per step 5, I need to "Install and open this app on a shop".

However, when I search for the app it is not available on the store. That is probably obvious as this is created as a private app.

Can you suggest how this issue can be resolved.

SHOPIFY_API_SECRET should read SHOPIFY_API_SECRET_KEY to match current API version.

I've read in the Shopify documentation that app developers have to avoid setting cookies, however the rails documentation for Action Cable is pretty clear that cookies are necessary to authenticate Action Cable connections. I see in the example app here that action cable is stubbed but not setup. Is this because it's just not possible to use in the app eco system? Thanks!

Thanks a lot for the demo app. I’ve submitted an app for Shopify prescreening and got rejected two times due to missing ‘Content-Security-Policy: frame-ancestors https://example.myshopify.com https://admin.shopify.com;’.

I’ve noticed you added it via /initializers/content_security_policy.rb like:

initial_frame_ancestors = [:https, "*.myshopify.com", "admin.shopify.com"]

def current_domain
  @current_domain ||= (params[:shop] && ShopifyApp::Utils.sanitize_shop_domain(params[:shop])) ||
    request.env["jwt.shopify_domain"] ||
    session[:shopify_domain]
end

frame_ancestors = lambda { current_domain ? [ current_domain, "admin.shopify.com" ] : initial_frame_ancestors }

Rails.application.config.content_security_policy do |policy|
  policy.default_src(:https, :self)
  policy.style_src(:https, "cdn.shopifycloud.com")
  policy.script_src(:https, "cdn.shopifycloud.com")
  policy.img_src(:self, :https, :data, "cdn.shopifycloud.com")
  policy.upgrade_insecure_requests(true)
  policy.frame_ancestors(frame_ancestors)
end

Meanwhile, I was trying to achieve that, assigning policy in AuthenticatedController, like:

content_security_policy do |p|
  p.frame_ancestors -> { "https://#{shop_session.domain} https://admin.shopify.com" }
end

Can you confirm that your approach is recommended and the app won’t be rejected during prescreening due to missing ‘Content-Security-Policy: frame-ancestors https://example.myshopify.com https://admin.shopify.com;’?

I’ve tried to find info on that in docs and Shopify dev forums, but no clues on this topic out there or at least I wasn’t able to find them.

I've followed the tutorial but when I try to install the app on a development store, I get the error Oauth error invalid_request: The redirect_uri is not whitelisted with http status code 400.

I've configured the whitelist url in my partner dashboard according to the tutorial.

I am curious why this demo chose to brute force graphql instead of using the Shopify API gem?

Seems kind of weird when so much configuration is already baked in for shopify_api... Just curious.

As a consumer of the Shopify App and API gem, and the ecosystem, I deeply underwhelmed by the move to JWT tokens as a thing to solve the broken browser embedded app issue, as put forth so far. Reading the code shows me gaping chasms to cross. I guess this is a group effort and eventually, some effort will result in showing off how everything works together.

It is cool that you show off Apollo for those that use Apollo, and I really liked that you also showed Axios off, as I only use that. So there are hints in this repo as to how it might all work and come together, but it is still not very clear how to architect the combo of the Shopify App with JWT and the Shopify API together. Close. But not quite. For me anyway. I guess more study is needed.

When I try a direct link in URL like /app/settings, its working fine but when I am trying to go from React route path, it's not going to the correct page and showing me the login page, this is my route code - https://d.pr/i/bvZovk

I think its a session auth problem. Is there any way to pass session in react-router-dom

With getSessionToken I use Axios - https://d.pr/i/tVos6U to get data but how can I pass the auth session to route?