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.

Prerequisites

• Install Laravel and set up the package as described here https://github.com/Kyon147/laravel-shopify/wiki/Installation
• We are going to use Vite so if you are using the old Laravel version then follow this Laravel Mix to Vite migration Guide
• (Optional) I am using a windows machine and I use https://laragon.org/ for local development so I don’t have to use ngrok for HTTPS because laragon provides the virtual host with SSL support on the local system.

Set up React SPA in laravel-shopify app

Once the above steps are done, Follow the steps below

• Clone or download this shopify-frontend-template-react repo in a separate folder.
• create a folder named frontend in the resources folder of your Laravel app resources\frontend
• Copy the folders shown in the image below from shopify-frontend-template-react to resources\frontend

• Now compare shopify-frontend-template-react/package.json and shopify-laravel-app/package.json and move required dependencies and dev dependencies from the first package.json to the second package.json (My package.json file in shopify-laravel-app looks like this after this step)

• Update your .gitignore file if you want to ignore the dist folder to push on your version control remote repo, you can add /public/dist into the .gitignore file for this.
• Run npm install into the shopify-laravel-app folder to install all the dependencies.
• Now we have to modify our shopify-laravel-app/vite.config.js , the vite config provided by shopify-frontend-template-react has so many options and i had a hard time using it as it is with our laravel setup so i have modified it and created the vite.config.js as shown below which is working fine so you can just replace your shopify-laravel-app/vite.config.js with the code given below.

• Now we have to update .env file and add VITE_SHOPIFY_API_KEY=YOUR_KEY_HERE so vite.config.js can access Shopify API key in line 13. Also, add other environment variables that we need in our shopify-app.php config file.

• open shopify-laravel-app/resources/js/app.js and import our frontend’s entry file index.jsx into the app.js

• Update the shopify-laravel-app/resources/views/welcome.balde.php with the code below so we can load our react app into this view

• Check your web.php file and make sure you have one get route names home and with verify.shopify middleware. Check the file below for reference.

• Lastly, run npm run dev from the root of your Laravel app folder and your Shopify app will be up and running with React SPA and laravel-shopify package.

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 https://github.com/rvibit/laravel-shopify-react-spa