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
-
Create new laravel project
laravel new <project name>
cd into project directory
-
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
-
Add your app to valet server with
valet park
-
Add SSL with
valet secure
-
Your app is now located at the following URL: https://<app-name>.test
-
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. -
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');
-
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
-
Edit User Model. Add following code to existing namespaces
use Osiset\ShopifyApp\Contracts\ShopModel as IShopModel; use Osiset\ShopifyApp\Traits\ShopModel;
-
Change class from this:
class User extends Authenticatable
to this:
class User extends Authenticatable implements IShopModel
-
add following line within your class
use ShopModel;
-
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', ]; }
Setup your databse in your .env file.
-
Nachdem alles durch ist, mit
php artisan migrate
alles migrieren -
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
-
Login to your Partner account and create a new app at https://partners.shopify.com/1844011/apps/new
chose any app name
-
set the url of your app that you created at step 6: https://<app-name>.test
-
Set the redirect URL to: https://<app-name>.test/authenticate
click on ‘create app’
Copy your API key and API Secret
-
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
-
You can now visit your app at https://<app-name>.test/?shop=yourshopname.myshopify.com