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.
- 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
- Copy the folders shown in the image below from
- Now compare
shopify-laravel-app/package.jsonand move required dependencies and dev dependencies from the first package.json to the second package.json (My package.json file in
shopify-laravel-applooks like this after this step)
- Update your
.gitignorefile if you want to ignore the dist folder to push on your version control remote repo, you can add
.gitignorefile for this.
npm installinto the
shopify-laravel-appfolder to install all the dependencies.
- Now we have to modify our
vite.config.js, the vite config provided by
shopify-frontend-template-reacthas 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
vite.config.jswith the code given below.
- Now we have to update
.envfile and add
vite.config.jscan access Shopify API key in line 13. Also, add other environment variables that we need in our shopify-app.php config file.
shopify-laravel-app/resources/js/app.jsand import our frontend’s entry file index.jsx into the app.js
- Update the
shopify-laravel-app/resources/views/welcome.balde.phpwith the code below so we can load our react app into this view
- Check your
web.phpfile and make sure you have one get route names home and with
verify.shopifymiddleware. Check the file below for reference.
- Lastly, run
npm run devfrom 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