Installation de react pour Laravel Shopify

Il est à priori préférable d’utiliser react plutôt que blade pour les interfaces des applications destinées à Shopify, je vais donc détailler ici la marche à suivre pour réaliser cette tâche.
Première chose il va falloir installer les paquets, nous allons donc saisir la ligne de commande suivante dans le répertoire de notre application :
npm install react react-dom @vitejs/plugin-react --save-dev
Cette dernière va installer les dépendances nécessaires, incluant celle pour vite puisque ce dernier est utilisé dans le projet pour un rafraichissement à chaud des modifications.
Ensuite il va falloir modifier le fichier [nom du projet]\.env afin de lui indiquer le moteur de rendu (blade par défaut dans le fichier de config Shopify), en ajoutant dans le fichier :
SHOPIFY_FRONTEND_ENGINE=REACT
Ensuite, il va falloir modifier le fichier [nom du projet]\vite.config.js afin de lui ajouter la référence a react, en remplaçant :
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/index.jsx'],
refresh: true,
}),
],
par :
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/index.jsx'],
refresh: true,
}),
react(),
],
Puis nous allons créer un fichier spécifique [nom du projet]\resources\js\App.jsx, dans lequel nous allons mettre une constante retournant un exemple, cette dernière est exportée pour être utilisée ailleurs :
const App = () => {
return (
<div>Hello toto world</div>
)
};
export default App;
Après cela, nous allons créer le fichier [nom du projet]\resources\js\index.jsx, le nom importe peu puisqu’il sera chargé depuis le template, nous allons y ajouter du code afin de créer le contenu de la page :
import {createRoot} from 'react-dom/client';
import App from './App';
const root = document.createElement('div');
document.body.appendChild(root);
createRoot(root).render(<App />);
Notez que nous chargeons notre fichier App et que nous allons ajouter le code généré par ce fichier à notre sortie.
Pour que le visuel soit affiché côté Shopify, il va falloir créer le template que nous allons arbitrairement appeler app.blade.php, car même si le gros du travail est réalisé par react, blade nous permettra d’utiliser des variables du moteur, il s’agit encore une fois d’un exemple de code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
@php
// Shopify API key
$shopify_api_key = env('SHOPIFY_API_KEY');
@endphp
<meta name="shopify-api-key" content="{{ $shopify_api_key }}" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
<!-- Ensures that the UI is properly scaled in the Shopify Mobile app -->
<meta name="viewport" content="width=device-width, initial-scale=1">
@viteReactRefresh
@vite('resources/js/index.jsx')
</head>
<body></body>
</html>
Ici nous avons du code html standard avec cependant 2 particularités, la récupération d’une variable d’environnement ainsi que l’injection de notre fichier index.jsx
A noter que pour intégrer une variable d’environnement dans blade, il est nécessaire de passer par un subterfuge, soit en injectant du code php et en utilisant la variable générée (comme sur mon exemple), soit en passant par une variable de retour dans le fichier [nom du projet]\config\app.php, pour ma part je préfère utiliser l’injection php.
Dernière opération, dans le fichier [nom du projet]\routes\web.php, on va indiquer la route pour cette page, dans mon exemple :
Route::middleware(['verify.shopify'])
->group(function() {
Route::view('/', 'app')->name('home');
});
Votre application utilise maintenant react pour son affichage.