laravel shopify app

How to create a Shopify App with laravel

In this tutorial I want to show you how you can create a shopify app with laravel.

You can either watch the video I recorded

Or you can read the step by step guide and copy all commands right here:

Installation Laravel App

  1. Create new laravel project

    laravel new <project name>
  2. cd into project directory

  3. Load all packages via terminal/ CMD (https://github.com/osiset/laravel-shopify/wiki/Installation)

    composer require osiset/laravel-shopify
    php artisan vendor:publish --tag=shopify-config
  4. Add your app to valet server with valet park

  5. Add SSL with valet secure

  6. Your app is now located at the following URL: https://<app-name>.test

  7. Go to your project folder. Navigate to shopify-app.php and find 'api_scopes'. Here you can set all Shopify API scopes that are needed for your app. A list of all API Scopes can be found here → https://shopify.dev/docs/admin-api/access-scopes.

  8. Go to web.php and edit the routes. Replace the existing routes with the following code. This way you’re addding middleware to the welcome page and you’re creating a route for the login page.

    Route::get('/', function () {
        return view('welcome');
    })->middleware(['verify.shopify'])->name('home');
    
    //This will redirect user to login page.
    Route::get('/login', function () {
        if (Auth::user()) {
            return redirect()->route('home');
        }
        return view('login');
    })->name('login');
  9. Replace content of welcome.blade.php with this one.

    @extends('shopify-app::layouts.default')
    
    @section('content')
        <!-- You are: (shop domain name) -->
        <p>You are: {{ Auth::user()->name }}</p>
    @endsection
    
    @section('scripts')
        @parent
    
        <script type="text/javascript">
            var AppBridge = window['app-bridge'];
            var actions = AppBridge.actions;
            var TitleBar = actions.TitleBar;
            var Button = actions.Button;
            var Redirect = actions.Redirect;
            var titleBarOptions = {
                title: 'Welcome',
            };
            var myTitleBar = TitleBar.create(app, titleBarOptions);
        </script>
    @endsection
  10. Edit User Model. Add following code to existing namespaces

    use Osiset\ShopifyApp\Contracts\ShopModel as IShopModel;
    use Osiset\ShopifyApp\Traits\ShopModel;
  11. Change class from this:

    class User extends Authenticatable

    to this:

    class User extends Authenticatable implements IShopModel
  12. add following line within your class

    use ShopModel;
  13. Your class should now look like this:

    <?php
    
    namespace App\Models;
    
    use Illuminate\Notifications\Notifiable;
    use Illuminate\Foundation\Auth\User as Authenticatable;
    use Osiset\ShopifyApp\Contracts\ShopModel as IShopModel;
    use Osiset\ShopifyApp\Traits\ShopModel;
    
    class User extends Authenticatable implements IShopModel
    {
        use Notifiable;
        use ShopModel;
    
        /**
         * The attributes that are mass assignable.
         *
         * @var array
         */
        protected $fillable = [
            'name', 'email', 'password',
        ];
    
        /**
         * The attributes that should be hidden for arrays.
         *
         * @var array
         */
        protected $hidden = [
            'password', 'remember_token',
        ];
    }
  14. Setup your databse in your .env file.

  15. Nachdem alles durch ist, mit php artisan migrate alles migrieren

  16. If you visit your application you should get an error saying: “Osiset\ShopifyApp\Exceptions\MissingShopDomainException“.
    That is because we haven’t setup the from the intershop side yet.

Shopify

  1. Login to your Partner account and create a new app at https://partners.shopify.com/1844011/apps/new

  2. chose any app name

  3. set the url of your app that you created at step 6: https://<app-name>.test

  4. Set the redirect URL to: https://<app-name>.test/authenticate

  5. click on ‘create app’

  6. Copy your API key and API Secret

  7. Add API key and API secret to your .env within your laravel application

    SHOPIFY_API_KEY=xxxx
    SHOPIFY_API_SECRET=xxxx
    SHOPIFY_BILLING_ENABLED=1
  8. You can now visit your app at https://<app-name>.test/?shop=yourshopname.myshopify.com