There are a few steps involved when setting up the app as a React SBA. Before we get started, I want to mention that I've upgraded the project to Laravel 10 because Laravel Shopify has gotten an update that supports Laravel 10. So in composer.json, now we have Laravel version 10 and we also have a newer version for Laravel Shopify package. All right, so let's get the React set up. First, we need to set the frontend engine to React, and we can do that by adding a new environment variable. If we open the Shopify app configuration file and scroll all the way down, we have this Shopify frontend engine environment variable, which is set to Blade by default.

If we open the Shopify app configuration file and scroll all the way down, we have this Shopify frontend engine environment variable, which is set to Blade by default. So let's copy this, open our .env file and set it to React. Next, we need to install the necessary dependencies. So let's open a terminal. I have the Vite development server running, so I'm going to stop it for now and we will install the necessary dependencies. So we'll do npm install React, ReactDOM, and we also need the Vite JS plugin for React. So let's install those. And next, we need to basically stop using the Welcome Blade template.

So let's install those. And next, we need to basically stop using the Welcome Blade template. Right now, we have this Welcome Blade template that renders our app JS and it extends the default layout. So instead of this, we just need to create some sort of app template with just basic HTML in it without extending any layout because we're no longer going to need this default layout. So let's open the project files, open resources, views. We'll actually create a new file here called app.blade.php. I'm just going to paste in some basic HTML here.

We'll actually create a new file here called app.blade.php. I'm just going to paste in some basic HTML here. And let's also adjust our routing to render the app.blade instead of the welcome.blade. So let's open web.php. We'll change this from welcome to app. And actually, instead of doing it this way, we could change this to route view and do it this way instead. Now, let's remove the welcome.blade template because we no longer need that. And we'll also remove the related app.js file because we're not going to need that anymore.

And we'll also remove the related app js file because we're not going to need that anymore. Instead, we're going to create a new index.jsx because we're going to be working with React. And this file will be the entry point for our React SPA. This is going to set up our application and render it within a div that will attach to the body of our HTML. So first, let's create the root element. So we'll do const root = document.createElement('div'). Then let's add this element to the document body.

So we'll do const root = document.createElement('div'). Then let's add this element to the document.body. So we'll do document.body.appendChild(root). And finally, let's call the createRoot function from the ReactDOM and we'll pass the root variable here and we'll render some sort of App component. So we'll do App this way. Let's import the createRoot and let's create this App component to simply render some 'hello world' or something like that. So let's create a new file here called app.js and we'll simply render some kind of 'hello world' in this component.

So let's create a new file here called app.js and we'll simply render some kind of hello world in this component. So we'll do return hello world. Let's add the export default app here and let's go back to the index page. Now let's import this component. Great. So next, we need to load our index.jsx file from the app.blade.php template using the Vite directive. So let's open app.blade.php here and we'll load it in here. So we'll do Vite resources/js/index.jsx.

So let's open app.blade.php here and we'll load it in here. So we'll do vite resources/js/index.jsx. And actually, let's stay consistent and rename this to app.jsx as well. Next, we also need to add the vite react-refresh directive right before the vite directive to enable hot module replacement with fast refresh. So we'll do vite react-refresh. Now, for this to work, we also need to add the react plugin to vite configuration. So let's open vite.config.js and we'll just call the react function within the plugins array. So we'll do react and we need to import this from the vitejs/plugin-react that we.

plugins array. So we'll do a react and we need to import this from the vite-plugin-react that we installed. So we'll do import React from 'vite-plugin-react'. Let's also remove the CSS from here because we'll import CSS within JavaScript when needed. Let's rename this to index.jsx because that's our entry point. And I think we're ready to test this out. So let's open the terminal and run npm run dev to start the Vite development server.

So let's open the terminal and run npm run dev to start the Vite development server. Then let's open our development store and open our app. And as you can see, everything is still working and we see the hello world displayed in here. Now, even though this works, we actually lost the app bridge functionality because we're no longer using the default Blade, which initializes the app bridge instance. This means that we need to initialize the Shopify app bridge ourselves. And as complicated as that sounds, it's actually not that bad.

This means that we need to initialize the Shopify app bridge ourselves. And as complicated as that sounds, it's actually not that bad. To make this work, we need to install app-bridge-react library. app-bridge-react provides hooks and components that allow us to use and work with app bridge in a similar way within React SBA as we did with Blade. So let's go back to code. Let's open terminal. I'm going to stop the development server here and we'll do npm install @shopify/app-bridge-react. Let's run it.

Shopify app bridge react. Let's run it. Then let's run npm run dev again and let's adjust our app that is to render the div within the AppBridgeProvider. So we'll open our app and we'll render the provider here. And as you can see, AppBridgeProvider needs the appBridgeConfig to be passed as a prop. So let's put this this way and we'll create the config in just a minute. Let's pass some sort of appBridgeConfig here that will create the appBridgeConfig is basically a JSON object that contains the API key

Let's pass some sort of appBridge config here that will create the appBridge config is basically a JSON object that contains the API key, host, and a forceRedirect properties. If we open the default blade template from the Laravel Shopify, we see that appBridge config in here. So this object right here is the configuration. We have the API key, the host, and forceRedirect. So we basically need to create this same object. So let's go back to app.js and we'll need the host property here. We also need the API key and we need the forceRedirect, which

So let's go back to app.js and we'll need the host property here. We also need the API key and we need the forceRedirect, which will set to true by default. Now, as far as the host goes, we can use the URLSearchParams object. So we'll do new URLSearchParams and we'll pass the query portion of the URL and we can get that by using location.search. So location.search. And then we can get the host parameter this way because remember, the host is part of the URL.

And then we can get the host parameter this way because remember, the host is part of the URL. All right. Next, we need to get the API key. We actually expose these environment variables on import that made a .env. So import that made a .env and then we can access the environment variables this way. However, only variables that are prefixed with Viet_ are exposed.

However, only variables that are prefixed with viet_ are exposed. This is done basically to avoid exposing other sensitive information like database related environment variables to the client. So we'll add maybe something like viet_shopify_api_key and we need to add this to our .env file. So we'll just duplicate our shopify_api_key and call this viet_shopify_api_key. Let's go back to App.js and the final property here,

Viet Shopify API key. Let's go back to App.js and the final property here, which is the forceRedirect. We are setting it to true by default. Now, while this looks good, the host parameter is actually only guaranteed on initial load of the app as per the documentation. And it might be removed or lost in some edge cases, maybe due to navigation, routing bug or even manually. And without the correct host, the app won't

maybe due to navigation, routing bug or even manually. And without the correct host, the app won't work as expected. So what we can do is that we can cache the object within the component state this way. So instead of creating this object this way, we'll turn this into a state and use useState and we'll return this object as part of the initial state so that it is only initialized one time. So we'll do it this way, return this object and add

initialized one time. So we'll do it this way, return this object and add the parentheses here. We can also store this host parameter within a variable and cache it on the window object and use it as a fallback value. That way, for whatever reason, it is not part of the URL. We may have a fallback value that we can use. So we'll create a host variable here, set it to this. Then we'll do window.__

So we'll create a host variable here, set it to this. Then we'll do window.__Shopify.host equals host. Then in here we can add a fallback logic to get the value from the window.__Shopify.host if this is not set for whatever reason. And finally, let's pass the host here. All right, so let's test this out to make sure that it works and nothing broke. Let's open the browser.

and nothing broke. Let's open the browser. Let's refresh the page and we see that everything is working. Let's actually make a small change here to make sure that it works. Let's add maybe <h1> tag. Let's save, go back to the browser and sure enough, that works. All right.

enough, that works. All right. So the next step is to create some components and start working on our apps UI. For that, we need to learn a little bit about Polaris, which is a React library and a design system for the Shopify admin. We'll do that in the next episode.