Tag Archive for: laravel

Create custom laravel logs

Trust is good - but logs are better

There are many ways to identify what is going on under the hood of your laravel application. If you want to watch your code step by step then I would highly recommend a debugger for PHP like Xdebug along with the XDebug plugin for VS Code.

You could also use laravel's dd() - or of course also use the good ol' PHP way with var_dump() & print_r() - function which will stop your application and print out any given variable that you passed to the dd() function.

The third option would be logging. Logs can really come in handy for example when your app is retrieving data from external APIs. Sometimes you have to keep track of all of the data that is coming in. Sometimes your app might not work the way you expected it to work and a quick look at the logs might give you a hint to the root of the problem.

In laravel you can create a log entry very easily. Just use any of the methods below anywhere in your code.

use Illuminate\Support\Facades\Log;
 
Log::emergency($message);
Log::alert($message);
Log::critical($message);
Log::error($message);
Log::warning($message);
Log::notice($message);
Log::info($message);
Log::debug($message);

And just like that you can create a log entry withing your storage/logs/laravel.log file. The laravel.log file is set as the default channel for your logs. Your log file can become convoluted very quickly if you write all of your logs only to one file. That's why you want to create multiple custom log files within your application and seperate them thematically. For example you might want to have an error.log and another log for all your requests to the shopify api and so on and so on.

Understanding laravel logging file

If you take a look at the default settings of the config/logging.php file, you can see the default channel. If you haven't set any other values within your .env file then laravel's default channel is the "stack"-channel. Scrolling down the logging.php file you can see an array of channels that are defined within your app. The first item of this array is - your default channel - the stack-channel and it looks something like this:

'stack' => [
    'driver' => 'stack',
    'channels' => ['single'],
    'ignore_exceptions' => false,
],

So the channel name is obviously stack. The driver name is stack too, but what does that mean?

Well laravel has many drivers to choose from, but in this article we're just concentrating on stack and single. When you choose the stack driver, then you can write your log messages to multiple files, or better said multiple channels. You can define which channels to write your logs to in the 'channels' property, which expects an array of channels as a value. By default the only channel that is used here is the 'single' channel.

So let's take a look at the 'single' channel:

'single' => [
    'driver' => 'single',
    'path' => storage_path('logs/laravel.log'),
    'level' => env('LOG_LEVEL', 'debug'),
],

Here we can see that this channel uses the 'single' driver. This tells us that the log message will only be written to one file. Which file? You might ask. Well, that is defined within the 'path' property of the 'single' channel array. And in there we can see, that the logs are written to the laravel.log file - as expected. The level tells us which Log message are actually being written to the log files based on the log level. laravel provides all log levels that are defined in the RFC 5424 specification. That means if you specify a log level of warning within your channel, then the following message wouldn't be printed:

Log::info($message);

because it is a level below warning!

Creating own log channel

So with all this knowledge we can now finally create our own Log channel! In order to do this, we will have to navigate back to our config/logging.php file and add an item to our 'channels' array. In my case it looks something like this:

'channels' => [

    ...,

    'shopify' => [
        'driver' => 'single',
        'path' => storage_path('logs/shopify_API.log'),
    ],

],

As you can see I created a new channel that writes a log file to storage/logs/shopify_API.log. In order to call this channel from anywhere in my application all I have to do is to call the following method:

Log::channel('shopify')->info('API info message', ['user_id' => 1]);

Customizing log message

Now let's step things up a notch and customize our logging message:

In order to do that we will have to create a new class within our app. So let's add a 'Logging' directory within our app directory wehre we add a new php file called CustomizedFormatter.php. The file should look something like this:

<?php

namespace App\Logging;

use Monolog\Formatter\LineFormatter;

class CustomizeFormatter
{
    public function __invoke($logger)
    {
        foreach ($logger->getHandlers() as $handler) {
            $handler->setFormatter(new LineFormatter(
                '{%datetime%} %message% // %context%'
            ));
        }
    }
}

As you can see, we define our desired format within the new LineFormatter class. Of course you can choose whatever format you like, I just made up an example.

In our last step we just have to tell our channel to use that custom formatter. That is easily done by going back to your logging.php file. Now we have to add the 'tap' property to our channel, in there we have to define an array. Within that array we pass our newly created CustomizeFormatter class. The channel should look like this:

use App\Logging\CustomizeFormatter;

...

'shopify' => [
    'tap' => [CustomizeFormatter::class],
    'driver' => 'single',
    'path' => storage_path('logs/shopify_API.log'),
],

And just like that you have created a custom log for your laravel application!

shopify invalid session token

Invalid session token - solve the annoying shopify error

If you have been working with shopify apps then you might have come across an error that says that you have an invalid session token. The reason behind this error might come from a race condition. The client tries to get some information from the server before it received a valid session token. Usually the client should have a session token, when making requests but you cannot be a 100% sure all of the time, thus the error is presented.

If you are making requests with axios then your request might look something like this:

// WRONG AND WIll LEAD TO ERROR DUE TO RACE CONDITIONS!!
axios
.get("https://test-application.test/api/endpoint")
.then(
    (response: {
        data: {
            content: string;
        };
    }) => {
            console.log("data:", data);
        );
    }
)
.catch((error) => {
    console.log("ERROR:", error);
});

In order to make sure that there won't be a race condition you can intercept your client's call and add some properties to the headers. All of this can be done very easily with axios. We want to make sure that the session token is always sent to the server, and in order to create a session token you will have to install an npm package from shopify.

You will need some methods from the shopify app-bridge-utils so make sure to install the npm package @shopify/app-bridge-utils:

npm i @shopify/app-bridge-utils
const instance = axios.create();
// Intercept all requests on this axios instance

instance.interceptors.request.use(function (config) {
return getSessionToken(app).then((token) => {
    config.headers["Authorization"] = `Bearer ${token}`;
        return config;
    });
});

instance
.get('https://test-application.test/api/endpoint')
.then(
    (response: {
        data: {
            themeName: string;
            appBlocksEnabled: string;
        };
    }) => {
        console.log("data:", data);
        setThemeName({ name: response.data.themeName });
        setContentLoaded(true);
        setSupportsAppBlocks(
            response.data.appBlocksEnabled === "partly" ||
                "completely"
                ? true
                : false
        );
    }
)
.catch((error) => {
    console.log("ERROR:", error);
});

And now your invalid session token error shouldn't appear anymore.

You can also watch my video right here:

How to create a shopify app in 2022

How to create a shopify app in 2022

Shopify made in incredibly easy for you to create a shopify app in 2022. All you have to do is update your shopify cli and run the latest version. You can checkout you shopify CLI version by typing in shopify version in your terminal. If you run version 2.7.3 or higher then you can be sure that the shopify app CLI is available to you.

Now cd into the directory where you want to install your app. Now just type in

this will create a new laravel project. Shopify also provides the ability to create a node.js project or a ruby project right from the CLI!

You might think that you can instantly open your app by typing in shopify app open. But unfortunately that won't work yet. Some configuration is still necessary.

First you have to make sure that your ngrok connection is authenticated. So you will have to create an account and open your dashboard at ngrok. In there you can navigate to your Auth token and copy that value.

Now go back to your terminal and type in

Now your ngrok connection is authenticated. Your shopify application needs ngrok to connect to your shop. Now you can start your app by typing in

This command will automatically start a new tunnel via ngrok and start a local development server.

The CLI will ask you if you want to update your application url. If you have no other reason why you shouldn't update your app url, then click yes.

This step is important, because every time you restart your application you will get a new ngrok-url. This means your local application is now reachable under a new url. That's why you would have to update your app url in your partners dashboard again. But the shopify CLI will do that for you automatically.

Your terminal should now look something like this:

If you press command or ctrl and click on the link in the console then you will be taken to installation window of shopify. That page will look something like this:

If you click on install unlisted app then you should see something like this:

Congrats! You just created a shopify app in a matter of minutes.

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