We will use Laravel Telescope as our debugging tool and also to gain insights on what queries are being executed, what requests are being made, and so on. If you don't know what Laravel Telescope is, it's a first-party tool with a nice UI providing insights into the requests that go in your Laravel app. In addition to requests, it also tracks things like exceptions, DB queries, logs, jobs, mail, and so on. So let's open our code base, open terminal. We'll run vendor/bin/sail composer require laravel/telescope --dev. And notice the dev flag here. We're adding this because we will only be using Telescope for local development, and it's important because you don't want to deploy this in production without proper access control, since it can expose a lot of sensitive data. Then we need to run the php artisan telescope:install command. So we'll do vendor/bin/sail php artisan telescope:install. And finally, we need to migrate.

control, since it can expose a lot of sensitive data. Then we need to run the php artisan telescope:install command. So we'll do php artisan telescope:install. And finally, we need to migrate the database. So we'll do php artisan migrate. Then because we're going to be using Telescope only for local development, we need to remove the TelescopeServiceProvider registration from the app configuration. And instead, we need to manually register it based on our app environment. So let's open app.php. Let's scroll down to the providers section. And at the end, as you can see, the TelescopeServiceProvider has been added. So we're going to remove this, and instead we're going to register this manually. So let's open AppServiceProvider. And within the register method here, we're going to check if the environment is development or local. So we'll do if ($this->app->environment() === 'local'), then we'll register the service provider. So we'll register Telescope.

here, we're going to check if the environment is development or local. So we'll do if this app environment is local, then we'll register the service provider. So we'll register TelescopeServiceProvider from the Laravel\Telescope namespace. And we also need to register the TelescopeServiceProvider from within the app namespace. So we'll do app()->register(TelescopeServiceProvider::class) from within the app\Providers namespace. Then we also need to prevent the Telescope package from being automatically discovered by the composer. So we need to adjust composer.json file. And within the don't discover array, we're going to add laravel/telescope. All right, I think that should be good enough. We don't need to configure anything else for now. But you can refer to Laravel Telescope documentation if you want to customize or configure something specific for your application. Now let's open localhost/

else for now. But you can refer to Laravel Telescope documentation if you want to customize or configure something specific for your application. Now let's open localhost/telescope. And as you can see, we get this nice page, which is the requests page showing incoming requests. Now we don't have any requests yet. So let's switch to our Shopify admin. Let's click OK, which should make a GET request. Let's go back to Telescope. And as you can see, we are receiving the GET request. Let's go back to the app. Let's refresh the page. Let's go back to Telescope, load new entries. And as you can see, the requests are being logged. I actually want to show you the requests that come in when User first installs the app. So what I'll do is that I'm going to uninstall the app from our development store. So let's go back to the development store here. We'll open settings, scroll down, click on apps, and we'll uninstall the faker. We also should delete

uninstall the app from our development store. So let's go back to the development store here. We'll open settings, scroll down, click on apps will uninstall the faker. We also should delete the shop or the user record in our database so that it gets created again when we install the app. So let's open the code. Let's open the database table, which is users. And let's delete this. Let's go back to the browser. Let's switch to the partners dashboard and click on select store again so that we can go through the installation again. And we'll click on this install app in just a second. Now, before we do that, I want to clear all of these out. So we'll click on this delete button. We have no more requests. Let's go back. Let's click install app. It's going to redirect us to the grant page. We'll authorize it. And the app has been installed successfully. Now let's switch back to telescope. As you can see, we have a bunch of requests coming in. We already talked about this

to the grant page. We'll authorize it. And the app has been installed successfully. Now let's switch back to Telescope. As you can see, we have a bunch of requests coming in. We already talked about this process when we went through the source code to understand what happens behind the scenes within the Laravel Shopify. With Telescope, we can now confirm that. As you can see, initial request is made to the home route, passing in the HMAC as well as some of the other params like the host and the shop. Then it redirects to the /authenticate route, which renders the view that essentially redirects the user to the authorization grant page. Once the user grants the permission, user is redirected back to the authenticate route. But now this time it contains the authorization code right here. It then proceeds to render the app right here, which then invokes the authenticate token endpoints to handle the session token. And finally, it renders our app. So Telescope,

code right here. It then proceeds to render the app right here, which then invokes the authenticate token endpoints to handle the session token. And finally, it renders our app. So Telescope, as you can see, can be really useful, especially to troubleshoot issues in between requests. If something is not working, you could inspect payloads, you could inspect headers, ensure all the headers are being passed and received properly and so on. So, for example, we can pick any endpoint like this. Maybe we have some problem with the authorization code. We can inspect it and we can see the payload headers, session response and so on. All right. So the next step is to actually move on to using React and learn how to set it up properly. There is a bit of difference between Blade and React related to session tokens, and the Telescope will come in handy to see that difference, because with React, this authenticate/token route will no longer be made. Now,

Blade and React related to session tokens, and the telescope will come in handy to see that difference, because with React, this authenticate token route will no longer be made. Now, there are two main reasons why I'm going to be using React in this course. One is that it provides great components that we can use. And second is that Shopify seems to prefer SBAs in general because they tend to have better approval rates or at least are easier to be approved by Shopify when working on public apps. With Blade, there are some gotchas and possible issues you might face down the road, or you might have to make some adjustments and tweaks to get it approved by Shopify. That being said, though, some folks from the Laravel Shopify community have made Blade work just fine and they have published apps which were approved. So if you want to give it a try with Blade and use something like Livewire, give it a shot. But if you know Vue or React.js, then try

just fine and they have published apps which were approved. So if you want to give it a try with Blade and use something like Livewire, give it a shot. But if you know Vue or React.js, then try that instead. We'll be using React in this series for the reasons stated, so let's work on getting React set up and running in the next episode.