We are going to be using Laravel SAIL and Docker to install Laravel. Note that it's not a requirement to use Laravel SAIL, so feel free to install Laravel in any other way that you're comfortable with. The only thing is, at the time of this recording, Laravel 10 was recently released, and the package that we're going to be using does not yet support Laravel 10, so I had to install Laravel 9 instead. By the time you watch this, most likely Laravel 10 support will be available for the package, so you should be able to just install the latest version. The package is called Laravel Shopify and is a maintained version or a fork of the original and deprecated Laravel Shopify package. This package handles a lot of the things out of the box that you would otherwise have to build yourself, like authentication, billing, and so on. Speaking of authentication, there are multiple ways an app can authenticate with Shopify, and there is a really nice diagram

have to build yourself, like authentication, billing, and so on. Speaking of authentication, there are multiple ways an app can authenticate with Shopify, and there is a really nice diagram provided in the Shopify documentation, so let's switch to the Shopify apps documentation. Let's scroll down, go to authentication overview, and scroll down here, and this is the diagram that I'm talking about. If the app is created within the partner dashboard or within the CLI and it's an embedded app, then it needs to use OAuth and session tokens. Otherwise, if it's not an embedded app, then it needs to use just OAuth. If the app was created through the Shopify admin, then it needs to use access tokens. The app that we're building is an embedded app, and we created our app through the partner dashboard, which means that we need to use the OAuth and session tokens. Also, each of these types of authentications have their own documentation explaining how exactly they work. For example,

partner dashboard, which means that we need to use the OAuth and session tokens. Also, each of these types of authentications have their own documentation explaining how exactly they work. For example, if we open the documentation for the OAuth, there is a diagram here illustrating basic OAuth authentication and flow. Then on the session tokens overview, there is information on how session tokens work and the basic flow of authentication when using session tokens. And of course, the access token has its own documentation as well. So as you can see, it can get quite complicated and overwhelming very fast. The good news is that both Shopify CLI and the Laravel Shopify package handle authentication out of the box. I prefer the Laravel Shopify package over the available php template for the CLI, mainly because I've tried both of them and Laravel Shopify was easier to work with and provides more functionality, in my opinion. So let's head back to the Laravel Shopify

template for the CLI, mainly because I've tried both of them and Laravel Shopify was easier to work with and provides more functionality, in my opinion. So let's head back to the Laravel Shopify repo and follow the installation guide there. So we'll go to the wiki, installation, and the first step here is to composer require the package. Let's open the code editor, and as I mentioned, I have a fresh Laravel 9 installation. We just need to run vendor-bin-sale-app -d command to start the containers. So let's open the terminal. We'll do vendor-bin-sale-app -d. This will start the containers, and to confirm that it's working, we just need to open the localhost, and sure enough, we see the famous welcome page. Now let's go back to the terminal. Let's clear this out. We're going to run vendor-bin-sale-composer require the package name, which is Laravel Shopify. Then we need to publish the configuration file. So we'll do again vendor-bin-sale, and let's delete this

going to run vendor/bin/sail composer require the package name, which is Laravel Shopify. Then we need to publish the configuration file. So we'll do again vendor/bin/sail, and let's delete this command, and instead we'll do php artisan vendor:publish --tag=shopify-config. All right, so let's open the Shopify app config and go over some of the options here. We don't need to touch most of these configurations, at least not for now. The app bridge option should be enabled, and it is by default, which is needed for embedded apps. Also, we'll need to modify the app bridge version later on. As you can see, it states here that it is not recommended to use latest in production. Then we can customize the app name, the API version, API key, and also API secret. So what I'll do is that let's create these environment variables, and we'll fill them in later on. So let's copy this .env file. Let's scroll down and create these variables. So let's go back here. We'll copy the

let's create these environment variables, and we'll fill them in later on. So let's copy this .env file. Let's scroll down and create these variables. So let's go back here. We'll copy the APP_NAME, and we'll set the APP_NAME to Faker. Let's go back. Let's create the SHOPIFY_API_VERSION, and let's create SHOPIFY_API_KEY, and SHOPIFY_API_SECRET. Now for the API_VERSION, at the time of this recording, the latest version is 2023.01. Then let's keep scrolling here. API_SCOPES, I think we can leave this the way it is. API_SCOPES option will depend on your app. Access scopes are basically used for authorization, and don't confuse authentication with authorization. You can think of scopes as permissions, basically, where when merchant installs your app, they need to agree to give you access to certain parts in their Shopify store. Each scope represents a specific set of data or functionality that the

where when merchant installs your app, they need to agree to give you access to certain parts in their Shopify store. Each scope represents a specific set of data or functionality that the app can access or perform on behalf of the merchant. For example, a scope might allow an app to read a merchant's customer data or modify their products and so on. You can view the list of available scopes in the documentation, and in here, the default scopes that are set is read products and write products, which is kind of what we need for now for our app. So we're going to keep the defaults. Then if we keep scrolling, we see things like billing enabled, which relates to billing. By default, it's disabled, but we'll enable it later on once we get to that part in the course. Then we have some webhooks, which again, we'll touch later on in the course. And at the end, if we keep scrolling, we have something called front-end engine, which is set to Blade

in the course. Then we have some webhooks, which again, we'll touch later on in the course. And at the end, if we keep scrolling, we have something called front-end engine, which is set to Blade by default. We can change it to Vue or React, and we'll come back to this later as well, because we're not going to be using Blade all the time. We're going to switch it to React. All right, so let's run the migration so that it creates the necessary tables and columns. So let's open the terminal and run vendor/bin/sail php artisan migrate. Next, we need to modify the User model and add an interface as well as the trait. So let's open the User model here. And as you know, users in a Laravel app in the context of Laravel Shopify package are basically shops. So if one store installs your app, that's one User record. If two more stores install your app, that's two more User records, and so on. For this to work and for the User model to be treated as a shop,

store installs your app, that's one User record. If two more stores install your app, that's two more User records, and so on. For this to work and for the User model to be treated as a Shop, we need to implement ShopModel interface on this model. So we'll do implements ShopModel. And if we inspect this interface, we see that it provides definitions for some of the methods like getId, getDomain, getAccessToken, charges, plan, and so on. Thankfully, we don't have to actually implement them manually, we can use a trait that comes with a package that already provides implementations for these methods. So let's close the project files actually from here and let's use ShopModelTrait. But this name conflicts with the interface name. So what we're going to do is that we'll alias this to IShopModel. And let's replace it here. And let's import this trait this way. Let's inspect the trait and we see that it uses SoftDeletes trait. Let's

going to do is that we'll alias this to IShop model. And let's replace it here. And let's import this trait this way. Let's inspect the trait and we see that it uses SoftDeletes trait. Let's scroll down and pay attention to these three methods right here, getId, getDomain and getAccessToken. As you can see, these methods are getting values from the User properties. So the shop ID is the User ID, the domain is the username, and the password is the accessToken. So basically when I say User within the Laravel, I'm actually referring to a shop. Alright, so the next step is to set up our home route and the welcome page. Laravel Shopify does come with the default routes and the default welcome page, but we'll set it up on our own. So let's open the web.php routes file. And let's add verifyShopify middleware here. So we'll do middleware, verifyShopify. This middleware basically does the authentication and verification as well as the session token handling. Next, we

And let's add verifyShopify middleware here. So we'll do middleware, verifyShopify. This middleware basically does the authentication and verification as well as the session token handling. Next, we also need to make this a named route and the name of this route should be home. Then we need to modify the welcome.blade.php template that comes with Laravel. So let's open the welcome.blade.php here. We're actually going to get rid of everything from here. And we're going to extend the default layout that comes with Laravel Shopify package. So that is shopify-app.layouts.default. Then we can provide our content section. So we'll do section('content') and section. And let's create maybe a paragraph with hello world in it. Now don't worry about the default layout here. We're going to go over it in more detail in the next episode. Now if we open the localhost and refresh the page, we see that we get an error that states that no authenticated user or shop domain was given. This

over it in more detail in the next episode. Now if we open the localhost and refresh the page, we see that we get an error that states that no authenticated user or shop domain was given. This actually makes sense because we added the middleware that handles the authentication. We won't be able to access our app directly like this through localhost. We have to access it through Shopify because that is what's going to authenticate our app. All right. So the next step is to actually connect our Laravel app with the Shopify and see the hello world within the development store. We're going to do that in the next episode.