Created this solution with this https://github.com/Kyon147/laravel-shopify open source solution. Added React as a front-end technologies. It also supports SPA. Let's describe this in detail about this solution. It might be helpful for everyone who wants to build a Shopify App with Laravel and React
- Composer
- Nodejs
- Ngrok (for local development)
composer create-project laravel/laravel shopify-appcomposer require kyon147/laravel-shopifyphp artisan vendor:publish --tag=shopify-config
You have to disable CSRF token verification.
Open \App\Http\Middleware\VerifyCsrfToken.php, and add or edit:
protected $except = [
'*',
];
Routing: Add Shopify verification middleware to Routing like the below:
Route::middleware(['verify.shopify'])->group(function() {
Route::view('/', 'app')->name('home');
});
View:
app.blade.php File:
<!DOCTYPE html>
<html lang="en">
<head>
@viteReactRefresh
@vite('resources/js/index.jsx')
</head>
<body>
</body>
</html>
Model > User.php:
Include ShopModel trait Like the below:
use Osiset\ShopifyApp\Contracts\ShopModel as IShopModel;
use Osiset\ShopifyApp\Traits\ShopModel;
class User extends Authenticatable implements IShopModel
{
use Notifiable;
use ShopModel;
protected $fillable = [
'name',
'email',
'password',
];
protected $hidden = [
'password',
'remember_token',
];
protected $casts = [
'email_verified_at' => 'datetime',
];
}
-
Need a Partner Account
-
Create an APP Manually
-
Collect the credentials
-
-
Edit .env file
SHOPIFY_APP_NAME=App_Name
VITE_SHOPIFY_API_KEY=
SHOPIFY_API_KEY=
SHOPIFY_API_SECRET=
- Create a MySQL database
- Put the DB Credentials like below
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=starter
DB_USERNAME=root
DB_PASSWORD=1234
php artisan migratenpm installnpm run devngrok http 8000(If the port is 8000)- Put ngrok URL to Shopify URL part
- Change the front-end engine to REACT in
config/shopify-app.phpor add the below line to.env
SHOPIFY_FRONTEND_ENGINE=REACT
- Then install dependencies of React
npm install react react-dom @vitejs/plugin-react
- Create an entry point
index.jsx
import { createRoot } from 'react-dom/client'
import App from './App'
import '@shopify/polaris/build/esm/styles.css'
const root = document.createElement('div')
document.body.appendChild(root)
createRoot(root).render(<App />)
- Create
App.jsx
const App = () => {
return (
<h1>Bismillahir Rohmanir Rohim</h1>
);
};
export default App;
- Add react to
vite.config.js
import react from '@vitejs/plugin-react'
plugins: [
laravel({
input: ['resources/js/index.jsx'],
refresh: true,
}),
react()
]
import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Now you can test the Shopify app with the store.....
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent