React SPA - Can't get the latest version to work using Laravel 8 or Laravel 9

[ncpope]

I have gone through the installation steps a number of times on fresh installations of Laravel and I'm unable to get the React (or vue) SPA to load.

Steps to reproduce

• Install laravel 8 or 9
• Follow the steps indicated here: https://github.com/Kyon147/laravel-shopify/wiki/Installation (without setting the SPA react setting)
• You will see the output of: "You are: example-store.myshopify.com"

Current behavior

• Set the react settings (by the way there is a typo in the wiki docs where "react" should be "REACT" according to the enum (in .env set SHOPIFY_FRONTEND_ENGINE="REACT") Line 245 Utils.php
• You will see the following:

Feedback

• Are we supposed to get the current logged in user using the same Laravel Auth::user() function?

• It appears that this is breaking the app bridge from loading due to there not being a user logged in - views/layouts/default.blade.php

@if(\Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_enabled') && \Osiset\ShopifyApp\Util::useNativeAppBridge())

This isn't firing because useNativeAppBridge is returning false when SHOPIFY_FRONTEND_ENGINE is set to REACT. This makes useNativeAppBridge() return false.

Any help or advice here would be greatly appreciated. Thanks :)

[veed76]

@ncpope I also facing the same issue, I have Laravel 9 SHOPIFY_FRONTEND_ENGINE REACT.

[Kyon147]

@ncpope

That is because as soon as you set SHOPIFY_FRONTEND_ENGINE to REACT you will no longer get the JWT/Session stuff in between the page views. As this removes AppBridge from the blade set up as it is no longer needed.

It means you need to set up your own JWT auth using React, such as using their NPM package https://www.npmjs.com/package/@shopify/app-bridge-react etc

Just setting the engine to REACT is not enough to use an SPA out of the box. There is still set up required by you to load the react app into the view. As in your screenshot i don't see <div id="app"></div> for a start.

Closing as this is not a package issue but a set up issue on the react side. I might need to make the docs more clear on what this actually does.

[Kyon147]

There is some more detail on the original PR gnikyt/laravel-shopify#1173

It might not be a step by step walkthrough but will point you in the right direction.

[ncpope]

@Kyon147 thanks so much. The discussion you posted looks like a good place to start.