Site icon Softopia

How to create a Shopify app with laravel-shopify package and React SPA

I am using laravel shopify (previously maintained by osiset/gnikyt) package for almost 1 year now and Shopify is crazily changing the way apps are developed and introducing new changes quite frequently.

I have started my app using this package and BLADE template which worked fine and still works but there are so many issues coming due to the changes introduced by Shopify and you may have seen may issues related to the blade engine on the GitHub issues section of the package.

The recent change of the new admin URL of Shopify and the app bridge update again forced the package maintainer to make changes in the package and developers to update their apps according to new guidelines. I was thinking to update my app Easy Profile Editor to a SPA for a long time and I thought this is the right time to move to the SPA because Shopify has their official React Template for apps and most likely it’ll be up to date whenever they introduce any new change related to the app bridge and frontend.

Although now they also have an official PHP app template built on top of Laravel, because I am already using Laravel Shopify so I just wanted to use their React SPA with my current app. So let’s see how can you use laravel-shopify package with SPA.

Shopify app with laravel-shopify and React

I am not going to start from the beginning because setting up the package is easy and covered very well in the package documentation so we are going to focus mostly on React SPA part.


Set up React SPA in laravel-shopify app

Once the above steps are done, Follow the steps below

Note that I am using billable middleware with SPA, to use the default billable middleware i have to modify vendor\kyon147\laravel-shopify\src\Http\Middleware\Billable.php file with the code below as per this comment so if you want to use billable middleware then make this change.

Everything is working fine for me with this setup including HMR and the build is also working fine, I have not published my app yet after this BLADE to REACT migration so no idea about approval or rejection but don’t see any issues so I hope there will be no issues while approval.

The final code can be found here

Exit mobile version