I can't get a vanilla Rails + Turbolinks app working

Solved
Marc_Gayle
Excursionist
14 2 1

Hi  Guys,

I just went through the Rails & Turbolinks tutorial - because I am creating a Shopify app for the first time. I got to the stage where my app is loading but all I am seeing is the "Loading..." page which is the 'SplashPage#Index' but it isn't redirecting to my 'Home#Index' like I expect.

I am using Rails 6.0.3.6, Ruby 3.0.1 and I am not using React. I want to just use Rails & Turbolinks if possible to build my app, so that's why I chose that tutorial.

This is the server log (note, I blanked out my IP address for privacy purposes).

Started GET "/?hmac=5e2e8c366d75e39831b775be635e4118a99c&host=bWFueS1wcmXlzaG9waWZ5LmNvbS9hZG1pbg&locale=en&new_design_language=true&session=7deccadd83c28b82dd4dd2902fff5c76573f365f637c2a&shop=random-shop.myshopify.com&timestamp=1619310003" for 69.160.XXX.XX at 2021-04-24 19:20:04 -0500

Cannot render console from 69.160.XXX.XX! Allowed networks: 127.0.0.0/127.255.255.255, ::1

Processing by SplashPageController#index as HTML

  Parameters: {"hmac"=>"5e2e8c366d75e39831b775be635e4118a99c", "host"=>"bWFueS1wcmXlzaG9waWZ5LmNvbS9hZG1pbg", "locale"=>"en", "new_design_language"=>"true", "session"=>"7deccadd83c28b82dd4dd2902fff5c76573f365f637c2a", "shop"=>"random-shop.myshopify.com", "timestamp"=>"1619310003"}

  Shop Load (1.8ms)  SELECT "shops".* FROM "shops" WHERE "shops"."shopify_domain" = $1 LIMIT $2  [["shopify_domain", "random-shop.myshopify.com"], ["LIMIT", 1]]

  CACHE Shop Load (0.2ms)  SELECT "shops".* FROM "shops" WHERE "shops"."shopify_domain" = $1 LIMIT $2  [["shopify_domain", "random-shop.myshopify.com"], ["LIMIT", 1]]

  Rendering splash_page/index.html.erb within layouts/embedded_app

  Rendered splash_page/index.html.erb within layouts/embedded_app (Duration: 0.1ms | Allocations: 6)

[Webpacker] Everything's up-to-date. Nothing to do

  Rendered layouts/_flash_messages.html.erb (Duration: 0.6ms | Allocations: 76)

Completed 200 OK in 38ms (Views: 24.5ms | ActiveRecord: 2.3ms | Allocations: 8450)

What could be causing this behaviour and how can I fix it?

What other code would you need to see to help me troubleshoot this properly?

Edit 1

Not sure if this has any bearing on anything, but from my `rails console`, when I do `ShopifyApp.configuration.api_key`, I get `nil` returned.

0 Likes
Marc_Gayle
Excursionist
14 2 1

I did some more debugging and this is what I found.

The JS Console produces the following error:

Screen Shot 2021-04-25 at 9.37.17 PM.png

Not sure what causes this and how to fix it or even how to debug it properly.

Thoughts? 

0 Likes
Marc_Gayle
Excursionist
14 2 1

This is an accepted solution.

I finally figured it out. Even though I am not using NPM explicitly, I needed to still include the `@shopify/app-bridge` utilities into my JS package pipeline.

I did this by running the following commands:

    $ yarn add @Shopify/app-bridge
    $ yarn add @Shopify/app-bridge-utils

It worked like a charm, and now everything is good to go.

0 Likes