Forem: George Tudor

How to manage, launch and even sell Wordpress sites using Dollie

George Tudor — Mon, 07 Aug 2023 11:05:13 +0000

Are you an agency who wants to manage your clients' sites without any hustle? Are you a SaaS owner who wants to easily sell plugins/themes? Are you a WaaS owner who wants to sell premade sites for various niches? Are you someone who wants to launch a Wordpress site without caring about server management, server performance and infrastructure?

Well, if you fall into any of those categories, I'll show you a tool that does that for you and makes your life 100 times easier.

What is Dollie?

Dollie is an all-in-one solution that includes powerful WP site management tools for any site (hosted on Dollie or somewhere else), a white-label private cloud, and a WordPress plugin which allows you to sell your services directly to your audience under your brand & domain.

What can you do with Dollie?

The answer is simple. Whatever you want. Here's some of the stuff you can do:

launch new Wordpress sites in seconds
one click login
connect your own domain to the site
launch demo sites
manage any Wordpress site (no matter where it is hosted)
create blueprints and deploy new Wordpress sites from an existing blueprint (ready made sites)
sell blueprints under your own brand and domain. One click checkout. Allow users to create sites using your ready made blueprints - they get access to all the management tools they need. (you will need the Dollie plugin)
monitor your Wordpress sites
install/update/activate/deactivate/delete Wordpress plugins and themes from any of your sites
update Wordpress Core
access to Updates Manager so you can install/update/activate/deactivate/delete Wordpress plugins and themes on multiple sites at once
access to SFTP/SSH
access to Database Manager
log viewer
code editor
daily backups
security monitor
seo reports
activity reports
and many more...

Please note that some of the features that I've listed above are only available when you have your site hosted with Dollie (for example the daily backup feature).

Ok, so that's a long list and a lot to swallow, so let me show you some concrete examples so you can better understand how you can use Dollie.

If you are an agency and you have let's say 100 sites and you need to easily manage them, you can connect them to your Dollie account and easily manage all the updates, one-click login into any of them, have uptime monitors, reports and so on. It basically makes your life much easier.

You can also bring all your sites to Dollie for better management, reports, backups and more, or you can even start using Dollie to launch new sites for new clients with just a click and not worry about servers, performance and infrastructure.

Once a site is launched you can add the customer's domain and ask the customer to point his domain to the site's IP address. Dollie's system will automatically replace the original site's URL with the custom domain and generate a SSL certificate.

You might also need blueprints if you have some repetitive work that needs to be done for each site.

If you are a SaaS or WaaS owner and you want to sell your ready made sites/products/websites, you can easily create a blueprint. A blueprint is basically a site that has everything already installed and whenever you launch a site or your customer launches a site using that blueprint, it gets exactly what's in the blueprint.

If you're selling to your customer you might need a platform to do it, right? Well... you can install the Dollie plugin into your existing Wordpress site or you can have a free site on the Dollie infrastructure. That's your main site where you sell your blueprints. You can decide your own monthly/yearly pricing. Your customers will be able to subscribe and create as many sites as they need and pay you via Stripe or Paypal.

How expensive is Dollie?

You can always start using Dollie for free. You have a free plan that allows you to easily manage your sites (no matter where they're hosted).

If you need more, like launching sites on the Dollie servers, you will have to pay $0.33/day/site. For blueprints you will have to pay $0.16/day/blueprint and for staging sites it's $0.10/day/staging site. That sums up to $10/site/month which is really cheap compared other providers and you get lots of tools on top of that.

Conclusion

If you need to manage multiple sites, want to sell ready made sites and/or need to launch sites and manage them easily, you can register and give Dollie a try.

Event driven Livewire components

George Tudor — Fri, 24 Mar 2023 20:44:40 +0000

Livewire is a really popular library for Laravel which I really love and use across all my projects. It provides that sweet SPA feeling while using almost no Javascript. For me... it's magic. :)

Simple vs complex functionality

Building some forms or having some small actions is pretty straightforward to do in Livewire and doesn't introduce any complexity. You just do it in one component.

But sometimes you have to deal with multiple actions that have to happen in a specific sequence or have to pass data from one to another. You can still do this inside a single component but this is not something I like to do due to various reasons. I believe it's better to split your code into as many components as possible because it's easier to maintain them and the probably some components can also reused if you introduce some kind of abstraction.

When you split your code into multiple components and those components have to communicate between each other then you definitely need to use events.

Using events in Livewire

Livewire events are split into 2 categories: server events and browser events.

We're going to talk talk strictly about server events because using those we can pass data from one component to another.

You can emit server events to any other component, to a specific component, to parent components and even to the same component the event was emitted from.

Let's look at a simple example that uses 2 components: one for input and one for displaying data.

use Livewire\Component;

class InputForm extends Component
{
    public string $input = '';

    public function add() {
        $this->validate([
            'input' => 'required|string'
        ]);

        $this->emit('input-form-submitted', $this->input);
        $this->reset(['input']);
    }

    public function render() {
        return view('livewire.input-form');
    }
}

input-form view:

<div>
    <input type="text" wire:model.defer="input" />
    <button wire:click="add">Add</button>
</div>

So anytime we fill in our input and press the "Add" button we validate the input, emit an event and pass the input's value and then reset the $input to its original value.

Now in our second component we have to listen for this event and display the data into a list.

use Livewire\Component;

class DataViewer extends Component
{
    public array $data = [];

    protected $listeners = [
        'input-form-submitted' => 'updateData'
    ];

    public function updateData(string $data) {
        $this->data[] = $data;
    }

    public function remove(int $index) {
        unset($this->data[$index]);
    }

    public function render() {
        return view('livewire.data-viewer');
    }
}

data-viewer view:

<div>
    <ul>
        @foreach($data as $key => $item)
            <li>
                <span>{{ $item }}</span>
                <button wire:click="remove('{{ $key }}')">Remove</button>
            <li>
        @endforeach
    </ul>
</div>

So now, every time we detect a new event called input-form-submitted in our 2nd component the updateData function is getting called which appends the received data to the list.

In this way we can reuse the 2nd component somewhere else, if needed.

Hope you've enjoyed this quick example and you understand the whole idea of splitting components whenever a complex functionality is required.

Gradient animated text with Tailwind CSS

George Tudor — Sun, 13 Nov 2022 14:34:50 +0000

I've been working on a new project recently and I wanted to add some cool effect on my landing page's hero section's text. I've seen this effect on lots of sites this year but I've never been curious how it was made.

I mainly work with Tailwind CSS because it's really easy to use and developer friendly. I'm not a designer and CSS is not my cup of tea. I prefer to make things work and look relatively good in short time rather dealing with CSS/SCSS/SASS files.

So my approach was really simple and what I've needed was some keyframe and a clipped text.

To achieve this we need to add our custom text animation and keyframes into tailwind.config.js. We can use any keyword to define these, but since we're dealing with text I've decided to name them text.

Note that you have to add the animation and keyframes definitions into your extend object.



modules.export = {
  theme: {
    extend: {
      animation: {
        text: 'text 5s ease infinite',
      },
      keyframes: {
        text: {
          '0%, 100%': {
            'background-size': '200% 200%',
            'background-position': 'left center',
          },
          '50%': {
            'background-size': '200% 200%',
            'background-position': 'right center',
          },
        },
      },
    }
  }
}

Now what's left to be done is to add your text wherever we want it.



<h1 class="animate-text bg-gradient-to-r from-teal-500 via-purple-500 to-orange-500 bg-clip-text text-transparent text-5xl font-black">
    Hello World
</h1>

As you can see, we have the animate-text class that is using the tailwind.config.js definitions, our gradient and 2 more extra classes: bg-clip-text that's clipping the background to our text and text-transparent that's making exactly what it says in order to be able to see the animated background.

That's all. Here's a Tailwind Playground with this in action:
https://play.tailwindcss.com/VCZwwz1e3R

Support & follow me

How to use Laravel Permission by Spatie in Vue

George Tudor — Mon, 31 Oct 2022 09:44:10 +0000

UPDATE: You can do the same as below using this package geowrgetudor/laravel-spatie-permissions-vue. It is a fork I made from the original package. Adds support for server-side rendering (SSR) and doesn't require installing a npm package (everything is built in).

When in comes to Laravel packages, the guys at Spatie are probably the kings. They have hundreds of free packages you can pick from and use into your projects. Hats down for their commitment and contribution to this beautiful ecosystem.

Now let's talk about permissions because if you're building a large Laravel app you definitely gonna need them. As a quick example, let's think of an admin panel built with Vue that needs different user roles where each role has specific permissions.

Of course you can build all this functionality yourself, but why reinvent the wheel? There's a neat package from Spatie called spatie/laravel-permission which makes things really simple.

Installation and setup

All you have to do is to install it and do a bit of configuration like publishing the vendor files (config and migration) plus some trait:



composer require spatie/laravel-permission

# Publish the vendor's config file and migration
php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"

# Clear your config cache so the package can pick up the published filed
php artisan config:clear

# Run the migration
php artisan migrate

The next step is to add the package's trait to your user model and you're ready to roll:



use Illuminate\Foundation\Auth\User as Authenticatable;
use Spatie\Permission\Traits\HasRoles;

class User extends Authenticatable
{
    use HasRoles;
}

By default, the package comes with a super-admin role published into your database by the default migration. You can use that of course, but you also can add your own roles and permissions.

Adding new roles and permissions

So let's create 2 roles and assign them some permissions. You can do this in a migration, seeder, artisan command, some UI interface, whatever suits you best.

The package comes with some premade artisan commands you can use to create roles and permissions (you can check their docs for that), but for the sake of this demo, I'm going to use tinker.



# Create an editor role
$roleEditor = \Spatie\Permission\Models\Role::create(['name' => 'editor']);

# Create a supervisor role
$roleSupervisor = \Spatie\Permission\Models\Role::create(['name' => 'supervisor']);


# Now lets create permissions and assign them to our freshly created roles
$permissions = [
    'can-view-posts',
    'can-edit-posts',
    'can-publish-posts',
    'can-deleted-posts',
    'can-view-activity',
    'can-export-activity'
];

foreach($permissions as $permissionName) {
    $permission = \Spatie\Permission\Models\Permission::create(['name' => $permissionName]);

    if(in_array($permissionName, ['can-view-posts', 'can-edit-posts', 'can-publish-posts', 'can-deleted-posts'])) {
        $roleEditor->givePermissionTo($permission);
    } else {
        $roleSupervisor->givePermissionTo($permission);
    }
}

Now, that we have all the permissions in place for each role, we can start using them in our controllers, services, routes, templates, etc.

Let's talk about templates

By default, this package comes with some handy Blade directives. You can use @can, @role, @hasrole, @hasanyrole and many more directives to render whatever you need based on roles and permissions. This is great, but these are only available in Blade.

How can we create something similar in Vue? The process will be like this:

We need to expose all the roles and permissions to the frontend
We need to defines some similar functions

Luckily, you don't have to do this from scratch. You can use laravel-permission-to-vuejs which is a javascript package and ahmedsaoud31/laravel-permission-to-vuejs which is a composer package. These 2 packages are great and are exactly what we need to use the same roles and permissions into our Vue application.

First, we need to install the server side package and add another trait to our User model:



composer require ahmedsaoud31/laravel-permission-to-vuejs=dev-master

Now lets add the trait:



use Illuminate\Foundation\Auth\User as Authenticatable;
use Spatie\Permission\Traits\HasRoles;
use LaravelAndVueJS\Traits\LaravelPermissionToVueJS;

class User extends Authenticatable
{
    use HasRoles;
    use LaravelPermissionToVueJS;
}

Next, we'll need to expose the roles and permissions to the frontend. To do this we need to attach a Laravel property to the window. You can add this code into your main Blade template which loads everything for your frontend:



<script type="text/javascript">
    window.Laravel = {
        csrfToken: "{{ csrf_token() }}",
        jsPermissions: {!! auth()->user()?->jsPermissions() !!}
    }
</script>

The last step is to install the Vue javascript package, which also supports Vue 3:



npm install --save laravel-permission-to-vuejs

# Instruct Vue to use it
// ...
import LaravelPermissionToVueJS from 'laravel-permission-to-vuejs'

const app = createApp(App)
app.use(LaravelPermissionToVueJS)
// ...

Now we can use similar functions to Spatie's blade directives like can() to check for a specific permission and is() to check for specific roles. Here's a short example:



<div v-if="can('can-view-posts')">
    Only users with this permission can view this DIV.
</div>

<div v-if="is('supervisor')">
    Only users with this role can view this DIV.
</div>

We can also pass multiple permissions or roles to check against. Example: can('can-view-posts | can-edit-posts').

That's pretty much it. Now you can enjoy using the same permissions you are using in the backend without creating a lot of mess in your Vue templates.

Support & follow me

Why you should NEVER use Nulled Wordpress plugins and themes and why is this still a trend

George Tudor — Sat, 29 Oct 2022 18:27:52 +0000

Let's be honest, piracy has always been a trend on the internet. Software, games, movies and music have always been distributed for free via CDs, DVDs, USB Sticks and lately torrent sites.

While this sounds awesome for the end consumer, businesses suffer because of this. We all got some unauthorized copies of different things back in the days... and it felt great, not gonna lie. But it all comes with a risk and that risk is called malware.

We, at Stax, develop Wordpress plugins & themes. Most of our plugins and themes are released as a freemium package, meaning there's a Free version and a Pro version. That's the main trend in the Wordpress community and we'd like to stick with that.

All of our Free plugins are really generous in terms of options and functionality. We try to offer as much free functionality as possible to help regular users with their daily needs. The Pro versions of some of our plugins contain a lot more functionality which helps users achieve even more.

Converting Free users into Pro users is sometimes hard, but not impossible. However, some users prefer to get the Pro version of different plugins from doggy sites that offer them for free or a lot cheaper than the main developer's price.

Why is this happening? Well, there are lots of reasons, but here's what my findings are:

Pricing

Some plugin developers tend to price their Pro version using multiple subscription tiers. The most common practices are a yearly subscription and a lifetime offer.

Unfortunately even a yearly subscription seems to be too much for an end user, specially if they need the plugin just for a short period of time or they are not sure if their business will succeed... so a big investment is not justified by these circumstances.

The price itself is also an issue for some potential customers. Really popular plugins or themes creators tend to price their products higher than their competitors just because their popular. This doesn't really mean their products are better than their competitors, but they have enough exposure to leverage this opportunity.

Trust issues

I think the more you know about the Wordpress ecosystem, the easier it will be to know what you want. However, uncertainties can occur on both sides.

Trust issues usually rise for 4 reasons:

The user don't really know if the tool they're going to purchase will get the job done.
The product doesn't have a Free version the user can try before purchasing.
The product doesn't have reviews.
The product's author has a bad reputation or no reputation at all.

Now let's talk about the elephant in the room, those so called "nulled" sites, which are distributing Pro versions of plugins and themes for free.

There's a general rule in life: "Nothing is free". If you think these Pro plugins are free, then you're wrong and naive. There's always a price your have to pay, but in this case isn't money, it's your security and privacy.

Here are the top 2 problems with Nulled plugins and themes and why you should NEVER trust them:

1. Malware

The most important issue is that 99% of the time they contain malicious code.

It's usually a shell script that compromises your entire server and offers it on a silver plate to the software distributor.

2. What you get is not actually what you want

Most of the times, the nulled software distributor claims to provide the latest version of the plugin or theme you are looking for. Well, in most of the cases all you will get is an old Pro version which probably is no longer compatible with the current Free version.
But... it can get worse. You might get just a malware and that's it.

Conclusion

Are nulled plugins and themes distributors a bad thing for the
Wordpress community? Definitely YES! Unfortunately, there's nothing we can do about it, except to raise awareness and show users what should they expect when they go on this road.

As long as end users will search for nulled software, these sites won't go away. If 10 are terminated today, 20 will appear out of thin air tomorrow.

So be responsible, do your homework and think twice before falling into this trap.

Dealing with SVG icons in Vue + Vite

George Tudor — Mon, 24 Oct 2022 06:31:41 +0000

Recently I've converted a Vue project that was using Webpack to Vite. All went smooth until I've discovered that Vite doesn't support require() out of the box.
I'm using some custom SVG icons that I'm keeping in a folder call obviously svg. With Webpack it was easy to import them and I had several alternatives on how to do it.
To load them I was using vue-inline-svg plus a custom Vue component that wraps around this package:

<template>
    <InlineSvg
        :src="require(`@/svg/${name}.svg`)"
        class="fill-current"
    />
</template>

<script>
import InlineSvg from "vue-inline-svg";

export default {
    components: { InlineSvg },
    props: {
        name: {
            type: String,
            required: true,
        },
    },
};
</script>

This is just a simple custom Vue component that accepts a prop called name and loads <InlineSvg /> under the hood.
As a side note, my custom component called icon is defined as a global component inside the app.js file, so I can use it all over the place:

import Icon from "@/components/Icon.vue"; 

const app = createApp({ render: () => h(App, props) })
            .component("icon", Icon);

Usage:

<icon name="some-icon-name" />

This approach was simple, but unfortunately it's NOT working out of the box with Vite, so let's fix it.

Solution 1: Adding back require()

Probably the easiest way to fix this is to use vite-plugin-require which adds support for require() to Vite.
You should not see any breaking changes while using this and I believe it's the most elegant way to do it if you're already using require() to load your SVGs.

Update: I've noticed a bug while using this method in Vite 3.x

Solution 2: Importing SVGs as components

This is what I personally use and I think it's the most elegant way of doing it.

If you are not using any SVG loader or/and a custom Vue component as a wrapper, you can use vite-svg-loader which allows you to tap straight into the SVG and import it as a Vue component.
More than that you can go a step forward and a custom wrapper over it to achieve something similar with the other 2 solutions, by making use of dynamic components.

To set it up you first need to install it:

npm i vite-svg-loader

Next you need to add this plugin to your vite.config.js:

import svgLoader from 'vite-svg-loader';

export default defineConfig({
  plugins: [
    // ...
    svgLoader(),
  ],

});

Now you can import each SVG as component, url or raw... but importing each SVG individually will make a huge mess into our project.

To fix this issue, we can create a component that will dynamically load the SVG we want:

<script setup>
import { defineAsyncComponent } from 'vue';

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
});

const icon = defineAsyncComponent(() =>
  import(`../assets/svg/${props.name}.svg`)
);
</script>

<template>
  <component :is="icon" class="fill-current" />
</template>

Now you can use this new component by importing it whenever you need it in your project or add it as a global into your app.js.

<icon name="user" />

Solution 3: Adding your SVGs as Vue components

While I do not recommend this, it might be helpful if you have just a few icons you need to include and reuse here and there. This is more or less a brainless approach, but it works if you're lazy.
So what you can do is to define your SVGs into separate Vue components. Example this Check.vue placed inside the icons folder:

<template>
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 32 32"
        class="fill-current"
    >
        <path
            d="M 28.28125 6.28125 L 11 23.5625 L 3.71875 16.28125 L 2.28125 17.71875 L 10.28125 25.71875 L 11 26.40625 L 11.71875 25.71875 L 29.71875 7.71875 Z"
        />
    </svg>
</template>

Now we also need to have a helper component called <Icon /> that we can define as global. Inside this we can make use of dynamic components and load the .vue SVGs dynamically:

<template>
    <component :is="dynamicComponent" />
</template>

<script>
import { defineAsyncComponent } from "vue";

export default {
    props: {
        name: {
            type: String,
            required: true,
        },
    },

    computed: {
        dynamicComponent() {
            const name = this.name.charAt(0).toUpperCase() + this.name.slice(1);

            return defineAsyncComponent(() => import(`./icons/${name}.vue`));
        },
    },
};
</script>

To use the global component, you can do the same thing as in the legacy code I've presented in the begining:

<icon name="check" />

That's pretty much it. What method do you prefer?

Support & follow me

Migrating Laravel 9 with Inertia.js + Vue.js + Tailwind CSS from Laravel Mix (Webpack) to Vite

George Tudor — Sun, 23 Oct 2022 14:30:31 +0000

Back in February this year I was writing this guide on how to setup Inertia.js + Vue.js + Tailwind CSS on a brand new Laravel 8 project.
That guide also worked for the early releases of Laravel 9, but a few months later Laravel took a strange turn switching from Webpack to Vite in a minor release.
While Webpack was and still is ok for anyone who's using it, I was surprise to see this sudden shift during a minor release.
Aaaaanyway, let's move on and dig into the fun stuff.

What's Vite and how does it work?

Vite is a great open-source frontend tool built by Evan You, the same guy behind Vue. It offers live reload out of the box, really user friendly and easy to understand syntax and it's faaaast. You can find more info about "why" is it great here.

Vite vs Laravel Mix (Webpack). Ease of use

Here are just my 2 cents. I've been using Webpack since forever and I can say for sure that switching to Vite was like moving from a good apartment to a penthouse. Vite is so much easy to use.

Installing Vite and Vite related packages

Before we start, let's remove all the Laravel Mix/Webpack related stuff installed in the previous guide. So we can get rid of the following packages:

npm uninstall laravel-mix webpack-shell-plugin-next

Next we need to add all the Vite related packages. By default, Laravel ships only with the vite package but we need a bit more in order to support Inertia.js, Tailwind CSS and Vue.

// Make sure your have Node v.16+ installed
npm install --save-dev vite laravel-vite-plugin @vitejs/plugin-vue

Setting up vite.config.js

First we need to remove the old webpack.mix.js file because we no longer need it. If you have other stuff in there (not related to this guide) make sure you port them to your new vite.config.js file.
Now let's create a blank new vite.config.js file and add the default scaffolding:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Next we have to import the Vue plugin for Vite and include it into the plugins section. We're also going to remove the app.css input since we'll include the CSS in our app.js.
So our new config will look like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Post CSS config

Since we're importing app.css directly into Vue, we're going to need a postcss.config.js file to define our PostCSS plugins:

module.exports = {
    plugins: [
        require('postcss-import'),
        require('tailwindcss')
    ]
}

If you don't have postcss installed, feel free to add it:

npm install --save-dev postcss-import

Let's not forget about Ziggy

We've used Ziggy in our previous guide and we're still going to use it now. In order for Vite to resolve it we have to define some aliases in vite.config.js.

So our final version of the config will look like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            'ziggy': '/vendor/tightenco/ziggy/src/js',
            'ziggy-vue': '/vendor/tightenco/ziggy/src/js/vue'
        },
    },
});

Adding assets to our main template

When we were using Webpack, we had include multiple lines of code in our main templating. It was looking like this:

<link href="{{ asset(mix('css/app.css')) }}" rel="stylesheet">
<script src="{{ asset(mix('js/manifest.js')) }}" defer></script>
<script src="{{ asset(mix('js/vendor.js')) }}" defer></script>
<script src="{{ asset(mix('js/app.js')) }}" defer></script>

We had the app.css file, the manifest.js, ventor.js and lastly our app.js. While this was not bad at all, with Vite things are more simpler.
All we have to do is to replace the previously mentioned lines with the following Blade directive:

@vite('resources/js/app.js')

Adapting your Vue files

First you need to know that require() is no longer available while using Vite. So you will need to change all your code that does that.
So for example this:

window.Pusher = require('pusher-js');

Will become this:

import Pusher from 'pusher-js';
window.Pusher = Pusher;

.vue file extention is required for all your imports. So this will throw an error:

import Icon from "@/components/Icon";

You will need to add the file extention:

import Icon from "@/components/Icon.vue";

Note that the @ alias is already defined in the Laravel plugin, so you no longer have to define it.

Finally, let's deal with app.js

This is our old app.js file that we used in the previous guide. It won't work out of the box, so we'll have to modify it a little bit.

import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";

import { ZiggyVue } from "ziggy";
import { Ziggy } from "./ziggy";

InertiaProgress.init();

createInertiaApp({
    resolve: async (name) => {
        return (await import(`./Pages/${name}`)).default;
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .component("Link", Link)
            .component("Head", Head)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

We need to import resolvePageComponent from the Laravel plugin and change our resolve function + to change the ZiggyVue import + to import our CSS. So the final version will look like this:

import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

import { ZiggyVue } from "ziggy-vue";
import { Ziggy } from "./ziggy";
import '../css/app.css';

InertiaProgress.init();

createInertiaApp({
    resolve: async (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .component("Link", Link)
            .component("Head", Head)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

That's pretty much it.

Building your app

Last thing we need to do is to change our package.json's scripts.

{
    "dev": "vite",
    "build": "vite build"
}

Now, in order to build you will have to firstly generate the ziggy.js file by running:

// You can find this command in the previous guide
php artisan ziggy:generate resources/js/ziggy.js

Then you can run the dev or build:

npm run dev

Also, make sure you clear your view cache because this might cause some issues after the migrations: php artisan view:cache.

For more info you can always check the official Laravel's migration guide here.

Extra

If you want to run commands during Vite compilation you can use innocenzi/vite-plugin-run. This will make it easy to run php artisan ziggy:generate resources/js/ziggy.js whenever your routes get changed or when deploying to production.

Support & follow me

Using Laravel's Illuminate Validation in any PHP project

George Tudor — Sat, 19 Feb 2022 14:12:05 +0000

I'm developing a Wordpress plugin that requires strict data for the frontend. The frontend is built with Vue.js and it's basically a multistep wizard where every step is represented by a specific Vue component.

A little bit of context

I want to give the freedom to any developer that's going to use this wizard to pass any step they want in any order they want. On the backend side, each step is represented by a class that's instantiated as follows:

new \StaxWp\Gandalf\Core\Components\YoutubeVideo(
    [
        'title'       => '',
        'description' => '',
        'url'         => '',
        'autoplay'    => false,
    ],
    1,
);

This is a step that contains a title, a description, an url and an option to autoplay. Every step accepts in its constructor an array of data and an int for priority. Because we're humans and we can make mistakes I need to make sure all the fields from the array have specific values.

If you are familiar with Laravel, you know how the validation works. We can use the same validation outside Laravel. This is how I enforced validation rules for my step's data array:

final class YoutubeVideo extends Step {

    /**
     * YoutubeVideo constructor
     *
     * @param array   $data
     * @param integer $priority
     */
    public function __construct( array $data, int $priority = 0 ) {
        parent::__construct( $data, $priority );

        $this->add_validation_rules(
            [
                'title'       => 'sometimes|required|string|nullable',
                'description' => 'sometimes|required|string|nullable',
                'url'         => [ 'required', 'string', 'regex:/^(https?\:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/watch\?v\=\w+$/' ],
                'autoplay'    => 'required|boolean',
            ]
        );
    }

}

This of course won't work out of the box, so first we'll need to install illuminate/validation and illuminate/translation.

Setting up the requirements

composer require illuminate/validation
composer require illuminate/translation

Next we need to include the following in our class...

use Illuminate\Container\Container;
use Illuminate\Filesystem\Filesystem;
use Illuminate\Translation\FileLoader;
use Illuminate\Translation\Translator;
use Illuminate\Validation\Factory;

...then declare our private variable for validation and validation rules...

/**
* Step data validator
*
* @var Factory
*/
private $validation;

/**
* Step data validation rules
*
* @var array
*/
private $validation_rules = [];

... and then we need instantiate our validator in the constructor:

$loader           = new FileLoader( new Filesystem(), 'lang' );
$translator       = new Translator( $loader, 'en' );
$this->validation = new Factory( $translator, new Container() );

I'm not gonna add any localization files for the error messages because I won't display them. Everytime the validator fails I'm gonna throw an exception.

Actually doing the validation

Every step is casted to array and converted to JSON and then passed to the Vue, so where do I do the validation? In the array casting function of course:

/**
* Get step as array
*
* @return mixed
*/
public function to_array() {
    $this->validate_data();

    return get_object_vars( $this );
}

/**
* Validate step's data
*
* @return mixed
*/
protected function validate_data() {
    if ( ! empty( $this->data() ) && empty( $this->validation_rules ) ) {
        throw new Exception( $this->type() . ' has data but no validation rules.' );
    }

    $validator = $this->validation->make( $this->data(), $this->validation_rules );

    if ( $validator->fails() ) {
        throw new Exception( $this->type() . ' has an incorrect data format.' );
    }
}

By doing this I know for sure that my $data array has all the required fields and each field has the required value.

I hope you've found this short tutorial useful.

Support & follow me

How to setup Wordpress coding standard rules in VS Code

George Tudor — Fri, 18 Feb 2022 08:41:12 +0000

I see a lot of code that's not following any standards. Especially in the Wordpress community.

I don't hate it because it does the job done, but if you try to debug it or understand it you're gonna have a bad time. Unreadable code is awful.

We, at StaxWP, always use Wordpress coding standards in our themes and plugins. It's easy to implement it, let me show you.

What coding standard does Wordpress follow?

Wordpress follows Pear coding standards but with some twists. There are some characteristics that are present only in Wordpress.

Here are some examples:



// Spatiate
$x = $foo[ $bar ]; // correct
$x = $foo[$bar]; // incorrect

// Yoda conditions
$x = 2 === $i; // correct
$x = $i === 2; // incorrect

So what do we do to fix these things automatically?

We use WordPress Coding Standards for PHP_CodeSniffer (WPCS) which uses Squizlabs' PHP codesniffer (phpcs) and beautifier & fixer (phpcbf) under the hood to scan and format the code.

You can install WPCS globally or inside a project. I like to use it globally inside Ubuntu WSL2, but this guide will work for any setup. First we need to clone the repository in some location. I've picked the home directory:



git clone git@github.com:WordPress/WordPress-Coding-Standards.git

Install the dependencies:



cd WordPress-Coding-Standards
composer install

Now we have phpcs and phpcbf installed in vendor/squizlabs/php_codesniffer/bin and we can use them in VS Code.

For VS Code we're using the PHP Sniffer & Beautifier extension. We just need to install it, add the paths to phpcs and phpcbf and tell it what coding standards to use.

After we've installed it, we go ahead and press Ctrl/Cmd + Shift + P inside VS Code and search for settings.json. There will be 4 different files with the same name:

Workspace Settings: referring to the current project's settings
Remote Settings: referring to the user's settings but inside WSL/Docker
Settings: referring to the user's settings on current machine
Default Settings: containing the default settings (we don't want to touch these)

Depending on your setup you will want to set these coding standards per user or per workspace. I suggest you set them per user and overwrite them per workspace whenever you have to.

So were going to open the user's settings and add the following lines:

"files.autoSave": "onWindowChange", "editor.linkedEditing": true, "editor.tabSize": 4, "editor.detectIndentation": false, "editor.formatOnSave": true, "window.title": "${activeEditorLong}${separator}${rootName}", "phpsab.standard": "WordPress", "phpsab.snifferEnable": true, // disable this if you don't need suggestions "phpsab.executablePathCBF": "{PATH}/WordPress-Coding-Standards/vendor/squizlabs/php_codesniffer/bin/phpcbf", "phpsab.executablePathCS": "{PATH}/WordPress-Coding-Standards/vendor/squizlabs/php_codesniffer/bin/phpcs", "phpsab.snifferShowSources": true

Make sure to replace {PATH} with the correct path to your WordPress-Coding-Standards folder. Also, if you are on Windows and you don't use WSL2, you will need to refer to phpcbf.bat and phpcs.bat.

Now we are pretty much set. Everytime we need some other coding standard we can overwrite it in our current workspace by adding phpsab.standard and specifying the standard.

Here's a short example of what will happen everytime you will have some badly formatted:

That's it! Enjoy.

Support & follow me

Server side rendering with Laravel + Inertia.js + Vue.js

George Tudor — Tue, 15 Feb 2022 05:45:03 +0000

Notice: This is a guide for Laravel with Laravel Mix which is using Webpack under the hood. Soon I'll be writing a new one for Vite.

SEO is really important so you should have SSR (server side rendering) whenever you are building a SPA (single page application). This is not an issue if you are using Laravel's default templating system, which is Blade, because everything is rendered on the server and the result gets directly shipped into the browser.

In our case the rendering is done on the client side so our DOM is pretty empty. To solve this problem and make our website work even without Javascript enabled we'll need to somehow render everything on and the server side and serve all the resulted HTML on page-load.

Luckily Inertia ships with some tools to help us tackle this issue.

Let's add the following two packages to our project:

npm install @vue/server-renderer
npm install @inertiajs/server

We are not using -D or --save-dev flag on these 2 packages because we also need to run them on our production sever. As a general rule for composer.json and package.json, the packages that are installed inside require-dev respectively devDependencies should be used only in a development environment.

Next we need to create a server configuration file called ssr.js inside the same folder as our app.js, meaning resources/js. This file will look very similar to our app.js file, but instead of being compiled and handled by the browser, it will be handled by Node.js.

Our ssr.js file should look like this:

import { createSSRApp, h } from "vue";
import { renderToString } from "@vue/server-renderer";
import { createInertiaApp, Link, Head } from "@inertiajs/inertia-vue3";
import createServer from "@inertiajs/server";

import { ZiggyVue } from "ziggy";
import { Ziggy } from "./ziggy";

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: (name) => require(`./Pages/${name}`),
        setup({ app, props, plugin }) {
            return createSSRApp({
                render: () => h(app, props),
            })
                .use(plugin)
                .use(ZiggyVue, Ziggy)
                .component("Link", Link)
                .component("Head", Head);
        },
    })
);

Notice that instead of createApp we import createSSRApp from Vue and we're also wrapping our createInertiaApp method inside createServer method. We also no longer import Inertia's progress bar because that won't be ever used on server-side.

Next we'll need one more package to fully support our Node server:

npm install webpack-node-externals

Now we'll create a separate Webpack file called webpack.ssr.mix.js which will be used by our Node.js server to compile the resources.

const path = require("path");
const mix = require("laravel-mix");
const webpackNodeExternals = require("webpack-node-externals");

// Rezolve Ziggy
mix.alias({
    ziggy: path.resolve("vendor/tightenco/ziggy/dist/vue"),
});

// Build files
mix.options({ manifest: false })
    .js("resources/js/ssr.js", "public/js")
    .vue({ version: 3, options: { optimizeSSR: true } })
    .alias({ "@": path.resolve("resources/js") })
    .webpackConfig({
        target: "node",
        externals: [webpackNodeExternals()],
    })
    .version();

As you can see our webpack.ssr.mix.js file is really similar to webpack.mix.js. You'll need to always remember to also update your SSR webpack file everytime you update your default webpack file with something that can be used on the server-side. Now eveything that's gonna be used by our Node.js server will be bundled to public/js/ssr.js.

Now let's publish the Inertia's SSR config file...

php artisan vendor:publish --provider="Inertia\ServiceProvider"

...and enable the SSR in config/inertia.php by changing the enabled flag to true.

The only thing that's left to be done now is to compile and to spin up our Node.js server:

npx mix --mix-config=webpack.ssr.mix.js
node public/js/ssr.js

If everything's fine you should get a similar output:

Starting SSR server on port 13714...
Inertia SSR server started.

Now you can even disable the browser's Javascript and you'll still be able to navigate through the site because everything will be rendered on the server side by the Node.js server and served to your browser on page load.

That's pretty much it.

You can find everything we've talk about in Part 1 & 2 in this repo.

Support & follow me

Must have Wordpress plugins in 2022. This list will save you time & money

George Tudor — Sat, 12 Feb 2022 22:06:43 +0000

Have you ever wondered how many awesome Wordpress plugins, that you can use for your business, are out there in the wild and you haven't even heard of them? Some can do those little things that you have always dreamed of and some can even save you money.

How can a Wordpress plugin save you money?

When you are looking for a particular functionality and you want to have it right away on your website, you are more likely to be willing to pay for it. However, there might be a free plugin that does exactly the same thing you need. You just need to dig deeper.

Although this sounds awesome, you might also have to be a bit cautious because some free plugins, that are offering the same functionality as a paid plugin, can be harmful. A free plugin might not have the same coding standards as a premium plugin, it might not have optimized database queries, it might not get future updates, etc.. So sometimes a free plugin can be a double edged sword.

Enough talking, let's get down to the plugins list

1. Elementor

With over 5 million downloads, Elementor is the most popular plugin out there. Using it you can basically build a website in no time and you can use it with any theme.

2. WP-Optimize

This is probably my favourite caching plugin and I prefer it over other plugins. It will help you optimize your website and it will give you a big boost in terms of loading speed which will also help your SEO.

3. Yoast SEO

Speaking of SEO, you must have Yoast SEO. It will add all the necessary meta tags, Facebook & Twitter Open Graph and much more. If you really rely on SEO you definitely need this.

4. Smush – Lazy Load Images

This goes hand in hand with any caching plugin. Smush is really awesome and helps you optimize and lazy-load your images so it will inevitably boost your page speed.

5. BuddyPress

If you are building a community, you can use the most popular community plugin our there. BuddyPress is awesome and it has many 3rd party addons you can use alongside. Me and my team have built an awesome plugin that let's you build BuddyPress pages using Elementor. It's called BuddyPress builder for Elementor - BuddyBuilder and it's free.

6. WooCommerce

If you want to sell stuff online, WooCommerce is the way to go. It has everything you need and it also has lots of official plugins. The only downside of WooCommerce is that you either need a powerful theme that has a solid integration with WooCommerce or you get the pro version of Elementor and some other 3rd party plugins that have Elementor widgets and you build your pages yourself.

7. Wordfence Security

In terms of security, Wordfence is really powerfull. I mostly use it to protect my sites against brute-force attacks. You might not notice anything wrong if you don't have any security plugin installed, but you will be surprised when you'll see that your login form gets bombarded.

Conclusion

There are lots of other useful plugins and for sure you will find the one you need. Just make sure you give a chance to any plugin, not only highly rated plugins.

Support & follow me

10 Laravel packages that might save your day

George Tudor — Fri, 11 Feb 2022 08:56:22 +0000

Here's a relatively short list with 10 Laravel packages that might help you in your current or future project. These are packages that I am or have been using or tested and I practically fall in love with them.

This is not a ranking, so the order it's not relevant at all!

1. protonemedia/laravel-form-components

If you're using blade and want to handle forms easily, this is the go to. You have all the components you need, support for Bootstrap, Tailwind Forms and even for Livewire.

An alternative to this is the good old laravelcollective/html, but using this is pretty primitive these days. But hey, it works!

2. pestphp/pest

Testing is a must, but sometimes is a painful process. Do you hate writing test classes? Say no more! Pest is a beautiful PHPUnit wrapper that brings joy to any developer that uses it. I know that this sounds like a cheap teleshopping commercial, but it's that good and simple. Give it a try.

3. laravel/horizon

You have probably heard of this because it's a Laravel product. So if you're running an app that uses Redis a lot, you might need this. It helps you monitor your queues and scale up your workers.

4. mcamara/laravel-localization

This is probably the most popular localization package out there. Helps you run multilanguage sites in no time and has support for a lot of Laravel versions, so even if you still run v4 or v5 (which you shouldn't) you can plug this in right away.

5. tighten/ziggy

I've talked more about Ziggy an its implementation in my Setting up Laravel with Inertia.js + Vue.js + Tailwind CSS article. Basically you can use it to pass your web routes into the DOM's head. Now you can easily access them from your Vue/Svelte/React frontend. Heck, you can even retrieve your routes from an Ziggy Api endpoint if you don't want to print them in your DOM.

6. barryvdh/laravel-snappy

This is just a Laravel service provider for Snappy. If you don't know, you can use Snappy to screenshot or save a web page to PDF. It uses wkhtmltopdf under the hood.

An alternative and a more popular solution to this is of course spatie/browsershot which does the same thing but using headless Chrome. I used to use Snappy years ago, but now I use Browsershot.

7. nunomaduro/larastan

Just a PHPStan wrapper for Laravel that helps you finding errors in your code. Depending on how your write your code, it might not catch everything, but it's really useful if you want to maintain an error free app and a specific code quality standard.

8. spatie/laravel-backup

We're back to Spatie... because Spatie builds awesome packages. Actually, I don't even know if there's a project I've been working on that doesn't have a Spatie package installed.

The title says it all. You get backups for your whole project. You can save them on your disk or even S3 and you have a few artisan commands you can leverage to your needs.

9. worksome/envy

This is something that I've discovered a few days ago. It's basically a took that scans for your missing ENV vars. You should always keep your .env.example up to date.

10. livewire/livewire

Livewire is a great too to build a modern interfaces without the need of Vue or React or Svelte. So you get to use Blade with some custom components that are updating in real-time because Livewire, get it? It's an awesome tool and just like Inertia, it brings simplicity to the Laravel ecosystem.

Final thoughts

There are many other awesome packages that worth being mentioned, but I've picked just a few of them for now. What do you think about them? Which one have you used and what else do you recommend? Let me know in the comments.

Cheers! ;)

Support & follow me