Let's move all of this JavaScript from the Blade template to our app.js file. So I'll take that code, open app.js, and paste it in here. Default Laravel installation comes with Vite, so if you're not familiar with Vite, I suggest having a quick look at the documentation on Laravel or watch a video or two here at Laracasts. There already is a default Vite configuration with our Laravel installation. So we can open vite.config.js, and seems like we need to run npm install. So let's open terminal, we'll do php artisan npm install. Then we also need to run npm run dev to start the development server for Vite. So we'll do npm run dev, and we see that the Vite development server has been started. Then we need to load our app.js within our welcome.blade.php template.

So we'll do npm run dev, and we see that the Vite development server has been started. Then we need to load our app.js within our welcome.blade.php template. To do that, we need to use a vite blade directive. So let's get rid of this, and we'll do vite, and we need to provide the path to our app.js file, which is within the resources/js directory. So we'll do resources/js/app.js. Note that within the app.js file, we are accessing this app instance globally this way. And we know that this variable is defined and available within our default template. So if we open the default.blade.php template, we see that instance right here.

And we know that this variable is defined and available within our default Blade template. So if we open the default Blade template, we see that instance right here. Since the app variable is defined globally with the var keyword, it automatically becomes part of the global window object. So we could access this app instance using window.app as well. We could also create a local variable here called something like const app equals window.app, and then use it this way. We could do the same thing with the actions. We could do const actions equals window.actions, and then use these this way. Now we could create the app instance ourselves within the app.js, but that would require

We could do const actions = window.actions, and then use these this way. Now we could create the app instance ourselves within the app.js, but that would require some configuration, and also we would need to ensure that it's one app instance that we're using across JavaScript files. We could also override the default Blade template entirely if we wanted to. That way we would have more control over our templates. So instead of extending it from the default template, you could create your own default template and copy and paste that code in there and customize it based on your needs. All right, so let's move on to Vite and hot module replacement. As you might know, Vite comes with HMR or hot module replacement, which provides a smoother

All right, so let's move on to Vite and hot module replacement. As you might know, Vite comes with HMR or hot module replacement, which provides a smoother development experience. You don't have to reload the entire page or reload the frame every time you make changes in your code. So let's open the browser, and this first time we do need to refresh the page. So I'm going to reload the entire page, and seems like the JavaScript part is not being loaded. Let's open the dev tools and inspect the console to see the errors. Seems like the Vite client and app.js are not being loaded properly.

Let's open the dev tools and inspect the console to see the errors. Seems like the Vite client and the app.js are not being loaded properly. This is related to the Vite development server and HMR. To fix this, we need to adjust the Vite configuration file a little bit. So we're going to go back to the code, open our vite.config.js file, and we're going to add the server configuration in here. So we'll do server, then we'll add the HMR, and we'll set the host to localhost. Now your settings might be a bit different depending on your local environment, so refer to the documentation if you face some issues. If you still face issues with HMR not loading, you can also check firewalls or ad blockers.

to the documentation if you face some issues. If you still face issues with HMR not loading, you can also check firewalls or ad blockers and make sure to turn them off. For example, if you're using Brave browser, it automatically blocks some scripts. So turn that off to troubleshoot your JavaScript not loading issues. Another thing you can try is to set the host on the server to something like 0.0.0.0, indicating that server should listen for incoming requests on all available network interfaces. Then you can also try adding the WebSockets protocol to HMR config. All right, so I'm going to remove all of these from here since we don't need. We're just going to keep the host localhost.

All right, so I'm going to remove all of these from here since we don't need. We're just going to keep the host localhost. Let's open the browser now. Let's refresh the page. And now everything loads fine, as you can see here. We see the model pop up, and we have the page title. Let's go back to the code and make a quick change to the JavaScript. Let's change the title text to Faker. Let's save it. Go back to the browser.

Let's save it. Go back to the browser. And as you can see, the change is automatically applied without the need to refresh the page or reload the frame. Now you may not want to use AppBridge components from the CDN and instead want to import them in your JavaScript files as indicated in the documentation. We can do that by installing the NPM AppBridge dependency. So let's go back to the code here. Let's open the terminal. I'm going to cancel out from here for now.

Let's open the terminal. I'm going to cancel out from here for now. We'll do vendor/bin/npm install @shopify/app-bridge, and then save it as a dev dependency. Then let's do npm run dev again. Let's close this out. And first, let's import the titleBar. So we'll do import titleBar from '@shopify/app-bridge/actions'. We can also import the model because we're using it right here. And let's get rid of the actions from here.

We can also import the model because we're using it right here. And let's get rid of the actions from here. And we can actually drop this actions variable entirely. Let's save this. Go back to the browser. And as you can see, everything is working as expected. Now to make sure that everything is still working, let's make some change in the text. So we'll do faker model. Let's go back. And as you can see, it is working as expected.

Let's go back. And as you can see, it is working as expected. Now of course, you could organize these as you like. But for the sake of simplicity, I'm going to keep these within the app.js file. You could create separate pages, separate JavaScript files, and load different views and so on. Let's add a couple of buttons to this model. Maybe you want to close the model and the other one to make an Axios request. So we'll create two buttons here. We'll do const okButton equals button.create.

So we'll create two buttons here. We'll do const okButton equals button.create. We'll pass the app instance, set the label to OK. We need to import the button as well. So let's import that. And we'll create another button called cancelButton. And the label will be cancel. Then we can add these buttons to the model by adding the footer property to the modelOptions. So we'll do footer and set buttons.

options. So we'll do footer and set buttons. And primary button will be OK button. And the secondary button will be the cancel button. Then we need to register the click event listener so that we can do something whenever these buttons are clicked. Now the way we can do that using AppBridge is that we need to subscribe to certain actions. So for the cancel button, when the cancel button is clicked, we need to close the model. So we'll do cancelButton, subscribe, buttonAction, click. And we'll do myModel dispatch modelAction close.

So we'll do cancel button, subscribe, button action, click. And we'll do my model dispatch model action close. Let's quickly test this out to make sure that it works before we implement the OK button action. So let's go back here. We have the buttons. If we click cancel, it works. Let's reload the page and we have the model back. All right. So let's now implement the OK button.

All right. So let's now implement the OK button. So we'll do OK button, subscribe, button, action, click. And in this case, we want to make an Axios request. Axios, as you might know, is available within the fresh Laravel installation. If you notice the top of this file, we are importing this bootstrap.js file. If we inspect this, this makes Axios available on the window object. So we could make the Axios call from here by using window object. So we'll do window.axios.get. And maybe let's make a GET request to some route like me that's going to print the username.

So we'll do window.axios.get. And maybe let's make a get request to some route like me that's going to print the username or something like that. So we'll do then response console.log response. Now to not duplicate the middleware verifyShopify on every single route, we're just going to group the routes within the middleware. So we'll do a Route::middleware verifyShopify group and then we'll register all of the routes within it. So let's take this, put it here, we'll remove the middleware from here. In fact, we can actually simplify this to just short arrow function.

So let's take this, put it here, we'll remove the middleware from here. In fact, we can actually simplify this to just a short arrow function. Let's add another route here. So get me and it's going to return a JSON response that will contain the username. So we'll do auth username. Let's try this out. So let's go back to the browser. Let's open the dev tools. Let's click OK. And as you can see, the Axios request was made.

Let's click OK. And as you can see, the Axios request was made. We're getting status 200. Let's inspect the data. And the name is set to laracasts/testing/store.myshopify.com. This is the username in our case, because remember, in the context of Laravel Shopify, the user is the shop. When we installed our application to the development store, a new user or a shop record was created in the users table. If we open our database and inspect the users table, we see that we have this user record.

in the users table. If we open our database and inspect the users table, we see that we have this user record where the name is set to the shop name. Now one thing that we should do here is that we should add Axios interceptor to send the correct and accurate session token along with every request. Right now it works and handled for us because the Laravel Shopify package sets the default token header. But to avoid session token expiry race conditions, we should add the interceptor to our Axios instance and send the most recent and up-to-date session token. So let's open the bootstrap.js file and we'll add the interceptor in here.

instance and send the most recent and up-to-date session token. So let's open the bootstrap.js file and we'll add the interceptor in here. So we'll do window.axios.interceptors.request.use. Then we can call the getSessionToken function on the utils object. So we can do window.utils.getSessionToken. We'll pass the app instance in here. So we'll do window.app. And then once the session token is received, we can add the session token to our Axios configuration. So we'll do config.headers.authorization equals bearer token.

configuration. So we'll do config headers authorization equals bearer_token. And finally, we need to return the config and we also need to return this in here. Now let's try everything again to make sure that it still works. Let's go back to the browser. Let's close the model. That still works. Let me clear this out. Let's refresh the page. We have the model.

Let's refresh the page. We have the model. Let's click OK. And the Axios request is still being made and is successful. All right. In the next episode, let's add the Laravel Telescope as a dependency to gain some insights on what is going on behind the scenes when the requests are being made back and forth between the Shopify and our Laravel app.