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

[Marc_Gayle]

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.

[Marc_Gayle]

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

The JS Console produces the following error:

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

Thoughts? 

[Marc_Gayle · 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.

[Liam]

Hi there @Marc_Gayle 

Glad to see you found a solution to this error by including the App Bridge utilities. Thanks for updating your post - this will be helpful to other devs who encounter the same issue. I've also reached out to our developer documentation team to see if the Authenticate server-side rendered embedded apps using Rails and Turbolinks doc can be updated to advise devs to include app bridge even when not using NPM. 

Cheers,