How to integrate StorybookJS into your StencilJS Project | L4 Webdesign

Web Components are a great way to build a reusable design System that you can use on multiple templates. If you're interested in WordPress-theme-development, Shopify-Theme-Development or the development of any other template then you should consider taking a look at web components.

StencilJS is a great framework for developing web components. Unfortunately it can be a bit tricky to organize all of your web components. That's when StorybookJS comes into play. StorybookJS is a component library that allows you to organize your components easily.

Now, Storybook supports many JS Frameworks and libraries natively such as React, Angular or Vue. Unfortunately It doesn't support StencilJS by default. So we have to make some configurations here and there.

That's what this tutorial is all about.

If you'd rather watch a video tutorial, you can take a look right here:

So let's go:

  1. Install Stencil JS
npm init stencil
  1. Install Storybook within Stencil Project. Chose the manual setup. And It is also important to use vite as a bundler instead of webpackt. For some reason the reload won't work with webpack. So make sure to use vite.
npx sb init@latest
  1. chose to manually select project type
    We want to create a project with web components. So we are going to choose 'web_components' from the list. We also want to chose Vite instead of Webpack!

  2. open preview.js and add the following code:

import {defineCustomElements} from '../loader';
defineCustomElements();
  1. With this code we are importing our defineCustomElements method from the loader that stencil generated at build. So in order to get that method we have to build our stencil poject.
    So open up a new terminal and type in
npm run build
  1. Now let's create our first story: In order to create a new story we need to create a file that has the extension stories.ts. We will add this file in our component directory. Now add this code:
export default {
    // this creates a ‘Components’ folder and a ‘MyComponent’ subfolder
    title: 'Components/MyComponent',
    // this is an example of how to add actions to the story
    parameters: {
      actions: {
        argTypesRegex: '^on.*',
        handles: ['click'] // you can add custom events to this array to trigger actions
      }
    },
};

const Template = (args) => `<my-component first="${args.first}" middle="${args.middle}" last="${args.last}"></my-component>`;

export const Example = Template.bind({});
Example.args = {
  first: 'Winnie',
  middle: 'The',
  last: 'Pooh'
};
  1. now we would have to type npm run build in order to build our stencil components everytime we want to make a change. Let's automate this. we have to add the --watch flag to this command within your package.json
npm run build --watch
  1. now if you want to create a new component all you have to do is type
npm run generate

Now you will not see this newly generated component within storybook. That's because we haven't created a story for it yet. So let's add a story

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!

5 great resources for Shopify app developers

5 great resources for Shopify app developers

In this article I want to share some resources that helped me develop a better understanding for developing apps or respectively building a micro Saas.

5. Shopify Github Projects

When I started out with my first app I just started coding right away without really thinking about best practices. I didn't know how Polaris is supposed to be used and their different components should work together. Of course there is a documentation, but that documentation didn't show me a whole page. They only show the code for a single component.

It was like an eye opener for me when I looked at their source code.

You can take a look at an example reviews app that they have created:

https://github.com/Shopify/product-reviews-sample-app/blob/main/pages/getting-started.js

They provide really clean and readable code. So you should definitely check that out!

4. OnlineBiz YouTube Channel

When you build an app you're not just building an app, you are actually building a business. You're building a Micro Saas. The first time I heard the term micro Saas was on this channel. And it changed the way I looked at building Shopify apps. I started to realize how hard it is to actually come up with an idea. And even if you have many app ideas then you should validate them and make sure that they are worth to invest some time in them.

I didn't know anything about validating app ideas until I watched their videos. There is a ton of knowledge for you to pick up if you are at a beginner level of building your business. And these guys know what they're talking about. They are the owners of ReConvert, a very popular Shopify app with over a million Dollars of yearly revenue.

I highly recommend to check out their channel:

https://www.youtube.com/channel/UCzcOcjcsrTEblPJavqr7R-w

3. Polaris Frontend Framework

My last point leads me directly to the Polaris Framework which is a great resource for Shopify app developers. But Polaris is kind of like a double sided sword. It will make your app look very shopify-ish (which is the goal of Polaris). So if you are building an app that is supposed to work with different Shopping Systems like WooCommerce, Magento, BigCommerce, etc. well then it can cause some confusion for the users.

Nonetheless you should still consider using it, since this will make your development speed so much faster. If you use their components then you don't have to think about color schemes, shadows, media query and all that stuff anymore. Everything is already done if you use it correctly.

Of course you could still use a library like bootstrap, but that will make your app look very generic if you don't customize it all.

Check out Polaris here and just give it a try:

https://polaris.shopify.com/components/get-started/

2. Polaris UI Kit for Figma

"The sooner you start coding, the longer your project", that is a quote I heard somewhere and I must say it is very true! If you don't plan or structure your project in any way then it will take forever. It is always advisable to start out with a basic layout of your app. If you're developing by yourself you can quickly see what layouts and components work well together. You will be able to quickly see if a layout is looking good or not. If you're working together with team mates, then you can quickly send them mock ups of your ideas and see how they like it. All without writing a single line of code.

There are design tools like Adobe XD, Sketch or Figma. Luckily Shopify provides us with all of their components for Figma. The best part is that it is all for free! All you have to do is create an account at Figma and duplicate the "Polaris for Admin" project which you can find here:

https://www.figma.com/community/file/930504625460155381

Now you will have all of the Polaris components at your disposal:

This will enable you to set up a layout very quickly. The best part is that you can adjust the components in the same ways as you can implement the later on. So you will have a very good overview of the capabilities of the components when building the layout.

I compared it to a dashboard UI Kit that I have bought on themeforest (This UI Kit came with Figma and React components as well). I wanted to compare it because honestly the Polaris Admin UI Kit looks very boring and not very modern. But unfortunately I was very disappointed by the UI Kit from themeforest. It looked great at first, but I had a hard time adjusting any components. It took me quite a while to adjust a component after a I changed a simple text. The components seemed to break as soon as I changed something in there.

Now I must say that I'm not an expert at Figma, I'm a developer. And that is exactly the power of Shopify's UI Kit. You can just open the file and start building good looking layouts without being a professional designer. That is the real power of it!

1. Preetam Nath Blog on micro Saas

One of the most valuable resources for me was the blog from an app developer named Preetam Nath. He is a very inspiring person and has a great blog! But what stood out the most for me was his post about Shopify micro Saas. He really goes into detail about finding an app idea. He shows you how to scan the market and how to find a profitable niche. This is really the first and most important thing that you should think about when you want to build your app.

As developers it is not very difficult for us to build Software, but the hard part is to build software that people really need and want! In his blog post Preetam goes deep into this topic and I highly recommend his content to you. He even provides you with a very valuable spreadsheet where you can take a look how he structures his notes.

Seeing this spreadsheet was a massive eye opener for me when I first saw it. I also realized that building an app requires a lot more preparation than I have imagined.

https://www.preetamnath.com/blog/shopify-micro-saas

Final thoughts

Hopefully you found some good and helpful resources for yourself and your business. I like to share everything that was helpful for me, because I believe that if it helped me, then there will be at least one person out there that will find it just as helpful and maybe that person is you who is reading this text right now ;)

Shameless plug:

I also have a YouTube channel where I talk a about Shopify app development. That might also be a great resource for you!

Check it out right here:

https://www.youtube.com/channel/L4Webdesign

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 deploy a Laravel app to Heroku in 10 steps

You’ve made it! You successfully created your shopify app. Now it’s time to deploy it! I want to write a step by step guide about laravel app deployment. We will deploy an app to heroku which is completely free.

there are some prerequisits for you to follow along:

If you have all that set up, then let’s go!

If you don't feel like reading, you can watch all the steps in my video right here:

1. Create a Procfile

Cd into your project root and create a Procfile by typing: touch Procfile
After creating the Procfile add the following lines

The Procfile is a configuration file for Heroku. It helps to specify the commands that are executed by the app on startup.

For example, you can put your app’s web server or worker processes, etc.
For example in my video on how to create scripttags (How to create Scripttags - Shopify App Development for #PHP Developers | L4Webdesign ), I showed you that you need to type php artisan queue:listen to create the scripttags upon installation.

If you take a look at the Procfile, you can see that we are referencing a nginx_app.conf file. We also have to create that and set it up

2. Setting up nginx config file

type touch nginx_app.conf to create the config file. Then paste in these settings:

3. Login to Heroku

To log into Heroku, type heroku login. Your browser will open and you will be redirected to a login page where you can enter your credentials. If everything worked then you’re logged in and you can now use the heroku CLI.

4. Create heroku application

Let’s switch back to our terminal so we can use the heroku-cli. As a side note: we are still at the root of our project.
type heroku create name-of-app. If you don’t put a name for the app, Heroku will create a random name and URL for it.
It should look something like this:

L4-Webdesign-heroku-cli

Now if you go to your dashboard on heroku you can see that your app was created succesully.

If you type in git remote -v then you will see, that heroku has already created a git repo for you.

L4-Webdesign-heroku-cli

Now any time you will push to that repo, heroku will trigger a new deployment.
In this guide we will push to herokus repo directly, but it is also possibe to connect your github account with heroku. That way you can always push to your github repo and it will trigger a deployment as well.

5. Push your code to Heroku

Push your code from the command line just like you would push it to github, but instead of the remote origin, push your changes to the remote heroku branch:

notice the flag --allow-empty This might come in handy at some time, when you want to trigger a deployment, but you haven’t made any changes to your code.

6. Checkout and debug deployed app

Your app should be deployed now, so let’s check it out! go to https://l4-shopify-app.herokuapp.com/ and take a look!
You should now see something like this:

L4-Webdesign-heroku-deployed-app

This is good and bad at the same time. It’s good because the deployment worked but it’s bad because the app is not running yet. In order to see what causes our error, we can add APP_DEBUG=true to our .env file.

Important: when you copy all of your .env files, make sure that you update your APP_URL. Also make sure that you enter the correct values for SHOPIFY_API_KEY and SHOPIFY_API_SECRET. Otherwise the hmac will not be calculated correctly and you will see an error.

There are two ways to set up your .env file. Either on your heroku dashboard, or right on your CLI:

  • Edit .env on heroku Dashboard:
    From your dashboard, navigate to Settings and click Reveal Config Vars.
    Now you can set up all your environment variables.
L4-Webdesign-heroku-config-vars
  • Edit .env on CLI
    If you prefer the CLI you can use the command heroku config:add ENV_CONFIG=value So in this example I could have typed in

    heroku config:add APP_DEBUG=true

    This will give you the same results.
    If you want to add a little vim magic, you could add the command heroku config:add to the beginning of every line (checkout How to insert text at beginning of a multi-line selection in vi/Vim ) and you would have a script to add all of your environment variables.

7. Create Database

If we refresh our app on heroku we will see the following error page:

L4-Webdesign-heroku-error

It says that the connection was refused. That happened because we haven’t set up a database yet. So let’s do this right now.

If you go to Resources you can search for resources for your app. Here you can search for your database. You can chose any database you want, like MySQL, MariaDB, MongoDB. I would recommend to use Heroku Postgres since they provide best offer. Here you can use up to 1GB of storage which I haven’t seen on any of the other databases.

L4-Webdesign-heroku-config-vars

Add this add-on and you will see, that postgres is now attached as your database.

L4-Webdesign-heroku-dashboard

8. Database credentials

In order to set up our database we need setup our database credentials. We will get all of the required properties by typing heroku pg:credentials:url in the command line.

We can now copy and paste all of the credentials to our environment variables. Remember how we did it in step 6a) or 6b) ?

Remember to add DB_CONNECTION=pgsql to your environment variables, since this was not on the output of our terminal.

9. Migrate and seed database

Now it’s time to migrate our database. If you have created a billable app (checkout this video I made: How to set up billing for Shopify apps (as a Laravel developer)) then you will need a database seeder to set up your billing table.

You now have two options to create your migration:

  1. run heroku run php artisan migrate --seed
  2. run heroku run bash -a app-name
    Now you have access to the bash of your app. from there you can now run php artisan migrate --seed as well.

10. Create a public app at shopify dashboard

Set up a public app in shopify. If you don’t know how that is done, then you can watch my video here or read my article.

Don't forget to setup all of the environment variables in your heroku app.

11. You’re done 🎉

Congrats! You deployed your app to heroku!

You should now see your embedded shopify app if you install your app in a development store

Making REST API calls to shopify store

Sometimes you may want to make REST API Calls to your Shopify Store. For example you may want to check the installed theme of your store and check if it supports app blocks.

The easiest way to do this is by going to your store and make the REST call right in your browser. Let’s take the theme example. If you navigate to

{your-store}.myshopify.com/admin/themes

You will be presented an overview of all your themes on your User interface. However if you add .json to that URL you will get the according JSON response:

{your-store}.myshopify.com/admin/themes.json

This request works because you are authenticated with your store. But how do you request this data if you are not authenticated? For example if you want to send a request with Postman?

The answer is: you will have to create a private app, get the credentials from that app and then you can make authenticated requests. And this is how it’s done:

  1. Go to your stores admin dashboard.
  2. go to Apps
  3. Scroll all the way to the bottom. There you should see the possibility to “Manage private apps“
  4. You can now click create a new private app. Make sure to create an app with all the access scopes that you need.
  5. After creating the new private app you can go back to the overview page of your private app. On there you will see your newly created private app.
  6. In order to get the apps API key and Password, click on the app’s name. You will be redirected to the app’s detail page
  7. You can now prepare the URL for your request. The request URL will have to look as follows
https://{PrivateAppApiKey}:{PrivateAppPassword}@{shop-url}.myshopify.com/admin/themes.json

That’s it! Now you can make authenticated API calls to your store via Postman!

If you don't feel like reading, check out my video:

https://youtu.be/9a7A2pTtTDc

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