Let's talk a little bit about AppBridge since I've mentioned it a few times before. Shopify AppBridge is a tool, a JavaScript library, that enables us to create apps that are embedded within the Shopify admin. If we inspect the element here, we see that our app is embedded within Shopify as an iframe. So on web, apps are embedded within the iframe, and on Shopify mobile app, they're embedded within WebView. AppBridge library provides some UI components that can be used within our app. Right here, these navigation components on the left and everything in between, excluding this little section here, is rendered by Shopify. Then this section is rendered by our app using AppBridge. So to take advantage of AppBridge and embedded apps, we need to have embedded apps turned on in Partner Dashboard. Now we already do have it turned on because otherwise our app would not load in here and it wouldn't work, but just something to keep in mind if for some reason your app is not loading.

Now we already do have it turned on because otherwise our app would not load in here and it wouldn't work, but just something to keep in mind if for some reason your app is not loading. So if we go to Shopify Partners, you go within the app setup for your app, and you scroll all the way down, and there is embedded app section here, you click on Manage, and then just ensure that it is enabled in here. All right, so let's now open the code and inspect this default layout blade template to go over what it actually does. So we'll open default.blade.php, and this is available as part of Laravel Shopify package. If we scroll down here, we see that we get the AppBridge instance right here, and AppBridge is loaded by the script above along with the AppBridge utilities. The app instance is created by calling this createApp function, and it's passing API key, the host, and forceRedirect as true as arguments. The host parameter is provided within the URLs between the redirects, and it is also available in the final URL that renders our app.

The app instance is created by calling this createApp function, and it's passing API key, the host, and forceRedirect as true as arguments. The host parameter is provided within the URLs between the redirects, and it is also available in the final URL that renders our app. In fact, if we go back to the browser and inspect our URL here that renders our app, we see that the host parameter is available right here. It is base64 encoded host parameter. So let's take this value and decode it to see what it actually is set to. Let's open the base64 decoder. Let's paste that in, decode, and as you can see, it is admin.shopify.com/.store/.laracasts/testing/store. ForceRedirect parameter that is set to true here is basically there to detect if app is loaded outside of the Shopify admin, and it automatically redirects the user back to the Shopify admin page to load the app. Now, you might notice this tokenHandler Blade right here.

and it automatically redirects the user back to the Shopify admin page to load the app. Now, you might notice this token.blade.php right here. That's the template that handles session tokens and also configures Axios to automatically pass the session token along the requests. When building non-SBA apps like the one that we have here with Blade, the app needs to make requests to /authenticate/token route in between requests, and this route invokes the token method which does the session token handling. So if we inspect that AuthController trait again, when the request goes to that route, it invokes this token method and this handles the session tokens. If we open this token.blade.php template and scroll down, we see that there is the session token handling here. It is calling getSessionToken on the utils variable, and this is set within the default blade right here.

If we open this token.blade.php template and scroll down, we see that there is the session token handling here. It is calling getSessionToken on the utils variable, and this is set within the default blade right here. There is actually a nice diagram on how the session tokens work and the basic flow within the Shopify documentation. So basically the request is made to load the app. The skeleton is loaded. Then the appBridgeClient is created. A request is made to get the session token. The request is made to get some data from the backend passing along the session token. Backend verifies the session token and returns the data to the frontend. If we scroll down a little bit, there is another diagram here that shows the request flow. If the session token is not valid or is expired, the request is rejected.

If we scroll down a little bit, there is another diagram here that shows the request flow. If the session token is not valid or is expired, the request is rejected. Otherwise, it checks for access token. If there is no access token, then we go through the auth flow again. Otherwise, it responds to the request. So now that we sort of understand how things work behind the scenes, let's make some customizations using Blade to our application. So I'm going to close all of these things out from here, and let's work with our welcome.blade.php template. Let's open the Shopify app bridge documentation and go to the actions overview page. On the left side, we see a bunch of available actions that we can use and add to our app, like buttons, modal, navigation menu, and so on. Let's add maybe a title bar.

On the left side, we see a bunch of available actions that we can use and add to our app, like buttons, modal, navigation menu, and so on. Let's add maybe a title bar. So let's click on that. Scroll down. And the code example here uses imports and creates the app this way. However, we are using Blade templates and also are loading the Shopify app bridge and utilities through CDN. If we go back to the actions overview here, we see that there is an alternative way of making these work. So instead of doing imports, we can make it work this way because app bridge is available within the global window object. So let's go back to the code. And if we inspect the default Blade template again and scroll down, we see that it yields scripts.

So let's go back to the code. And if we inspect the default Blade template again and scroll down, we see that it yields scripts. So we can basically add our custom JavaScript in here. We can do section, scripts, and section. And within here, we'll put our custom JavaScript. Let's go back to the documentation and go to the title bar. We're going to copy this code and paste it in here. And we need to access the title bar somehow. Now, to access the title bar, we can use actions.titlebar because actions is available as a global variable. If we go back to the default Blade template again, we see that actions is available right here, as well as the app instance.

Now, to access titlebar, we can use actions.titlebar because actions is available as a global variable. If we go back to the default Blade template again, we see that actions is available right here, as well as the app instance. Let's go back to our app. Let's reload the frame. And as you can see, it works as expected. We see the my page title right here. Let's do another example. And this time, let's do model. Let's scroll down in here. We'll create model this way.

Let's scroll down in here. We'll create model this way. And again, we'll access the model through actions. So we'll do actions.model.create. Pass the app instance as well as the model options. Then we actually need to open this model, right? Because right here, we're just creating a model instance. So if we go back to the documentation and scroll down, there is a way right here to open and close model. So we need to dispatch the open action this way. So we'll copy this, paste it here.

So we need to dispatch the open action this way. So we'll copy this, paste it here. Again, we'll access this through actions. And you could create local variables to not duplicate these things this way. But I'm just showing this to you as an example. Let's go back to our app. Let's reload the frame. And as you can see, it works. And we see the model. As you can imagine, you can tie these things to certain events like open model when a button is clicked, make API request to backend, and so on.

And we see the model. As you can imagine, you can tie these things to certain events like open model when a button is clicked, make API request to backend, and so on. You can also use regular HTML elements to build your UI and then use the components from AppBridge to complement your UI and add necessary actions. You also don't have to put all of the JS here. You can move the JS in JavaScript files and load them through Vite along with hot module replacement, which makes development much smoother experience. Let's do that in the next episode.