DEV Community: Capsules Codes

Create a Backup of a Laravel Project to Nextcloud

Capsules Codes — Tue, 29 Jul 2025 07:23:40 +0000

TL;DR: How to quickly create a backup of your Laravel project and store it on Nextcloud.

You can find a sample Laravel project on this Github Repository. Learn more on Capsules, X or Bluesky.

Several months ago, a similar article was written, but that one focused on automatically backing up to Dropbox.

However, a few weeks ago, while searching for a more suitable personal file storage system, a new solution emerged: Nextcloud.

Nextcloud is an open-source file hosting software and collaborative platform. It can be accessed via WebDAV, any web browser, or specialized clients. Its open architecture allows for the extension of its features.

In other words, Nextcloud is an excellent candidate for storing backups.
This article assumes the reader has access to a Nextcloud instance on a dedicated server.

Before transferring backups to Nextcloud, we first need to generate them. The spatie/laravel-backup package simplifies this process. Install it with the following command:

composer require spatie/laravel-backup

Then create the backup config file to quickly configure project backups :

config/backup.php

<?php

use Illuminate\Support\Str;

return [

    'backup' => [

        'name' => 'capsules',

        'source' => [

            'files' => [

                'include' => [ base_path( 'public' ), base_path( 'storage' ) ],

                'exclude' => [],

                'relative_path' => base_path(),
            ],

            'databases' => [ 'sqlite' ]
        ],

        'destination' => [

            'filename_prefix' => 'backup-',

            'disks' => [ 'local' ]
        ],

        'temporary_directory' => storage_path( 'app' )

    ]
];

To trigger the backup :

php artisan backup:run

Starting backup...
Dumping database /nextcloud/database/database.sqlite...
Determining files to backup...
Zipping 37 files and directories...
Created zip containing 37 files and directories. Size is 32.11 KB
Copying zip to disk named local...
Successfully copied zip to disk named local.
Backup completed!

The command php artisan backup:run creates a compressed backup containing what's listed under the include key, excluding anything in exclude. It includes databases and stores the result in a folder named after the value in the name key, naming the file with the filename_prefix followed by the timestamp YYYY-MM-DD-HH-mm-ss. The final zip is placed in the disk location defined under the disks key, here set to local, which corresponds to storage/app/private.

storage
    > app
        > private 
            > capsules
                - backup-2025-07-25-14-15-41.zip
                - backup-2025-07-25-14-15-51.zip
                ...

The backup procedure is now operational. It must now be linked to the Nextcloud account. Since Nextcloud uses the WebDAV protocol, we’ll need a PHP League package: flysystem-webdav, which is a Flysystem adapter for WebDAV.

composer require league/flysystem-webdav

Add a new disk configuration in the filesystems.php file:

config/filesystems.php

<?php

return [

    'disks' => [

        'nextcloud' => [

                'driver' => 'nextcloud',
                'url' => env( 'NEXTCLOUD_URL' ),
                'prefix' => env( 'NEXTCLOUD_PREFIX' ),
                'username' => env( 'NEXTCLOUD_USERNAME' ),
                'password' => env( 'NEXTCLOUD_PASSWORD' ),
                'auth' => 1

          ],

          ...
    ]
];

Now update laravel-backup to use the nextcloud disk and tweak a few additional settings.

config/backup.php

<?php

return [

    'backup' => [

                ...

        'name' => env( 'NEXTCLOUD_APP_NAME', '' ),

                ...

        'destination' => [

                        ...

            'filename_prefix' => Str::replace( '.', '-', env( 'NEXTCLOUD_APP_NAME' ) ) . '-',

            'disks' => [ 'nextcloud' ]
        ],

                ...
    ]
];

Add environment variables to .env.example and .env:

.env.example

NEXTCLOUD_URL=
NEXTCLOUD_USERNAME=
NEXTCLOUD_PASSWORD=
NEXTCLOUD_APP_NAME=Article
NEXTCLOUD_PREFIX=/cloud/remote.php/dav/files/${NEXTCLOUD_USERNAME}/

Since the Nextcloud file manager is hosted alongside other tools, access is done via the cloud prefix. Normally, it would be via remote.php/dav/files/${NEXTCLOUD_USERNAME}.

To ensure credentials are correct and Nextcloud is accessible, use these two lines in Laravel Tinker via php artisan tinker :

> $config = Config::get("filesystems.disks.nextcloud");

= [
    "driver" => "nextcloud",
    "url" => "https://capsules.codes",
    "prefix" => "/cloud/remote.php/dav/files/username@capsules.codes/Applications/",
    "username" => "username@capsules.codes",
    "password" => "password",
    "auth" => 1,
  ]

> Process::run('curl -s -o /dev/null -w "%{http_code}" -u ' . $config["username"] . ':' . $config["password"] . ' -X PROPFIND "' . $config["url"] . $config["prefix"] . '" -H "Depth: 1"');

= Illuminate\Process\ProcessResult {#5355
    output: "207",
    errorOutput: "",
    exitCode: 0,
    successful: true,
  }

Now create a service provider to establish the connection to Nextcloud : NextcloudServiceProvider.

app\Providers\NextcloudServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Storage;
use Illuminate\Contracts\Foundation\Application;
use Sabre\DAV\Client;
use League\Flysystem\WebDAV\WebDAVAdapter;
use Illuminate\Filesystem\FilesystemAdapter;
use League\Flysystem\Filesystem;

class NextcloudServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        Storage::extend( 'nextcloud', function( Application $app, array $config )
        {
            $client = new Client( [ 'baseUri' => $config[ 'url' ], 'userName' => $config[ 'username' ], 'password' => $config[ 'password' ], 'authType' => $config[ 'auth' ] ] );

            $adapter = new WebDAVAdapter( $client, $config[ 'prefix' ] );

            return new FilesystemAdapter( new Filesystem( $adapter, $config ), $adapter, $config );
        } );
    }
}

Don't forget to register the service provider in providers.php :

bootstrap/providers.php

<?php

return [

    App\Providers\AppServiceProvider::class,
    App\Providers\NextcloudServiceProvider::class

];

Set up daily scheduled backup commands in console.php

routes/console.php

<?php

use Illuminate\Support\Facades\Schedule;

Schedule::command( 'backup:run' )->daily();
Schedule::command( 'backup:clean' )->daily();

This code will run the commands once a day using the daily method assuming a scheduler is properly configured.

> php artisan backup:run

Starting backup...
Dumping database /capsulescodes/database/database.sqlite...
Determining files to backup...
Zipping 27 files and directories...
Created zip containing 27 files and directories. Size is 23.99 KB
Copying zip to disk named nextcloud...
Successfully copied zip to disk named nextcloud.
Backup completed!

> php artisan backup:clean

Starting cleanup...
Cleaning backups of Article on disk nextcloud...
Used storage after cleanup: 23.99 KB.
Cleanup completed!

Glad this helped.

Flintable - Introducing Flint

Capsules Codes — Tue, 01 Jul 2025 13:02:41 +0000

Flint is a Git-integrated code formatter that lets each developer work in their preferred style locally while maintaining a consistent style remotely. By automatically applying “local” and “remote” formatting passes during pull and push operations, Flint prevents formatting noise in commits and code reviews.

Pushing code

Pulling code

To get started quickly, head over to this link.

As code artisans, we each have our own tastes: brace styles, indent sizes, maximum line lengths… Yet when collaborating, these personal choices can diverge, clutter pull requests, and slow down code reviews. Existing tools like Prettier enforce strict, uniform rules that are convenient but inflexible when you want to keep a personal touch.

Flint bridges that gap: you code in your local style, then Flint automaticaly reformats to match the remote conventions before syncing to the repository. The result? Less cognitive friction, cleaner diffs, and perhaps a more relaxed team.

Opinionated vs. Customizable

Prettier presents itself as an “opinionated” formatter, reducing configuration surface at the cost of granular control. If you encounter a style you don’t like, you have no choice but to disable Prettier or sprinkle // prettier-ignore comments everywhere.

Configuration Drift

You can also rely on ESLint for auto-formatting, but that often means knee-jerk tweaks to dozens of rules, adjusting configurations project by project, and constantly juggling divergent overrides. In the end, you waste a lot of time on micro-adjustments and live in constant confusion.

According to cognitive load theory, our working memory can handle only a limited number of “chunks”. Each time we switch formatting style-indentation, brace placement, line breaks- we incur extra load that distracts from our code’s logic and design. Flint offers a two-mode formatting approach:

Local: You code in your usual style without interruption.

Remote: Flint reformats according to team conventions just before syncing.

This seperation lets you stay focused on the problem at hand and maintain a stable mental model during code review.

Key features

Git Integration

Flint interposes itself in your git pull and git push commands, inserting formatting steps transparently. There’s nothing new to learn-just keep using git as you always do.

Configurable Linter

A simple flint.config.json file lists your linters, each with local and remote command settings.For example, you might run ESLint with one config locally and a stricter config remotely.

Invisible Commit

During certain operations, Flint creates a temporary commit to track the style transition. The diffs correspond only to the difference between, your previous commit in your style and the current code in your style.

Getting Started

1.Install Flint using the available package manager of your choice.

2.Run flint init at the root of your project. This creates a hidden directory and a base configuration file.

3.Edit flint.config.json to adjust your formatting options: define your “local” and “remote” commands, the file types to include, and any other rules for your workflow.

4.If you haven’t already, initialize a Git repository with git init, then add a remote with git remote add.

5.Continue your usual Git workflow: before each pull, Flint applies the “remote” formatting then syncs your changes; before each push, Flint preserves your local style and then applie the “remote” formatting just before sending.

This seamless integration lets you benefit from Flint without disrupting your habits or referencing any specific linting or package-management tools.

To get started quickly, head over to this link.

References & Further Reading

Flint GitHub
Flint Documentation
Anthony Fu, “Why I don’t use Prettier”
Artem Zakirullin, “Cognitive load is what matters”
ESLint Pluggable Linter
Prettier

Craft Emails with Laravel, React and Tailwind using Inertia Mailable

Capsules Codes — Tue, 04 Mar 2025 11:03:17 +0000

TL;DR: How to easily build dynamic email templates while keeping your React and Tailwind tools using the Inertia Mailable package.

A sample Laravel project can be found on this Github Repository. Find out more on Capsules, X or Bluesky.

Inertia Mailable is a package that allows you to design amazing emails within a Laravel project by leveraging the power of InertiaJS. Create interactive and responsive email designs by building React components, enhancing them with TailwindCSS, and integrating them into your mailables.

This package is under continuous development. It was created to simplify email layout while maintaining the same approach as for the rest of the web platform. An email template could thus correspond to a page template.

This article provides an example of how to use the Inertia Mailable package. It follows the scenario of a user signing up on the platform and receiving a welcome email. Starting from a Laravel RILT project, a Mailable will be configured with its default Markdown email template. This will then be transferred to a React component with TailwindCSS classes added. The steps are as follows:

First, you need to create the Mailable file by using the Artisan command: php artisan make:mail. Add the --markdown option to generate the Markdown template simultaneously.

php artisan make:mail WelcomeNewUser --markdown=mail.welcome

The Mailable would then look like this :

app\Mail\WelcomeNewUser.php

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;


class WelcomeNewUser extends Mailable
{
    use Queueable, SerializesModels;

    public function __construct()
    {
    }

    public function envelope() : Envelope
    {
        return new Envelope( subject : 'Welcome New User' );
    }

    public function content() : Content
    {
        return new Content( markdown : 'mail.welcome' );
    }

    public function attachments() : array
    {
        return [];
    }
}

The envelope section handles the subject, recipient, and sender of the email. The content section corresponds to the body of the message, which is directed to a Blade file in Markdown format located in the resources/views/mail folder.

resources/views/mail/welcome.blade.php

<x-mail::message>
# Introduction

The body of your message.

<x-mail::button :url="''">
Button Text
</x-mail::button>

Thanks,<br>
{{ config('app.name') }}
</x-mail::message>

This Blade file contains two Blade components, x-mail::message and x-mail::button. These components are integral parts of the Laravel framework. Here is an example of what the x-mail::button Blade component looks like:

vendor/laravel/framework/src/Illuminate/Mail/resources/views/html/button/blade.php

@props([
    'url',
    'color' => 'primary',
    'align' => 'center',
])
<table class="action" align="{{ $align }}" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="{{ $align }}">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="{{ $align }}">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td>
<a href="{{ $url }}" class="button button-{{ $color }}" target="_blank" rel="noopener">{{ $slot }}</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

To quickly preview the email template, you need to create a route.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Mail\WelcomeNewUser;


Route::get( '/', fn() => ( new WelcomeNewUser() )->render() );

Since the customization of this template is limited, you need to publish the components to access more options. A series of files will then appear in the resources/views/vendor/mail folder.

php artisan vendor:publish --tag=laravel-mail

The Blade components will appear in the html folder, while the default.css file will be located in the themes folder.

Let’s start with the Inertia Mailable package now.

composer require capsulescodes/inertia-mailable

The next step is to publish the javascript or typescript file that will manage React components via InertiaJS.

// Javascript

php artisan vendor:publish --tag=inertia-mailable-react-js

// Typescript

php artisan vendor:publish --tag=inertia-mailable-react-ts

   INFO  Publishing [inertia-mailable-react-js] assets.

  Copying file [/vendor/inertia-mailable/stubs/js/react/mail.jsx] to [resources/js/mail.jsx] .................. DONE
  Copying file [/vendor/inertia-mailable/stubs/js/react/mails/Welcome.jsx] to [resources/js/mails/Welcome.jsx]  DONE

Next, you need to add the newly created javascript or typescriptfile to the vite.config.js file under the ssr category. Since these React components are generated server-side, they need to be compiled and stored in a folder that is not accessible to visitors.

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwind from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';


export default defineConfig( {
    plugins : [
        laravel( {
            input : [ 'resources/css/app.css', 'resources/js/app.jsx' ],
            ssr : [ 'resources/js/mail.jsx' ],
            refresh : true,
        }),
        tailwind(),
        react(),
    ],
    resolve : { alias : { '~': '/resources/js' } }
});

For this article, a new ssr script is added to the package.json file. This script transpiles the necessary files and stores them in the bootstrap/ssr folder. This script will be particularly important later in the article.

package.json

{
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "ssr": "vite build --ssr"
    },
    "dependencies" : {
        "@inertiajs/react" : "^2.0.4",
        "@tailwindcss/vite" : "^4.0.9",
        "@vitejs/plugin-react" : "^4.3.4",
        "concurrently" : "^9.0.1",
        "laravel-vite-plugin" : "^1.2.0",
        "react" : "^19.0.0",
        "react-dom" : "^19.0.0",
        "tailwindcss" : "^4.0.9",
        "vite" : "^6.0.11"
    }
}

And modify the previously created Mailable : WelcomeNewUser.

app\Mail\WelcomeNewUser.php

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
- use Illuminate\Mail\Mailable;
+ use CapsulesCodes\InertiaMailable\Mail\Mailable;
- use Illuminate\Mail\Mailables\Content;
+ use CapsulesCodes\InertiaMailable\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;

class WelcomeNewUser extends Mailable
{
    use Queueable, SerializesModels;

    public function __construct()
    {
    }

    public function envelope() : Envelope
    {
        return new Envelope( subject : 'Welcome New User' );
    }

    public function content() : Content
    {
-       return new Content( markdown : 'mail.welcome' );
+       return new Content( view : 'Welcome', props : [ 'name' => 'Capsules Codes' ] );
    }

    public function attachments() : array
    {
        return [];
    }
}

To inject data into the React component, we now use the props keyword, as opposed to with, which is used for data injection in Blade layouts.

It's time to preview the result. First, run npm run ssr.

If an error of this type Error: proc_open(): posix_spawn() failed: No such file or directory appears, it means that Node could not be found. You will then need to specify its path in a .env variable : NODE_PATH.

> ssr
> vite build --ssr

vite v5.4.2 building SSR bundle for production...
✓ 10 modules transformed.
bootstrap/ssr/ssr-manifest.json   0.81 kB
bootstrap/ssr/mail.js            13.65 kB
✓ built in 112ms

🎉

All that’s left is to customize the email from the React component.

resources/js/mails/Welcome.jsx

import { Layout, Subcopy } from '/vendor/capsulescodes/inertia-mailable/components/js/react/Layout';
import Table from '/vendor/capsulescodes/inertia-mailable/components/js/react/tags/Table';


function Welcome( { name } )
{
    const app = process.env.VITE_APP_NAME;
    const image = 'https://raw.githubusercontent.com/capsulescodes/inertia-mailable/main/art/capsules-inertia-mailable-mail-image.png';


    return (

        <Layout>

            <div>

                <p className="text-slate-800">Hello, { name }!</p>

                <p className="pt-4 text-sm text-slate-600">This is a mail made with Laravel, Inertia and React</p>

                <Table align="center">

                    <Table align="center">

                        <Table>

                            <img className="my-4 max-w-full" src={ image } />

                        </Table>

                    </Table>

                </Table>

                <p className="pb-4 text-sm text-slate-600">Regards,</p>

                <p className="text-slate-800">{ app }</p>

            </div>

            <Subcopy>

                <p className="text-xs text-slate-600">This is a subcopy made with Laravel, Inertia and React</p>

            </Subcopy>

        </Layout>
    );
}


export default Welcome;

For clarity, adding an alias in the vite.config.js file allows you to avoid importing components from their absolute path. /vendor/capsulescodes/inertia-mailable/components/react would then become @/react.

And, as a cherry on top, you can avoid transpiling the files with every change by using the --watch option. However, you will need to refresh the browser to view the changes.

"ssr": "vite build --ssr --watch"

To send the email, add a send route and configure the .env variables related to the Mailer.

routes/web.php

use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\Mail;
use App\Mail\WelcomeNewUser;


Route::get( '/send', function(){ Mail::to( 'example@example.com' )->send( new WelcomeNewUser() ); } );

.env

MAIL_MAILER=log
MAIL_HOST=127.0.0.1
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

Glad this helped.

Serve a Laravel project on Web, Desktop and Mobile with Tauri

Capsules Codes — Tue, 14 Jan 2025 09:45:40 +0000

TL;DR: How to display a Laravel project simultaneously on the web, your operating system, and your mobile device using Tauri.

A sample Laravel project can be found on this Github Repository. Find out more on Capsules, X or Bluesky.

Introduction: NativePHP, a framework that enables building native applications with PHP, needs no further introduction. Developed by Marcel Pociot and Simon Hamp, this framework currently relies on Electron. However, a new approach based on Tauri is being implemented.

This article explains how to locally serve the same project on three different platforms, using hot module replacement to view modifications in real-time. The web is served using the command php artisan serve:web. The desktop is served using the command php artisan serve:desktop. The mobile is served using the command php artisan serve:mobile.

In the interest of the reader and to keep this article concise, certain information will be directly integrated into the commands to avoid unnecessary back-and-forth.

The base command, php artisan serve:web, can be summarized as follows:

app\Console\Commands\ServeWeb.php

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Process;

use function Laravel\Prompts\intro;
use function Laravel\Prompts\note;

class ServeWeb extends Command
{
    protected $signature = 'serve:web';

    public function handle()
    {
        intro( 'Running Web Environment' );

        $this->initViteServer();
        $this->initPHPServer();
    }

    private function initViteServer() : void
    {
        note( "Starting Vite Development Server" );

        Process::start( "npm run dev:vite:web" );
    }

    private function initPHPServer() : void
    {
        note( "Starting PHP Server" );

        Process::forever()->tty()->run( "php artisan serve --port=50000" );
    }
}

Several notable features include:

A Vite development server is started with the command npm run dev:vite:web instead of the standard npm run dev command. The php artisan serve command is used with port 50000.

In the context of this article, it is essential to separate the different Vite servers. These servers will be launched simultaneously and must independently notify their respective platform when they detect a change. Unlike the PHP server, which keeps port 50000. The different ports are chosen arbitrarily.

Next, it is necessary to configure the package.json file to include the command npm run dev:vite:web.

package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "dev": "vite",
        "dev:vite:web" : "vite --config vite.web.config.js"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.20",
        "axios": "^1.7.4",
        "concurrently": "^9.0.1",
        "laravel-vite-plugin": "^1.0",
        "postcss": "^8.4.47",
        "tailwindcss": "^3.4.13",
        "vite": "^6.0"
    }
}

And create the Vite configuration file specific to the web:serve command.

vite.web.config.js

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,
        } ),
    ],
    server : {
        port : 50001
    }
} );

Ports 50000 and 50001 are respectively allocated to the PHP server and the Vite server for the web:serve command.

Here is the result obtained when running the php artisan web:serve command:

> php artisan web:serve

Running Web Environment

Starting Vite Development Server

Starting PHP Server

INFO  Server running on [http://127.0.0.1:50000].

Press Ctrl+C to stop the server

2024-07-16 01:52:18 / ............................................... ~ 0.16ms
2024-07-16 01:52:18 /favicon.ico .................................. ~ 506.93ms

For now, nothing new.

The next step: create a native application with Tauri. To do this, it is necessary to set up the Tauri infrastructure. But what is Tauri?

Tauri is a framework designed to provide a lighter alternative to Electron. Since version 2.0, Tauri also offers mobile solutions.

Installing Tauri is simple:

npm install --save-dev @tauri-apps/cli@2.2.2

Next, you need to add the binary to the scripts in the package.json file.

"scripts" : {
    ...
    "tauri" : "tauri"
    ...

Then, initialize Tauri using the command npm run tauri init:

> npm run tauri init

tauri
tauri init

✔ What is your app name? · Tauri App
✔ What should the window title be? · Tauri
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../public
✔ What is the url of your dev server? · http://127.0.0.1:50000
✔ What is your frontend dev command?
✔ What is your frontend build command?

The answers provided are tailored to the criteria of this article.

The src-tauri folder then appears. It is composed of several folders and files:

> src-tauri 
   > capabilities
   > icons
   > src
     .gitignore
     build.rs
     Cargo.tml
     tauri.conf.json

Once Tauri is installed, the generation of a native application can begin. To do this, a new command must be created: ServeDesktop.

app/Console/Commands/ServeDesktop.php

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Process;
use Illuminate\Support\Facades\File;

use function Laravel\Prompts\intro;
use function Laravel\Prompts\note;

class ServeDesktop extends Command
{
    protected $signature = 'serve:desktop';

    public function handle()
    {
        intro( 'Running Desktop Environment' );

        $this->initViteServer();
        $this->initPHPServer();
        $this->initTauriServer();
    }

    private function initTauriServer() : void
    {
        note( 'Starting Desktop App' );

        if( ! File::exists( base_path( 'src-tauri/target' ) ) )
        {
            Process::path( 'src-tauri' )->forever()->tty()->run( "cargo build" );
        }

        Process::forever()->tty()->run( "npm run dev:tauri:desktop -- --port=50003" );
    }

    private function initViteServer() : void
    {
        note( "Starting Vite Development Server" );

        Process::start( "npm run dev:vite:desktop" );
    }

    private function initPHPServer() : void
    {
        note( "Starting PHP Server" );

        Process::tty()->start( "php artisan serve --port=50000" );
    }
}

Three processes will be launched simultaneously.
The ports used for the desktop command are 50000, 50002, and 50003.
The initTauriServer method checks if the src-tauri/target folder exists. If it doesn't, it indicates that the dependencies related to Tauri have not been installed.
Process::tty() allows displaying information in the terminal.
Process::forever()->run() and Process::start() execute a command without a timeout. start runs in the background, while run remains the main process.

The PHP server port remains 50000. There is no need to launch multiple PHP servers: If the server is already running, an error message will appear: Failed to listen on 127.0.0.1:50000 (reason: Address already in use). Don't worry, this simply means the server is still active.

Now it's time for the Vite configuration for the desktop version.

vite.desktop.config.js

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,
        } ),
    ],
    clearScreen : false,
    server : {
        port : 50002
    }
} );

The ports used for the ServeDesktop command are: 50000 for PHP, 50002 for Vite, and 50003 for Tauri.
clearScreen: false prevents Vite from clearing the screen before displaying new data.

The commands npm run dev:vite:desktop and npm run dev:tauri:desktop appear in the package.json file. The dev:tauri:desktop command simply represents the tauri dev command.

package.json

...
"scripts": {
    "dev:vite:web": "vite --config vite.web.config.js",
    "dev:vite:desktop": "vite --config vite.desktop.config.js",
    "dev:tauri:desktop": "tauri dev"
},
...

The result:

> php artisan desktop:serve

Running Desktop Environment

Starting Desktop App

  Updating crates.io index
  Locking 471 packages to latest compatible versions
  ...
  Compiling tauri-macros v2.0.4
  Finished `dev` profile [unoptimized + debuginfo] target(s) in 36.49s

Starting Vite Development Server

Starting PHP Server

> dev:tauri:desktop
> tauri dev --port=50003

INFO  Server running on [http://127.0.0.1:50000].
...

Info Watching /article/src-tauri for changes...
Compiling libc v0.2.169
Compiling core-foundation-sys v0.8.7
Compiling objc-sys v0.3.5
...
Compiling tauri-macros v2.0.4
Compiling app v0.1.0 (/article/src-tauri)
Finished `dev` profile [unoptimized + debuginfo] target(s) in 23.44s
Running `target/debug/app`

2024-07-16 02:12:51 / ............................................... ~ 502.58ms

The final step of this article concerns the mobile application. A new command is introduced: ServeMobile.

app/Console/Commands/ServeMobile.php

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Process;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\File;

use function Laravel\Prompts\intro;
use function Laravel\Prompts\note;
use function Laravel\Prompts\warning;

class ServeMobile extends Command
{
    protected $signature = 'serve:mobile {--android} {--ios}';

    public function handle()
    {
        if( ! $this->option( 'ios' ) && ! $this->option( 'android' ) ) return warning( "A device option is needed : 'mobile:serve --android' or 'mobile:serve --ios'" );

        intro( 'Running Mobile Environment' );

        $this->initViteServer();
        $this->initPHPServer();
        $this->initTauriServer();
    }

    private function initTauriServer() : void
    {
        $device = $this->option( 'ios' ) ? 'ios' : 'android';

        note( Str::headline( "Starting Mobile {$device} App" ) );

        if( ! File::exists( base_path( 'src-tauri/target' ) ) )
        {
            Process::path( 'src-tauri' )->forever()->tty()->run( "cargo build" );
        }

        if( ! File::exists( base_path( "src-tauri/gen/{$device}" ) ) )
        {
            Process::forever()->tty()->run( "npm run tauri {$device} init" );
        }

        Process::forever()->tty()->run( "npm run dev:tauri:mobile:{$device} -- --port=50005" );
    }

    private function initViteServer() : void
    {
        note( "Starting Vite Development Server" );

        Process::start( "npm run dev:vite:mobile" );
    }

    private function initPHPServer() : void
    {
        note( "Starting PHP Server" );

        Process::tty()->start( "php artisan serve --port=50000" );
    }
}

A parameter is now required: the choice between --android or --ios.
A warning is displayed if the parameter is not specified.
As with the management of missing Tauri dependencies, the same applies to the folders specific to the mobile applications ios and android, via the command npm run tauri {$device} init.
Ports 50000, 50004, and 50005 are used respectively for the PHP server, the Vite server, and the Tauri server.

A new Vite configuration file must be created at the root of the project.

vite.mobile.config.js

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,
        } ),
    ],
    clearScreen : false,
    server : {
        host : '0.0.0.0',
        port : 50004,
        strictPort : true,
        hmr : {
            protocol : 'ws',
            host : "192.168.0.8",
            port : 50005,
        },
    }
} );

It includes ports 50004 and 50005.
The host must be specified to allow Vite to route the essential files for the proper functioning of the web page to the Android emulator in this specific case. A useful command to identify this host is: ipconfig getifaddr en0.

The various scripts are then added to the package.json file.

package.json

...
"scripts": {
    "dev:vite:web": "vite --config vite.web.config.js",
    "dev:vite:desktop": "vite --config vite.desktop.config.js",
    "dev:vite:mobile" : "vite --config vite.mobile.config.js",
    "tauri": "tauri",
    "dev:tauri:desktop": "tauri dev",
    "dev:tauri:mobile:android" : "tauri android dev",
    "dev:tauri:mobile:ios" : "tauri ios dev"
},
...

And here is the result when the command is executed:

> php artisan mobile:serve --android

Running Mobile Environment

Starting Mobile Android App

> tauri
> tauri android init

Generating Android Studio project...
    Info "/article/src-tauri" relative to "/article/src-tauri/gen/android/app" is "../../../"
    victory: Project generated successfully!
    Make cool apps! 🌻 🐕 🎉


Starting Vite Development Server

Starting PHP Server

> dev:tauri:mobile:android
> tauri android dev --port=50005

   INFO  Server running on [http://127.0.0.1.:50000].

   Press Ctrl+C to stop the server

Detected Android emulators:
  [0] INFO    | Storing crashdata in: /tmp/android/emu-crash-34.1.20.db, detection is enabled for process: 36048
  [1] Medium_Phone_API_33
  Enter an index for a emulator above.
Emulator: 1
...

...
Compiling rustls-webpki v0.102.3
Compiling tokio-rustls v0.26.0s]
Compiling hyper-rustls v0.27.1s]
Compiling reqwest v0.12.12 [29s]
  Finished `dev` profile [unoptimized + debuginfo] target(s) in 14.54s
  Info symlinking lib "/article/src-tauri/target/aarch64-linux-android/debug/libapp_lib.so" in jniLibs dir "/Users/mho/Work/Projects/Development/Web/Personal/serve/src-tauri/gen/android/app/src/main/jniLibs/arm64-v8a"
  Info "/article/src-tauri/target/aarch64-linux-android/debug/libapp_lib.so" requires shared lib "liblog.so"
  Info "/article/src-tauri/target/aarch64-linux-android/debug/libapp_lib.so" requires shared lib "libandroid.so"
  Info "/article/src-tauri/target/aarch64-linux-android/debug/libapp_lib.so" requires shared lib "libdl.so"
  Info "/article/src-tauri/target/aarch64-linux-android/debug/libapp_lib.so" requires shared lib "libm.so"
  Info "/article/src-tauri/target/aarch64-linux-android/debug/libapp_lib.so" requires shared lib "libc.so"
Performing Streamed Install
Success
Starting: Intent { cmp=com.tauri.dev/.MainActivity }


2024-07-16 02:34:48 / ................................................ ~ 0.12ms
2024-07-16 02:34:49 /favicon.ico ..................................... ~ 0.06ms

An emulator choice will be offered, here Emulator: 1, which corresponds to the virtual device Medium_Phone_API_33 created from Android Studio. This link explains how to create an Android virtual device.

And when the three commands are executed simultaneously :

Glad this helped.

Access Laravel before and after running Pest tests

Capsules Codes — Tue, 19 Nov 2024 09:25:17 +0000

TL;DR: How to access the Laravel ecosystem by simulating the beforeAll and afterAll methods in a Pest test.

A sample Laravel project can be found on this Github Repository. Find out more on Capsules, X or Bluesky.

I needed a metaphor to illustrate my article and characterize a Pest test.

Claude: A Pest test is like a hamburger. The core of the test is the juicy patty: it’s the main part, the one that brings all the flavor. Around it, you have the beforeEach and afterEach functions, which act as the toppings and sauces, adding flavor and context to each bite. Finally, the beforeAll and afterAll functions are like the buns: they provide structure and hold everything together. Together, it all creates a perfectly balanced testing experience. In short, writing a Pest test is like making a good burger: every ingredient matters, and it’s their harmony that makes all the difference.

Hmmm. Okay. Thanks, Claude.

According to the PestPHP documentation, the $this variable is not accessible in the beforeAll and afterAll methods of a test. This is because these hooks are executed before any test is run :

beforeAll()

Executes the provided closure once before any tests are run within the current file, allowing you to perform any necessary setup or initialization that applies to all tests.

beforeAll(function () {
    // Prepare something once before any of this file's tests run...
});


It's important to note that unlike the beforeEach() hook, the $this variable is not available in the beforeAll() hook. This is because the hook runs before any tests are executed, so there is no instance of the test class or object to which the variable could refer.

To understand this better, it is important to note that Pest is built on PHPUnit. Pest's beforeAll and afterAll functions are based on PHPUnit's setUp and tearDown methods, which execute once per test. However, in the case of Pest, these hooks are only called once per file. This is the magic of Pest. The only issue is that nothing is accessible during these calls.

It is therefore impossible to access $this, the Laravel application, or its properties within a beforeAll() or afterAll() hook. At least not without a specific workaround. This article explores that workaround.

From a standard Laravel project, replace PHPUnit with Pest.

composer remove --dev phpunit/phpunit

composer require --dev pestphp/pest --with-all-dependencies

vendor/bin/pest --init

Run the tests with vendor/bin/pest.

> vendor/bin/pest

PASS  Tests\Unit\ExampleTest
✓ that true is true

PASS  Tests\Feature\ExampleTest
✓ the application returns a successful response


Tests:    2 passed (2 assertions)
Duration: 0.21s

If the project uses Vite, a Vite manifest not found error may occur. To resolve this issue, Vite needs to be disabled in the setUp method of the TestCase.php file.

tests/TestCase.php

<?php

namespace Tests;

use Illuminate\Foundation\Testing\TestCase as BaseTestCase;

abstract class TestCase extends BaseTestCase
{
    protected function setUp() : void
    {
        parent::setUp();

        $this->withoutVite();
    }
}

For the purposes of this article, the Feature directory is removed. The Feature test suite must then be deleted from the phpunit.xml file, along with the corresponding line in the Pest.php file. Finally, the Unit/ExampleTest.php file is replaced with Unit/BootloadableTest.php.

phpunit.xml

<?xml version="1.0" encoding="UTF-8"?>
<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="vendor/phpunit/phpunit/phpunit.xsd"
         bootstrap="vendor/autoload.php"
         colors="true"
>
    <testsuites>
        <testsuite name="Unit">
            <directory>tests/Unit</directory>
        </testsuite>
    </testsuites>
    <source>
        <include>
            <directory>app</directory>
        </include>
    </source>
</phpunit>

Pest.php


<?php

use Tests\TestCase;

pest()->extend( TestCase::class )->in( 'Unit' );

Unit/BootloadableTest.php

<?php

it( "can say 'Hello World !'", function()
{
    $message = 'Hello World !';

    echo "$message\n";

    expect( $message )->toBeString()->toEqual( 'Hello World !' );
} );

> vendor/bin/pest

Hello World !

PASS  Tests\Unit\BootloadableTest
✓ it can say 'Hello World !'                                                                                                                                                                                            

Tests:    1 passed (2 assertions)
Duration: 0.07s

The goal of this article is to share the same data across tests, generated from a single execution of the command php artisan migrate --seed.

To do this, it is necessary to slightly modify the DatabaseSeeder.php file to create two User per seed.

database/seeders/DatabaseSeeder.php

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use App\Models\User;

class DatabaseSeeder extends Seeder
{
    public function run() : void
    {
        User::factory( 2 )->create();
    }
}

At the start of one test.

tests/Unit/BootloadableTest.php

<?php

use App\Models\User;

it( "can dump users", function()
{
    $this->artisan( 'migrate:fresh --seed' );

    dd( User::select( 'name', 'email' )->get()->toArray() );
} );

> vendor/bin/pest

array:2 [
  0 => array:2 [
    "name" => "Evie Cronin"
    "email" => "ebert.paolo@example.org"
  ]
  1 => array:2 [
    "name" => "Heidi Dietrich"
    "email" => "orempel@example.net"
  ]
] // tests/Unit/BootloadableTest.php:10

At the start of two identical tests, by adding the Artisan command in the beforeEach() hook.

tests/Unit/BootloadableTest.php

<?php

use App\Models\User;

beforeEach( function()
{
    $this->artisan( 'migrate:fresh --seed' );
} );

it( "can dump users for the first time", function()
{
    dump( User::select( 'name', 'email' )->get()->toArray() );
} );

it( "can dump users for the second time", function()
{
    dd( User::select( 'name', 'email' )->get()->toArray() );
} );

> vendor/bin/pest

array:2 [
  0 => array:2 [
    "name" => "Mr. Elmer Jerde I"
    "email" => "hector.okuneva@example.net"
  ]
  1 => array:2 [
    "name" => "Prof. Rupert Toy"
    "email" => "bosco.ferne@example.com"
  ]
] // tests/Unit/BootloadableTest.php:14
array:2 [
  0 => array:2 [
    "name" => "Nona Howe MD"
    "email" => "zulauf.jarred@example.com"
  ]
  1 => array:2 [
    "name" => "Abbie O'Conner"
    "email" => "lhowell@example.net"
  ]
] // tests/Unit/BootloadableTest.php:19

The result is predictable, as beforeEach, as its name suggests, executes before each test. In this case, why not use the beforeAll hook instead?

tests/Unit/BootloadableTest.php on line 6

...

beforeAll( function()
{
    $this->artisan( 'migrate:fresh --seed' );    
} );

...

> vendor/bin/pest

FAIL  Tests\Unit\BootloadableTest
─────────────────────────────────────────
FAILED  Tests\Unit\BootloadableTest > 

Using $this when not in object context

The $this variable is not accessible in the beforeAll function, nor are the facades. For example, Artisan::call('migrate:fresh --seed') does not work in this context either. The alternative : use the Bootloadable trait.

The trait overrides the setUp and tearDown functions to add two new methods : initialize and finalize. The initialize method runs once, like beforeAll, while the finalize method also runs once, like afterAll.

tests\Traits\Bootloadable.php

<?php

namespace Tests\Traits;

use Illuminate\Support\Arr;
use Illuminate\Support\Collection;
use Illuminate\Support\Str;
use Pest\TestSuite;

trait Bootloadable
{
    private static int $count = 0;
    private static Collection $tests;

    protected function setUp() : void
    {
        parent::setUp();

        if( ! self::$count )
        {
            $this->init();

            if( method_exists( self::class, 'initialize' ) ) $this->initialize();
        }

        self::$count++;
    }

    protected function tearDown() : void
    {
        if( count( self::$tests ) == self::$count )
        {
            if( method_exists( self::class, 'finalize' ) ) $this->finalize();
        }

        parent::tearDown();
    }

    private function init() : void
    {
        $repository = TestSuite::getInstance()->tests;

        $data = [];

        foreach( $repository->getFilenames() as $file )
        {
            $factory = $repository->get( $file );

            $filename = Str::of( $file )->basename()->explode( '.' )->first();

            if( $factory->class === self::class ) $data = [ ...$data, ...[ $filename => $factory->methods ] ];
        }

        $cases = Collection::make( Arr::dot( $data ) );

        $only = $cases->filter( fn( $case ) => Collection::make( $case->groups )->contains( '__pest_only' ) );

        self::$tests = ( $only->isEmpty() ? $cases : $only )->keys()->map( fn( $key ) => Str::of( $key )->kebab );
    }
}

The setUp and tearDown methods are limited to calling initialize and finalize. The core logic resides in the init method.

This method lists the number of tests. The initialize method is called when the initial count is 0, while incrementing the static variable $count. The finalize method is called when this count reaches the length of the $tests array, initialized by the init function.

To use the initialize method, you need to add the trait to the TestCase and implement the corresponding method.

tests/TestCase.php

<?php

namespace Tests;

use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
use Tests\Traits\Bootloadable;

abstract class TestCase extends BaseTestCase
{
    use Bootloadable;

    protected function initialize() : void
    {
        $this->artisan( 'migrate:fresh --seed' );
    }
}

The initialize method can thus replace the setUp method. In the case of $this->withoutVite, this configuration can be directly added to initialize.

Don’t forget to remove the previous beforeAll() from the BootloadableTest file. Then, running vendor/bin/pest twice will yield the following result : two different migrations and seeds for the same test suite.

> vendor/bin/pest

array:2 [
  0 => array:2 [
    "name" => "Prof. Moises Skiles IV"
    "email" => "frederique.nitzsche@example.com"
  ]
  1 => array:2 [
    "name" => "Prof. Cleve Oberbrunner"
    "email" => "madelynn.hane@example.net"
  ]
] // tests/Unit/BootloadableTest.php:8
array:2 [
  0 => array:2 [
    "name" => "Prof. Moises Skiles IV"
    "email" => "frederique.nitzsche@example.com"
  ]
  1 => array:2 [
    "name" => "Prof. Cleve Oberbrunner"
    "email" => "madelynn.hane@example.net"
  ]
] // tests/Unit/BootloadableTest.php:13

> vendor/bin/pest

array:2 [
  0 => array:2 [
    "name" => "Doug Marvin"
    "email" => "nash.schoen@example.com"
  ]
  1 => array:2 [
    "name" => "Joaquin Jacobi"
    "email" => "neoma38@example.net"
  ]
] // tests/Unit/BootloadableTest.php:8
array:2 [
  0 => array:2 [
    "name" => "Doug Marvin"
    "email" => "nash.schoen@example.com"
  ]
  1 => array:2 [
    "name" => "Joaquin Jacobi"
    "email" => "neoma38@example.net"
  ]
] // tests/Unit/BootloadableTest.php:13

It is now time to manipulate the data across the different tests.

Let’s imagine that the first test modifies the name of the first user, and the second test verifies the updated name from the first test.

Tests/Unit/BootloadableTest.php

<?php

use App\Models\User;

beforeEach( function()
{
    $this->user = User::first();

    $this->new = "Capsules Codes";
} );

it( "can modify first user name between two tests", function()
{
    $name = $this->user->name;

    echo $this->user->name;

    expect( $this->user->name )->toBe( $name );

    $this->user->name = $this->new;

    $this->user->save();
} );

it( "can verify first user name between two tests", function()
{
    echo " > {$this->user->name} \n";

    expect( $this->user->name )->toBe( $this->new );
} );

The result after two consecutive executions of the vendor/bin/pest command.

> vendor/bin/pest 

Esteban Raynor > Capsules Codes

PASS  Tests\Unit\BootloadableTest
✓ it can modify first user name between two tests
✓ it can verify first user name between two tests

Tests:    2 passed (2 assertions)
Duration: 0.40s

> vendor/bin/pest

Demario Corkery > Capsules Codes

PASS  Tests\Unit\BootloadableTest
✓ it can modify first user name between two tests
✓ it can verify first user name between two tests

Tests:    2 passed (2 assertions)
Duration: 0.39s

What happens if each test is placed in its own file?

Unit/FirstTest.php

<?php

use App\Models\User;

beforeEach( function()
{
    $this->user = User::first();

    $this->new = "Capsules Codes";
} );

it( "can modify first user name between two tests", function()
{
    $name = $this->user->name;

    echo "{$this->user->name} > $this->new \n";

    expect( $this->user->name )->toBe( $name );

    $this->user->name = $this->new;

    $this->user->save();
} );

Unit/SecondTest.php

<?php

use App\Models\User;

beforeEach( function()
{
    $this->user = User::first();

    $this->new = "Capsules Codes";
} );

it( "can verify first user name between two tests", function()
{
    expect( $this->user->name )->toBe( $this->new );
} );

vendor/bin/pest

Mrs. Laurine Ebert V > Capsules Codes

PASS  Tests\Unit\FirstTest
✓ it can modify first user name between two test files                                                                                                                                                                                           0.08s

PASS  Tests\Unit\SecondTest
✓ it can verify first user name between two test files                                                                                                                                                                                      0.01s

Tests:    2 passed (2 assertions)
Duration: 0.13s

Unlike Pest, which executes the beforeAll and afterAll methods at the start and end of a file's tests, here it operates on a per-TestCase basis rather than per file. To execute the initialize and finalize methods at the beginning and end of the tests for a given file, a slight modification to the Trait is necessary.

tests/Traits/Bootloadable.php

<?php

namespace Tests\Traits;

use Illuminate\Support\Arr;
use Illuminate\Support\Collection;
use Illuminate\Support\Str;
use Pest\TestSuite;

trait Bootloadable
{
    private static int $count = 0;
    private static array $tests;
    private static string $current;

    protected function setUp() : void
    {
        parent::setUp();

        self::$current = array_reverse( explode( '\\', debug_backtrace( DEBUG_BACKTRACE_IGNORE_ARGS, 2 )[ 1 ][ 'class' ] ) )[ 0 ];

        if( ! isset( self::$tests ) )
        {
            $this->init();
        }

        if( ! self::$count )
        {
            if( method_exists( self::class, 'initialize' ) ) $this->initialize( self::$current );
        }

        self::$count++;
    }

    protected function tearDown() : void
    {
        if(  self::$tests[ self::$current ] == self::$count )
        {
            if( method_exists( self::class, 'finalize' ) ) $this->finalize( self::$current );

            self::$count = 0;
        }

        parent::tearDown();
    }

    private function init() : void
    {
        $repository = TestSuite::getInstance()->tests;

        $data = [];

        foreach( $repository->getFilenames() as $file )
        {
            $factory = $repository->get( $file );

            $filename = Str::of( $file )->basename()->explode( '.' )->first();

            if( $factory->class === self::class ) $data = [ ...$data, ...[ $filename => count( $factory->methods ) ] ];
        }

        self::$tests = $data;
    }
}

The name of the currently running test is retrieved using the debug_backtrace function.
The variable self::$tests is now an associative array, where each key represents the filename, and each value corresponds to the number of tests it contains.
The variable self::$count is reset to zero once the finalize method has been executed.

Last step : modify the TestCase file. This will allow access to the filename within it.

tests/TestCase.php

<?php

namespace Tests;

use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
use Tests\Traits\Bootloadable;
use Illuminate\Support\Facades\App;
use Illuminate\Support\Facades\File;

abstract class TestCase extends BaseTestCase
{
    use Bootloadable;

    protected function initialize( $filename ) : void
    {
        if( $filename == "FirstTest" )
        {
            $this->artisan( 'migrate:fresh --seed' );
        }

        if( $filename == "SecondTest" )
        {
            $this->artisan( 'migrate:fresh --seed' );
        }
    }

    protected function finalize( $filename ) : void
    {
        if( $filename == "FirstTest" )
        {
            $this->artisan( 'migrate:reset' );
        }

        if( $filename == "SecondTest" )
        {
            $this->artisan( 'migrate:reset' );
        }
    }
}

The tests can ben be re-run.

> vendor/bin/test

Brice Fisher > Capsules Codes

   PASS  Tests\Unit\FirstTest
  ✓ it can modify first user name between two tests                                                                                                                                                                                           0.36s

   FAIL  Tests\Unit\SecondTest
  ⨯ it can verify first user name between two tests                                                                                                                                                                                           0.03s
  ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   FAILED  Tests\Unit\SecondTest > it can verify first user name between two tests
  Failed asserting that two strings are identical.
  -'Capsules Codes'
  +'Tremayne Spinka'

  at tests/Unit/SecondTest.php:18
     14▕
     15▕
     16▕ it( "can verify first user name between two tests", function()
     17▕ {
  ➜  18▕     expect( $this->user->name )->toBe( $this->new );
     19▕ } );
     20▕

  1   tests/Unit/SecondTest.php:18

  Tests:    1 failed, 1 passed (2 assertions)
  Duration: 0.43s

It seems that Brice Fisher has become Tremayne Spinka!

Here is an overview of the result obtained by duplicating the BootloadableTest file into two distinct files. [ Make sure to replace "Capsules Codes" with "Pest PHP" in the second file ].

> vendor/bin/pest

Ernestine Dietrich III > Capsules Codes

PASS  Tests\Unit\FirstTest
✓ it can modify first user name between two test files
✓ it can verify first user name between two test files

Dr. Nya Gusikowski > Pest PHP

PASS  Tests\Unit\SecondTest
✓ it can modify first user name between two test files
✓ it can verify first user name between two test files

Tests:    4 passed (4 assertions)
Duration: 0.42s

Glad this helped.

Create a backup of your Laravel project on Dropbox

Capsules Codes — Wed, 30 Oct 2024 13:28:53 +0000

TL;DR: How to quickly create a backup of a Laravel project and store it on Dropbox using Spatie Laravel-backup and Flysystem-dropbox packages.

A sample Laravel project can be found on this Github Repository. Find out more on Capsules or X.

In web project management, performing regular backups is essential to prevent permanent data loss. Various types of data require backups, including databases, user-generated files, or even files directly related to the web project itself.

Project files are often already managed by a version control system like Github or Gitlab. However, it’s generally not recommended to store user data there. Dropbox can be an excellent choice for securely storing this type of data.

Before transferring backups to Dropbox, it’s useful to generate them first. Spatie’s laravel-backup package makes this task much simpler. Use the following command to install it :

composer require spatie/laravel-backup

Next, simply create the backup configuration file to quickly set up the project backup:

config/backup.php

<?php

return [

    'backup' => [

        'name' => 'capsules',

        'source' => [

            'files' => [

                'include' => [ base_path() ],

                'exclude' => [ base_path( 'vendor' ), base_path( 'node_modules' ) ],

                'relative_path' => null
            ],

            'databases' => [ 'sqlite' ]
        ],

        'database_dump_filename_base' => 'database',

        'database_dump_file_extension' => '',

        'destination' => [

            'compression_method' => ZipArchive::CM_DEFAULT,

            'compression_level' => 9,

            'filename_prefix' => "backup-",

            'disks' => [ 'local' ]
        ],

        'temporary_directory' => '',

        'password' => null,

        'encryption' => 'default',

        'tries' => 1,

        'retry_delay' => 0,
    ]
];

To start the backup :

php artisan backup:run

Starting backup...
Dumping database /dropbox/database/database.sqlite...
Determining files to backup...
Zipping 110 files and directories...
Created zip containing 110 files and directories. Size is 112.76 KB
Copying zip to disk named local...
Successfully copied zip to disk named local.
Backup completed!

The php artisan backup:run command creates a compressed backup that includes the items specified in the include key while excluding those listed in exclude. It also adds the specified databases and stores everything in the folder defined by the name key, naming the file with the filename_prefix followed by the backup date in the format YYY-MM-DD-HH-mm-ss. This backup is saved in the location set by the disks key, which in this case is local and redirects to storage/app/private.

Additional configuration elements, not mentioned here above, are nonetheless essential for the proper functioning of the package.

storage
    > app
        > private 
            > capsules
                - backup-2024-10-29-08-30-00.zip
                - backup-2024-10-28-08-30-00.zip
                ...

With the backup procedure now operational, the next step is to link it to your Dropbox account. For this, we once again turn to Spatie and its flysystem-dropbox package. As the name suggests, this is the Flysystem adapter for the Dropbox V2 API.

composer require spatie/flysystem-dropbox

A new configuration needs to be added to the filesystems configuration file.

config/filesystems.php

<?php

return [

    'disks' => [

    ...

    'dropbox' => [

            'driver' => 'dropbox',
            'token_url' => env( 'DROPBOX_TOKEN_URL' ),
            'refresh_token' => env( 'DROPBOX_REFRESH_TOKEN' )

        ]
    ]
];

Laravel backup also needs to be linked to the new dropbox disk. This is a good opportunity to adjust some additional settings.

<?php

return [

    'backup' => [

    ...

        'name' => '',

    ...

        'destination' => [

        ...

            'filename_prefix' => Illuminate\Support\Str::replace( '.', '-', env( 'DROPBOX_APP_NAME' ) ) . '-',

            'disks' => [ 'dropbox' ]
        ],

    ...
    ]
];

The name key is left empty to avoid duplicating the folder name ith the Dropbox app, and the filename_prefix now uses the DROPBOX_APP_NAME environment variable instead of backup-.

It is now time to configure the Dropbox integration. The following steps detail the Dropbox setup process. Be aware that some steps may be overly complex.

A. Create a Dropbox Application :

Go to : https://www.dropbox.com/developers/apps
Click on Create app
Choose an API : Scoped access
Select the access type : App folder
Name the app : Capsules Codes Article
Go to the Permissions tab and check the following options : [ files.metadata.write, files.metadata.read, files.content.write, files.content.read ]
Click on Submit

B. Authorize Access :

Grant access to the Capsules Codes Article app by modifying <YOUR_APP_KEY> in the following url.
Continue and Authorize.

https://www.dropbox.com/oauth2/authorize?client_id=<YOUR_APP_KEY>&response_type=code&token_access_type=offline

C. Generate the Required Token :

Obtain the refresh_token by replacing <ACCESS_CODE> with the previously generated access code, along with <APP_KEY> and <APP_SECRET> found in the settings of the newly created app :

curl https://api.dropbox.com/oauth2/token -d code=<ACCESS_CODE> -d grant_type=authorization_code -u <APP_KEY>:<APP_SECRET>

A response in the following format will appear, and a folder will be
created in the Dropbox interface :

{"access_token": "sl.B48oJpRyl-FP61gr56g1GUa4G26L3TAQasMbiRRyuAGHpUQXz0hyeA4OrO8Zes6clhQxhA8dyFurNcx4_gwPXJb_K3ZZOfdzBIVwHieInx-EEFNgIc6ZOR3VMRjoOQ-Ske_QjGMePmzS", "token_type": "bearer", "expires_in": 14399, "refresh_token": "PKnAG5FX-ngAAAAAAAAAAVaXknd9i45Xk6t4-FrmXGjR4jWEljmBALOF3Xexp4AY", "scope": "account_info.read files.content.read files.content.write files.metadata.read files.metadata.write", "uid": "682879329", "account_id": "dbid:AADQ-j2-ihak-i0IwMiVS8F5-KhkcyTHyg8"}

The refresh_token should be added to the application’s environment variables, along with the app_key and app_secret located in the settings of the newly created Dropbox application. These can then be added to the .env file.

.env.example

DROPBOX_APP_NAME="Capsules Codes Article"
DROPBOX_APP_KEY=
DROPBOX_APP_SECRET=
DROPBOX_REFRESH_TOKEN=
DROPBOX_TOKEN_URL=https://${DROPBOX_APP_KEY}:${DROPBOX_APP_SECRET}@api.dropbox.com/oauth2/token

The final step is to create the service provider that will establish the connection to the Dropbox service : DropboxServiceProvider.

app\Providers\DropboxServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Contracts\Foundation\Application;
use Illuminate\Filesystem\FilesystemAdapter;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\ServiceProvider;
use League\Flysystem\Filesystem;
use Spatie\Dropbox\Client as DropboxClient;
use Spatie\FlysystemDropbox\DropboxAdapter;
use GuzzleHttp\Client;

class DropboxServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        Storage::extend( 'dropbox', function( Application $app, array $config )
        {
            $resource = ( new Client() )->post( $config[ 'token_url' ] , [ 'form_params' => [ 'grant_type' => 'refresh_token', 'refresh_token' => $config[ 'refresh_token' ] ] ]);

            $accessToken = json_decode( $resource->getBody(), true )[ 'access_token' ];

            $adapter = new DropboxAdapter( new DropboxClient( $accessToken ) );

            return new FilesystemAdapter( new Filesystem( $adapter, $config ), $adapter, $config );
        });
    }
}

Do not forget to add it to the providers.php .

bootstrap/providers.php

<?php

return [ App\Providers\DropboxServiceProvider::class ];

All that is left is to add the daily backup scheduling commands in the console.php file.

routes/console.php

<?php

use Illuminate\Support\Facades\Schedule;

Schedule::command( 'backup:run' )->daily();
Schedule::command( 'backup:clean' )->daily();

This code allows the various commands to run once a day using the daily method, provided that a scheduler has been configured for the application. Without this daily command, the refresh_token will expire.

> php artisan backup:run

Starting backup...
Dumping database /dropbox/database/database.sqlite...
Determining files to backup...
Zipping 35 files and directories...
Created zip containing 35 files and directories. Size is 36.74 KB
Copying zip to disk named dropbox...
Successfully copied zip to disk named dropbox.
Backup completed!

> php artisan backup:clean

Starting cleanup...
Cleaning backups of  on disk dropbox...
Used storage after cleanup: 36.74 KB.
Cleanup completed!

Glad this helped.

Craft Emails with Laravel, Vue and Tailwind using Inertia Mailable

Capsules Codes — Tue, 10 Sep 2024 13:17:03 +0000

TL;DR: How to easily build dynamic email templates while keeping your Vue and Tailwind tools using the Inertia Mailable package.

A sample Laravel project can be found on this Github Repository. Find out more on Capsules or X.

Inertia Mailable is a package that allows you to design amazing emails within a Laravel project by leveraging the power of InertiaJS. Create interactive and responsive email designs by building VueJS components, enhancing them with TailwindCSS, and integrating them into your mailables.

This package is in alpha phase and is under continuous development. It was created to simplify email layout while maintaining the same approach as for the rest of the web platform. An email template could thus correspond to a page template.

This article provides an example of how to use the Inertia Mailable package. It follows the scenario of a user signing up on the platform and receiving a welcome email. Starting from a Laravel VILT project, a Mailable will be configured with its default Markdown email template. This will then be transferred to a VueJS component with TailwindCSS classes added. The steps are as follows:

First, you need to create the Mailable file by using the Artisan command: php artisan make:mail. Add the --markdown option to generate the Markdown template simultaneously.

php artisan make:mail WelcomeNewUser --markdown=mail.welcome

The Mailable would then look like this :

app\Mail\WelcomeNewUser.php

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;

class WelcomeNewUser extends Mailable
{
    use Queueable, SerializesModels;

    public function __construct()
    {
    }

    public function envelope() : Envelope
    {
        return new Envelope( subject : 'Welcome New User' );
    }

    public function content() : Content
    {
        return new Content( markdown : 'mail.welcome' );
    }

    public function attachments() : array
    {
        return [];
    }
}

resources/views/mail/welcome.blade.php

<x-mail::message>
# Introduction

The body of your message.

<x-mail::button :url="''">
Button Text
</x-mail::button>

Thanks,<br>
{{ config('app.name') }}
</x-mail::message>

vendor/laravel/framework/src/Illuminate/Mail/resources/views/html/button/blade.php

@props([
    'url',
    'color' => 'primary',
    'align' => 'center',
])
<table class="action" align="{{ $align }}" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="{{ $align }}">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="{{ $align }}">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td>
<a href="{{ $url }}" class="button button-{{ $color }}" target="_blank" rel="noopener">{{ $slot }}</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

To quickly preview the email template, you need to create a route.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Mail\WelcomeNewUser;

Route::get( '/', fn() => ( new WelcomeNewUser() )->render() );

Since the customization of this template is limited, you need to publish the components to access more options. A series of files will then appear in the resources/views/vendor/mail folder.

php artisan vendor:publish --tag=laravel-mail

The Blade components will appear in the html folder, while the default.css file will be located in the themes folder.

It is now time to install the Inertia Mailable package.

composer require capsulescodes/inertia-mailable

The next step is to publish the javascript or typescript file that will manage Vue components via InertiaJS.

// Javascript

php artisan vendor:publish --tag=inertia-mailable-vue-js

// Typescript

php artisan vendor:publish --tag=inertia-mailable-vue-ts

   INFO  Publishing [inertia-mailable-vue-js] assets.

  Copying file [/vendor/inertia-mailable/stubs/js/vue/mail.js] to [resources/js/mail.js] ........ DONE
  Copying file [/vendor/inertia-mailable/stubs/js/vue/mails/Welcome.vue] to [resources/js/mails/Welcome.vue]  DONE

Next, you need to add the newly created javascript or typescriptfile to the vite.config.js file under the ssr category. Since these Vue components are generated server-side, they need to be compiled and stored in a folder that is not accessible to visitors.

vite.config.js

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

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

package.json

{
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "ssr": "vite build --ssr"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.20",
        "laravel-vite-plugin": "^1.0",
        "postcss": "^8.4.41",
        "tailwindcss": "^3.4.10",
        "vite": "^5.0"
    },
    "dependencies": {
        "@inertiajs/vue3": "^1.2.0",
        "@vitejs/plugin-vue": "^5.1.2",
        "vue": "^3.4.38"
    }
}

And modify the previously created Mailable : WelcomeNewUser.

app\Mail\WelcomeNewUser

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
- use Illuminate\Mail\Mailable;
+ use CapsulesCodes\InertiaMailable\Mail\Mailable;
- use Illuminate\Mail\Mailables\Content;
+ use CapsulesCodes\InertiaMailable\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;

class WelcomeNewUser extends Mailable
{
    use Queueable, SerializesModels;

    public function __construct()
    {
    }

    public function envelope() : Envelope
    {
        return new Envelope( subject : 'Welcome New User' );
    }

    public function content() : Content
    {
-       return new Content( markdown : 'mail.welcome' );
+       return new Content( view : 'Welcome', props : [ 'name' => 'Capsules Codes' ] );
    }

    public function attachments() : array
    {
        return [];
    }
}

To inject data into the Vue component, we now use the props keyword, as opposed to with, which is used for data injection in Blade layouts.

It's time to preview the result. First, run npm run ssr.

If an error of this type Error: proc_open(): posix_spawn() failed: No such file or directory appears, it means that Node.js could not be found. You will then need to specify its path in a .env variable : NODE_PATH.

> ssr
> vite build --ssr

vite v5.4.2 building SSR bundle for production...
✓ 10 modules transformed.
bootstrap/ssr/ssr-manifest.json   0.81 kB
bootstrap/ssr/mail.js            13.65 kB
✓ built in 112ms

🎉

All that’s left is to customize the email from the Vue component.

resources/js/mails/Welcome.vue

<script setup>

import Layout from '/vendor/capsulescodes/inertia-mailable/components/vue/Layout.vue';
import Table from '/vendor/capsulescodes/inertia-mailable/components/vue/tags/Table.vue';

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

const app = import.meta.env.VITE_APP_NAME;
const image = 'https://raw.githubusercontent.com/capsulescodes/inertia-mailable/main/art/capsules-inertia-mailable-mail-image.png';

</script>

<template>

    <Layout>

        <template v-slot:default>

            <p>Hello, {{ props.name }}!</p>

            <p>This is a mail made with Laravel, Inertia, Vue</p>

            <Table align="center">

                <Table align="center">

                    <Table>

                        <img class="my-4 max-w-full" v-bind:src="image">

                    </Table>

                </Table>

            </Table>

            <p>Regards,</p>

            <p>{{ app }}</p>

        </template>

        <template v-slot:subcopy>

            <p class="text-xs">This is a subcopy made with Laravel, Inertia and Vue</p>

        </template>

    </Layout>

</template>

For clarity, adding an alias in the vite.config.js file allows you to avoid importing components from their absolute path. /vendor/capsulescodes/inertia-mailable/components/vue would then become @/vue."

And, as a cherry on top, you can avoid transpiling the files with every change by using the --watch option. However, you will need to refresh the browser to view the changes.

"ssr": "vite build --ssr --watch"

To send the email, add a send route and configure the .env variables related to the Mailer.

routes/web.php

use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\Mail;
use App\Mail\WelcomeNewUser;

Route::get( '/send', function(){ Mail::to( 'example@example.com' )->send( new WelcomeNewUser() ); } );

.env

MAIL_MAILER=log
MAIL_HOST=127.0.0.1
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

Glad this helped.

Create a custom error page with Laravel and Inertia

Capsules Codes — Tue, 13 Aug 2024 11:57:07 +0000

TL;DR: How to display a custom error page with Inertia instead of Laravel’s default error pages.

A sample Laravel project can be found on this Github Repository. Find out more on Capsules or X.

In a previous article, the focus was on customizing the 502 Bad Gateway error page servec by Nginx. This page was an HTML file placed directly in the /public folder. This article now focuses on customizing the error pages returned by Laravel in a VILT project.

To get a preview of the layout of Laravel’s default error pages, simply generate an error using the App::abort facade or the abort helper, followed by the desired error code.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\App;


Route::get( '/', fn() => App::abort( 503 ) );

Route::get( '/', fn() => App::abort( 419 ) );

Route::get( '/', fn() => App::abort( 404 ) );

By delving into the functionality of the abort function, it becomes clear that Laravel generates an Exception, which is then handled by the ExceptionHandler created by the withException method in the bootstrap/app.php file.

vendor/laravel/framework/src/Illuminate/Foundation/Application.php

public function abort($code, $message = '', array $headers = [])
{
    if ($code == 404) {
        throw new NotFoundHttpException($message, null, 0, $headers);
    }

    throw new HttpException($code, $message, null, $headers);
}

vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/Handler.php

protected function prepareResponse($request, Throwable $e)
{
    if (! $this->isHttpException($e) && config('app.debug')) {
        return $this->toIlluminateResponse($this->convertExceptionToResponse($e), $e)->prepare($request);
    }

    if (! $this->isHttpException($e)) {
        $e = new HttpException(500, $e->getMessage(), $e);
    }

    return $this->toIlluminateResponse(
        $this->renderHttpException($e), $e
    )->prepare($request);
}

bootstrap/app.php

<?php

use Illuminate\Foundation\Application;

return Application::configure( basePath : dirname( __DIR__ ) )
    ->withRouting( web : base_path( "/routes/web.php" ) )
    ->withExceptions()
    ->create();

If the withExceptions method is removed from the file, everything falls apart. Therefore, it is crucial not to overlook this method.

To allow Inertia to intercept the various exceptions, it is necessary to modify the bootstrap/app.php file. This is primarily where the magic happens.

More specifically, regarding the withExceptions method : it handles exception interception. When the exception is an HttpException, which is the focus of this article, the Inertia rendering is triggered. The method $exceptions->render( fn( HttpException $exception, ... ) ) allows filtering of exception types. If the exception is an HttpException, the Inertia rendering process continues. Inertia then returns the Error page with the $request response and its status code.

bootstrap/app.php

<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Symfony\Component\HttpKernel\Exception\HttpException;
use Illuminate\Http\Request;
use Inertia\Inertia;


return Application::configure( basePath : dirname( __DIR__ ) )
    ->withRouting( web : base_path( "/routes/web.php" ) )
    ->withMiddleware()
    ->withExceptions( fn( Exceptions $exceptions ) =>

        $exceptions->render( fn( HttpException $exception, Request $request ) =>

            Inertia::render( 'Error', [ 'status' => $exception->getStatusCode() ] )
                   ->toResponse( $request )
                   ->setStatusCode( $exception->getStatusCode() )

        )
    )
    ->create();

It is then possible to customize the desired error pages by using a dedicated Vue component Error for errors.

resources/js/pages/Error.vue

<script setup>

import { Head } from '@inertiajs/vue3'
import { useStatusName, useStatusMessage } from '~/composables/status';
import logotype from '/public/assets/capsules-logotype.svg';


const props = defineProps( { status : Number } );

</script>

<template>

    <Head>

        <title>{{ useStatusName( status ) }}</title>

    </Head>

    <div class="h-screen flex justify-center">

        <div class="flex items-center space-x-10">

            <img class="h-20 w-20" v-bind:src="logotype">

            <div class="flex flex-col items-start space-y-2 font-mono text-primary-black">

                <h1 class="text-2xl text-primary-blue" v-text="`${props.status} - ${useStatusName( status )}`" />

                <p class="text-md" v-text="useStatusMessage( status )" />

            </div>

        </div>

    </div>

</template>

The Head component allows for customizing the <head> section of the HTML page. However, it is important not to forget to include @inertiaHead in the app.blade.php.

As well as a status composable that returns the desired error codes and messages.

resources/js/composables/status.js

export function useStatusName( status )
{
    switch( status )
    {
        case 503 : return 'Service Unavailable';
        case 500 : return 'Server Error';
        case 419 : return 'Session Expired';
        case 418 : return 'I\'m a teapot';
        case 404 : return 'Page Not Found';
        case 403 : return 'Forbidden';
        default : return 'Error';
    }
}

export function useStatusMessage( status )
{
    switch( status )
    {
        case 503 : return 'Sorry, we are doing some maintenance. Please check back soon.';
        case 500 : return 'Whoops, something went wrong on our servers.';
        case 419 : return 'Sorry, your session expired.';
        case 418 : return 'Sorry, I am not a coffee machine.';
        case 404 : return 'Sorry, the page you are looking for could not be found.';
        case 403 : return 'Sorry, you are forbidden from accessing this page.';
        default : return 'Sorry, something went wrong unexpectedly.';
    }
}

To test different exceptions directly from the browser :

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\App;

Route::get( '/{status?}', fn( int | null $status = null ) => App::abort( $status ?? 418 ) );

herd link article

npm run dev

> http://article.test/503

> http://article.test/419

> http://article.test/404

Glad this helped.

Collect feedback via Discord notifications in your Laravel project

Capsules Codes — Wed, 17 Jul 2024 10:28:21 +0000

TL;DR:How to create a feedback module in a Laravel project and receive a Discord notification when a message is submitted.

A sample Laravel project can be found on this Github Repository.

Find out more on Capsules or X.

It is common to come across a contact form or an email address on a website, allowing users to contact the site administrator. These forms typically request an email address, a subject, and a title. This article suggests a more open alternative to anonymity, replacing this standard format. By using Discord.

A button provides access to a form with a feedback field and, optionally, a field for an email address if a response to the message is desired. Upon submission, a Discord notification is automatically generated to inform the administrator. No email is generated, and no data is stored in a database.

Initially, only one route and one page are configured in our blank Laravel project.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get( '/', fn() => Inertia::render( 'Welcome' ) );

/resources/js/pages/Welcome.vue

<script setup>

import logotype from '/public/assets/capsules-logotype-background.svg';

</script>

<template>

    <div class="w-screen h-screen flex flex-col items-center justify-center text-center bg-primary-white">

        <img class="w-24 h-24" v-bind:src="logotype">

        <h1 class="mt-4 text-6xl font-bold select-none header-mode" v-text="'Capsules Codes'" />

    </div>

</template>

The feedback component can be entirely contained in a Vue file. The HTML structure includes a button and a form. Here is the content of the module.

resources/js/components/Feedback.vue

<script setup>

import { ref } from 'vue';
import { router } from '@inertiajs/vue3';
import logotype from '/public/assets/capsules-logotype.svg';

const isOpen = ref( false );
const isSent = ref( false );
const errors = ref( {} );

const message = ref( '' );
const email = ref( '' );

function toggle()
{
    if( ! isOpen.value )
    {
        message.value = '';
        email.value = '';

        isSent.value = false;
        errors.value = {};
    }

    isOpen.value = ! isOpen.value;
}

function submit()
{
    errors.value = {};

    const data = email.value ? { email : email.value, message : message.value } : { message : message.value };

    router.post( '/feedbacks', data, { onError : error => { errors.value = error; }, onSuccess : () => { isSent.value = true; } } );
}

</script>

<template>

    <div class="m-8 flex flex-col-reverse items-end space-y-reverse space-y-4">

        <button class="w-12 h-12 flex items-center justify-center" v-on:click="toggle()">

            <div v-show="! isOpen" class="w-full h-full rounded-xl bg-white flex items-center justify-center drop-shadow-2xl hover:bg-primary-blue hover:bg-opacity-5"><img class="h-8 w-8" v-bind:src="logotype"></div>

            <div v-show="! isOpen" class="absolute top-0 left-0 w-full h-full rounded-xl bg-white flex items-center justify-center animate-ping opacity-50"><img class="h-8 w-8" v-bind:src="logotype"></div>

            <svg v-show="isOpen" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-primary-blue"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>

        </button>

        <div v-if="isOpen">

            <div v-if="! isSent" class="font-mono rounded-xl bg-white drop-shadow-xl ">

                <div class="p-2">

                    <form class="flex flex-col" v-on:submit.prevent="submit()">

                        <label for="message" hidden />

                        <textarea
                            id="message"
                            class="mb-2 p-2 outline-none rounded-md resize-none text-xs bg-slate-100"
                            v-bind:class="{ 'border border-solid border-red-500 text-red-500' : errors && errors[ 'message' ] } "
                            type="text"
                            cols="30"
                            rows="10"
                            v-bind:placeholder="'Your message'"
                            v-model="message"
                        />

                        <div class="flex">

                            <label for="email" hidden />

                            <input
                                id="email"
                                class="px-2 grow outline-none rounded-md text-xs bg-slate-100"
                                v-bind:class=" { 'border border-solid border-red-500 text-red-500' : errors && errors[ 'mail' ] } "
                                type="text"
                                v-bind:placeholder="'Your email - Optional'"
                                v-model="email"
                            >

                            <button
                                class="ml-2 px-4 py-2 inline-flex items-center rounded-md text-sm font-medium text-primary-blue bg-primary-blue bg-opacity-50 hover:bg-opacity-60"
                                type="submit"
                            >

                                <p v-text="'Send'" />

                            </button>

                        </div>

                    </form>

                    <div>

                        <p v-for=" ( error, key ) in errors " v-bind:key="key" class="first:mt-4 ml-1 text-[10px] text-red-500" v-text="error" />

                    </div>

                </div>

            </div>

            <div v-else class="font-mono p-4 flex items-center justify-center space-x-4 bg-white rounded-xl drop-shadow-xl">

                <p class="w-full text-center text-xs text-primary-black" v-text="'Thank you for your feedback !'" />

                <p v-text="'🎉'" />

                <img class="h-8 w-8" v-bind:src="logotype">

            </div>

        </div>

    </div>

</template>

This component represents a button that, when clicked, reveals a form through the isOpen variable. When the 'Send' button is clicked, the submit() method is called, sending a POST request to the /feedbacks route. If everything is in order, the isSent variable becomes true, and a thank-you message replaces the form. Otherwise, incorrect fields are highlighted in red.

Now, it's time to add this component to the Welcome page.

resources/js/pages/Welcome.vue

<script setup>

import Feedback from '/resources/js/components/Feedback.vue';
import logotype from '/public/assets/capsules-logotype-background.svg';

</script>

<template>

    <Feedback class="fixed z-10 bottom-0 right-0" />

    <div class="w-screen h-screen flex flex-col items-center justify-center text-center bg-primary-white">

        <img class="w-24 h-24" v-bind:src="logotype">

        <h1 class="mt-4 text-6xl font-bold select-none header-mode" v-text="'Capsules Codes'" />

    </div>

</template>

The Feedback component is imported and positioned at the bottom right of the screen.
Now that the module is working on the client side, it's time to create the route, implement validation, and send the data to Discord. For this article, there is no need to create a specific controller.

app/Http/FeedbackRequest.php

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class FeedbackRequest extends FormRequest
{
    public function rules() : array
    {
        return [
            'message' => [ 'required', 'min:1', 'max:499' ],
            'email' => [ 'sometimes', 'email' ],
        ];
    }
}

The FeedbackRequest allows for returning errors if data has not been sent correctly.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Requests\FeedbackRequest;

Route::get( '/', fn() => Inertia::render( 'Welcome' ) );

Route::post( 'feedbacks', function( FeedbackRequest $request ){} );

The next step is to connect the Laravel project to the Discord workspace. For this purpose, a webhook needs to be created. Go to the Discord Server Settings > Integrations > View webhooks > New Webhook. It needs a name and a channel.

The webhook is then available and its URL can be copied via the button Copy Webhook URL.

This webhook needs to be added to the LOG_DISCORD_WEBHOOK_URL environment variable, which is accessible in the configuration file config/logging.php.

config/logging.php

<?php

return [

    'channels' => [

        'discord' => [

            'driver' => 'discord',
            'url' => env( 'LOG_DISCORD_WEBHOOK_URL' )

        ]

    ]

];

.env

LOG_DISCORD_WEBHOOK_URL=https://discord.com/api/webhooks/{webhook-key}

The notification can now be sent from the /feedbacks route.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Requests\FeedbackRequest;
use Illuminate\Support\Facades\Notification;
use App\Notifications\FeedbackReceived;

Route::get( '/', fn() => Inertia::render( 'Welcome' ) );

Route::post( 'feedbacks', fn( FeedbackRequest $request ) => Notification::route( 'discord', config( 'logging.channels.discord.url' ) )->notify( new FeedbackReceived( $request ) ) );

All that's left is to create the FeedbackReceived notification.

app/Notifications/FeedbackReceived.php

<?php

namespace App\Notifications;

use Illuminate\Notifications\Notification;
use App\Http\Requests\FeedbackRequest;
use App\Notifications\Discord\DiscordChannel;
use App\Notifications\Discord\DiscordMessage;

class FeedbackReceived extends Notification
{
    private FeedbackRequest $request;

    public function __construct( FeedbackRequest $request )
    {
        $this->request = $request;
    }

    public function via() : string
    {
        return DiscordChannel::class;
    }

    public function toDiscord() : DiscordMessage
    {
        $email = $this->request->email ?? 'Anonymous';

        return ( new DiscordMessage() )->content( "New Capsules Codes Feedback : \"{$this->request->message}\" by {$email}" );
    }
}

app/Notifications/Discord/DiscordChannel.php

<?php

namespace App\Notifications\Discord;

use Illuminate\Notifications\Notification;
use Illuminate\Support\Facades\Http;

class DiscordChannel
{
    public function send( object $notifiable, Notification $notification ) : void
    {
        $discordMessage = $notification->toDiscord();

        $discordWebhook = $notifiable->routeNotificationFor( 'discord' );

        Http::post( $discordWebhook, $discordMessage->toArray() );
    }
}

app/Notifications/Discord/DiscordMessage.php

<?php

namespace App\Notifications\Discord;

use Carbon\Carbon;

class DiscordMessage
{
    protected string $content = '';

    public function content( string $content ) : self
    {
        $this->content = $content;

        return $this;
    }

    public function toArray() : array
    {
        return [

            "embeds" => [

                [
                    "title" => $this->title,
                    "type" => "rich",
                    "timestamp" => Carbon::now(),
                    "color" => "14497651"
                ]

            ]

        ]; 
    }
}

A wild notification appears!

Glad this helped.

Draw a dynamic SVG pattern with Vue

Capsules Codes — Thu, 18 Apr 2024 13:55:43 +0000

TL;DR: How to create an animated SVG pattern in a Laravel Vue project. Examples are presented in GIF format at the end of the article.

You will find the source code via this Github Repository. Learn more on Capsules or X.

The SVG format is commonly used to display two-dimensional images or illustrations on the web. This vector format also allows for scaling up and down without loss of resolution.

But what is less common is to dynamically draw an SVG pattern via Javascript code. Although this approach offers endless possibilities, as you'll see in this article, it can also be resource-intensive.

This article illustrates the process of searching for colors to use as a background in a registration form. It starts with a Laravel template and some basic files, such as the Register page and its Layout.

resources/js/pages/Register.vue

<script setup>

import Layout from '~/components/Layout.vue';

</script>

<template>

    <Layout>

        <div class="mt-6 px-6 py-4 mx-8 sm:mx-0 bg-white overflow-hidden rounded-lg">

            <form class="space-y-4">

                ...

            </form>

        </div>

    </Layout>

</template>

resources/js/components/Layout.vue

<script setup>

import logotype from '/public/assets/capsules-logotype.svg';

</script>

<template>

    <div class="relative min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-slate-100">

        <a class="relative w-16 h-16" href="/">

            <transition leave-active-class="transition ease-in duration-250" leave-from-class="opacity-100" leave-to-class="opacity-0">

                <img class="absolute w-16 h-16 select-none" v-bind:src="logotype">

            </transition>

        </a>

        <div class="w-full sm:max-w-md">

            <slot />

        </div>

    </div>

</template>

Although the visual is clear and concise, it lacks color. The dynamic SVG drawing will be performed from a dedicated component added to the Layout component. The various examples in this article will be located in the folder components/backgrounds.

resources/js/components/Layout.vue

<script setup>

import Background from '~/components/Backgrounds/Line.vue';
import logotype from '/public/assets/capsules-logotype.svg';

</script>

<template>

    <div class="relative min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0">

        <a class="relative w-16 h-16" href="/">

            <transition leave-active-class="transition ease-in duration-250" leave-from-class="opacity-100" leave-to-class="opacity-0">

                <img class="absolute w-16 h-16 select-none" v-bind:src="logotype">

            </transition>

        </a>

        <div class="w-full sm:max-w-md">

            <slot />

        </div>

    <Background class="fixed -z-10 w-screen h-screen" />

    </div>

</template>

The component has fixed -z-10 w-screen h-screen classes. This is done to represent the entirety of the screen background while remaining below the rest of the code.

Initially, it is advisable to comment out the rest of the code that could impair visibility, and display only the Background component. This first component will aim to draw a simple line from left to right at the vertical center of the screen. This will give an idea of how to initialize a dynamic SVG.

For each step in this article, it is recommended to replace the name of the component in the import statement made in the Layout.

resources/js/components/backgrounds/Line.vue

<script setup>

import { ref, onMounted } from 'vue';

const width = 100;
const height = 100;

const path = ref();

function render()
{
    const x1 = 0;
    const y1 = height / 2;

    const x2 = width;
    const y2 = height / 2;

    path.value = `M ${x1} ${y1} ${x2} ${y2}`;
}

function color()
{
    const hue = Math.ceil( Math.random() * 360 );

    return `hsl( ${hue}, 100%, 50% )`;
}

onMounted( () => render() );

</script>

<template>

    <svg preserveAspectRatio="none" v-bind:viewBox="`0 0 ${width} ${height}`">

        <path v-bind:stroke="color()" v-bind:d="path"/>

    </svg>

</template>

-preserveAspectRatio="none" allows the SVG to stretch across the entire surface.

viewBox then represents the surface ranging from 0 0 100 100, allowing for a simpler representation of the surface.

A render method is called when the component is mounted. This render method aims to draw this line following the instructions requested by the SVG . The documentation is accessible here. The method will create the path from point 0 50 to 100 50 , which is equivalent to a straight line at the center of the screen.

Another method called color is invoked to apply a random color to the stroke of the line each time the page is mounted.

Simple. Basic. To go further, one could imagine generating a given number of lines. Instead of lines, rectangles could be envisioned: a line M 0 50 100 50 would become M 0 50 100 50 100 75 0 75 Z [ M representing a movement and Z the closure of a polygon ].

resources/js/components/backgrounds/Lines.vue

<script setup>

import { ref, onMounted } from 'vue';

const width = 100;
const height = 100;

const lines = 10;
const paths = ref( [] );

function render()
{
    for( let i = 0; i < lines; i++ )
    {
        const offset = height / lines;

        let points = [];

        for( let j = 0; j <= 1; j++ )
        {
            const x = width * j;
            const y = offset * i;

            points.push( { x : x, y : y } );
        }

        const thickness = height / lines;

        for( let k = 1; k >= 0; k-- )
        {
            const x = width * k;
            const y = offset + thickness * i;

            points.push( { x : x, y : y } );
        }

        const line = points.map( point => `${point.x} ${point.y}`).join( ' ' );

        paths.value[ i ] = `M ${line} Z`;
    }
}

function color( index, length )
{
    const hue = 360 / length * index;

    return `hsl( ${hue}, 100%, 50% )`;
}

onMounted( () => render() );

</script>

<template>

    <svg preserveAspectRatio="none" v-bind:viewBox="`0 0 ${width} ${height}`">

        <path v-for=" ( path, key ) in paths " v-bind:key="`path-${key}`" v-bind:fill="color( key, paths.length )" v-bind:d="path"/>

    </svg>

</template>

Here, the complexity lies in the dynamic construction of the different polygons in the render method. The rest is more or less straightforward: a for loop within the <path> tags that dynamically call the color as well as the dedicated path.

The render method will, based on the given line, determine its points via two loops. The first one will draw the horizontal points from left to right, while the second one will draw them from right to left with a vertical offset. This is a choice.

With multiple small additions and modifications, such as adjusting the number of lines, manipulating colors, and opacity, it is possible to achieve this result :

This looks like a <linearGradient>, indeed, but it is not a <linearGradient>. It's time to increase complexity : curve and time. Here is a component based on Line that displays a curve.

resources/js/components/backgrounds/Curve.vue

<script setup>

import { ref, onMounted } from 'vue';

const width = 100;
const height = 100;
const number = 20;
const amplitude = 25;

const path = ref();

function render()
{
    let points = [];

    for( let j = 0; j <= number; j++ )
    {
        const delta = j / number;
        const position = height / 2;

        const offsetX = width / number;
        const offsetY = Math.cos( Math.PI * delta );

        const x = offsetX * j;
        const y = offsetY * amplitude + position;

        points.push( { x : x, y : y } );
    }

    const curve = points.map( point => `${point.x} ${point.y}`).join( ' ' );

    path.value = `M ${curve}`;
}

function color()
{
    const hue = Math.ceil( Math.random() * 360 );

    return `hsl( ${hue}, 100%, 50% )`;
}

onMounted( () => render() );

</script>

<template>

    <svg preserveAspectRatio="none" v-bind:viewBox="`0 0 ${width} ${height}`">

        <path fill="none" v-bind:stroke="color()" v-bind:d="path"/>

    </svg>

</template>

This component has two new variables: number and amplitude :
number represents the number of points that this curve has.
amplitude represents the height of the curve.

The particularity of the render function lies in the variable delta and the use of Math.cos(). offsetY then returns a value between -1 and 1 depending on the position of the curve coupled with PI. We multiply this value by the amplitude as well as its vertical position to obtain this curve :

A multiplier can be added to delta to increase or decrease the number of oscillations.

An oscillation being a journey between two successive passages, the current one is therefore a half-oscillation. Math.cos(2 * Math.PI * delta) then represents the equivalent of a full oscillation, and the oscillation multiplier represents its number.

const oscillation = 2.5;

const delta = oscillation * j / number;

const offsetY = Math.cos( 2 * Math.PI * delta );

Now there are more than two oscillations, but since the number of points has not been modified, the smoothing of the curves is lacking. To address this, for example, you can change the number of points from 20 to 100 .

Now it's time to apply the concept of time to animate this curve. Two new variables and a global function come into play: rate, duration, and setInterval().

import { onMounted, onUnmounted } from 'vue';

let rendering;

const rate = 15;

onMounted( () => rendering = setInterval( () => render(), rate ) );

onUnmounted( () => clearInterval( rendering ) );

These variables and methods will allow calling the render function 67 times per second. All that's left is to calculate the delta , integrating time and duration with the current oscillation and i and number.

<script setup>

import { ref, onMounted, onUnmounted } from 'vue';

let rendering;

const width = 100;
const height = 100;

const rate = 15;
const duration = 4000;

const number = 20;
const amplitude = 25;
const oscillation = 2.5;

const path = ref();
const color = ref();

function render()
{
    const time = new Date().getTime();

    let points = [];

    for( let i = 0; i <= number; i++ )
    {
        const delta = 2 * ( ( time + i * oscillation * ( duration / number ) ) % duration ) / duration;
        const position = height / 2;

        const offsetX = width / number;
        const offsetY = Math.cos( Math.PI * delta );

        const x = offsetX * i;
        const y = offsetY * amplitude + position;

        points.push( { x : x, y : y } );
    }

    const curve = points.map( point => `${point.x} ${point.y}`).join( ' ' );

    path.value = `M ${curve}`;

    color.value = `hsl( ${time / rate % 360}, 100%, 50% )`;
}

onMounted( () => rendering = setInterval( () => render(), rate ) );

onUnmounted( () => clearInterval( rendering ) );

</script>

<template>

    <svg preserveAspectRatio="none" v-bind:viewBox="`0 0 ${width} ${height}`">

        <path fill="none" v-bind:stroke="color" v-bind:d="path"/>

    </svg>

</template>

Now, imagination is the only limit :

resources/js/components/backgrounds/Waves.vue

<script setup>

import { ref, onMounted, onUnmounted } from 'vue';

let interval;

const width = 100;
const height = 100;

const rate = 15;

const number = 50;
const waves = [
    { position : 60, amplitude : 2, delay : 6000, duration : 32000, color : '#33E5E1' },
    { position : 68, amplitude : 4, delay : 4000, duration : 22000, color : '#007991' },
    { position : 76, amplitude : 6, delay : 2000, duration : 12000, color : '#222E50' },
];
const paths = ref( [] );

function render()
{
    const time = new Date().getTime();

    for( let i = 0; i < waves.length; i++ )
    {
        let points = [];

        for( let j = 0; j <= number; j++ )
        {
            const delta = 2 * ( time + waves[ i ].delay + j * ( waves[ i ].duration / number ) % waves[ i ].duration ) / waves[ i ].duration;
            const offsetX = width / number;
            const offsetY = Math.cos( Math.PI * delta );

            const x = offsetX * j;
            const y = offsetY * waves[ i ].amplitude + waves[ i ].position;

            points.push( { x : x, y : y } );
        }

        const curve = points.map( point => `${point.x} ${point.y}`).join( ' ' );

        paths.value[ i ] = `M ${curve} 100 100 0 100 Z`;

    }
}

onMounted( () => interval = setInterval( () => render() , rate ) );

onUnmounted( () => clearInterval( interval ) );

</script>

<template>

    <svg preserveAspectRatio="none" v-bind:viewBox="`0 0 ${width} ${height}`">

        <path fill="#F5F5F5" d="M 0 0 100 0 100 100 0 100 Z" />

        <linearGradient v-for=" ( wave, key ) in waves " v-bind:id="`wave-gradient-${key}`" v-bind:key="`wave-gradient-${key}`" x1="0" x2="0" y1="0" y2="1">

            <stop offset="0%" v-bind:stop-color="wave.color" />

            <stop offset="100%" v-bind:stop-color="waves[ key + 1 ] ? waves[ key + 1 ].color : '#12192b' " />

        </linearGradient>

        <path v-for=" ( path, key ) in paths " v-bind:key="`path-${key}`" v-bind:fill="`url(#wave-gradient-${key})`" v-bind:d="path"/>

    </svg>

</template>

Another example :

resources/js/components/backgrounds/Pixels.vue

<script setup>

import { ref, onMounted, onUnmounted } from 'vue';

let interval;

const width = 100;
const height = 60;

const rate = 40;

const colors = ref( [] );
const paths = ref( [] );

function setPaths()
{
    for( let i = 0; i < width * height; i++ )
    {
        const x = i % width;
        const y = Math.floor( i / width );

        paths.value[ i ] = `M ${x} ${y} H ${x+1} V ${y+1} H ${x} Z`;
    }
}

function setColors()
{
    for( let i = 0; i < width * height; i++ )
    {
        colors.value[ i ] = `#${Math.floor( Math.random() * 16777215 ).toString( 16 )}`;
    }
}

onMounted( () =>
{
    setColors();

    setPaths();

    interval = setInterval( () => setColors() , rate );
} );

onUnmounted(() => clearInterval( interval ) );

</script>

<template>

    <svg preserveAspectRatio="none" v-bind:viewBox="`0 0 ${width} ${height}`">

        <path v-for=" index in width * height " v-bind:key="`path-${index - 1}`" v-bind:fill="colors[ index - 1 ]" v-bind:d="paths[ index - 1 ]"/>

    </svg>

</template>

The rate of 40 is a choice in this case. The current values ask the browser to call the method Math.floor( Math.random() * 16777215 ).toString( 16 ) 40 * 100 * 60 times. This represents 240,000 calculations per second for the result below. Quite a resource-intensive process.

Watch out for your eyes.

By highlighting the use of the various suggested concepts in this article, the visual can achieve this result :

resources/js/components/backgrounds/Pattern.vue

<script setup>

import { ref, onMounted, onUnmounted } from 'vue';

let interval;

const width = 120;
const height = 120;

const rate = 10;
const duration = 20000;

const curves = 20;
const number = 100;
const oscillation = 3;
const amplitude = 5;
const thickness = 1;
const delay = 1000;

const colors = [ "#ab81f2", "#ff7ab4", "#ff9b8b" ];
const paths = ref( [] );

function generate()
{
    let time = new Date().getTime();

    for( let i = 0; i < curves; i++ )
    {
        time = time + delay;

        let points = [];

        for( let j = 0; j <= number; j++ )
        {
            const offsetX = width / number;
            const x = offsetX * j;

            const delta = 2 * ( ( time + j * oscillation * ( duration / number ) ) % duration ) / duration;
            const offsetY = Math.cos( Math.PI * delta );
            const y = offsetY * amplitude + ( height / curves * i );

            points.push( { x : x, y : y } );
        }

        for( let k = number; k >= 0; k-- )
        {
            const offsetX = width / number;
            const x = offsetX * k;

            const delta = 2 * ( ( time + k * oscillation * ( duration / number ) ) % duration ) / duration;
            const offsetY = Math.cos( Math.PI * delta );
            const y = offsetY * amplitude + ( height / curves * i ) + thickness;

            points.push( { x : x, y : y } );
        }

        paths.value[ i ] = `M ${points.map( point => `${point.x} ${point.y}`).join( ' ' )}`;
    }
}

onMounted( () => interval = setInterval( () => generate() , rate ) );

onUnmounted( () => clearInterval( interval ) );

</script>

<template>

    <svg preserveAspectRatio="none" viewBox="0 0 100 100">

        <linearGradient id="color-gradient" x1="0" x2="1" y1="0" y2="1">

            <stop v-for=" ( value, key ) in colors " v-bind:key="`color-${value}`" v-bind:offset="`${100 / ( colors.length - 1 ) * key}%`" v-bind:stop-color="value" />

        </linearGradient>

        <path fill="url(#color-gradient)" v-bind:d="`M 0 0 100 0 100 100 0 100 Z`"/>

        <path v-for=" ( path, key ) in paths " v-bind:key="`path-${key}`" fill="#293388" fill-opacity="25%" class="mix-blend-color-burn" v-bind:d="`${path}`"/>

    </svg>

</template>

Glad this helped.

Create a Node package on your local Laravel environment

Capsules Codes — Tue, 19 Mar 2024 10:13:18 +0000

TL;DR: How to set up a local development environment to test your Node package classes or utilities in a local Laravel project.

You will find a link to a CodeSandbox Demo or the source code via this Github Repository. Learn more on Capsules or X.

It still shouldn't come as a surprise that we use hundreds of packages when developing web tools. To get them, you just need to shop around with a package manager like NPM, which had 2 633 573 packages as of January 2024.

If you're looking to develop your own package, it's completely legitimate to wonder how to test it under real conditions. Publishing the package on NPM during development isn't a good option. Another approach would be to integrate it into a blank project without using NPM. The method in this article is much closer to a real-world scenario but requires environment preparation.

Create a folder that will serve as the foundation for your package.

mkdir package

Create a package.json file, which serves as the essential foundation of the package.

package/package.json

{
    "name": "capsulescodes-package",
    "description": "Capsules Codes Package",
    "type": "module",
}

name :The name should be structured with the entity on the left and the package name on the right. It's strongly recommended to use a descriptive package name to make it easier for users to search.
description : The package description should be clear and concise.
type : Specifying module as the type allows loading JavaScript files as ES modules instead of CommonJS modules.

Additionally, running npm init in a folder that doesn't contain a package.json file will launch a wizard that guides you through the process of creating your package.json file.

Create a folder src inside the package folder.

cd package 
mkdir src

The arrangement of folders doesn't have much real significance, apart from their proximity, both for you and for this article.

Create a JavaScript class named Greeter containing a function greet that returns the phrase Hello world! .

package/src/Greeter.js

export default class Greeter
{
    static greet()
    {
        return 'Hello world!';
    }
}

Then, you need to specify which file the package should refer to, in this case, src/Greeter.js by default.

package/package.json

{
    ...
    "main" : "src/Greeter.js"
    ...
}

Now, it's possible to test this package. To do so, you need to create a testing environment using a Laravel project template.

Return to the parent directory of the package and create a Laravel project to serve as a testing template. A Laravel Vue Inertia Tailwind project is used as a template for this article.

cd ..
mkdir template
cd template

The package is ready to be installed.

Run the command npm install ../package at the root of the template project or specify the new local dependency in the package.json file.

template/package.json

{
    "dependencies": {
        "capsulescodes-package" : "file:../package"
    }
}

The annotation file: indicates that it's a path to a local folder. Changes made in the package folder will take effect in the node_modules folder of the template folder.
npm uninstall capsulescodes-package allows you to uninstall the local package.

Testing it via the terminal :

> node -e "import( 'capsulescodes-package' ).then( module => console.log( module.default.greet() ) );"

Hello world!

It is not common to run code directly via node, but -e or --eval allows you to evaluate the given argument.

or modifying the Welcome.vue file to test the static Greeter class :

template/resources/js/pages/Welcome.vue

<script setup>

import Greeter from 'capsulescodes-package';

import logotype from '/public/assets/capsules-logotype.svg';

</script>

<template>

    <div class="w-screen h-screen flex flex-col items-center justify-center text-center">

        <img class="w-24 h-24" v-bind:src="logotype" v-bind:alt="'Capsules Codes Logotype'">

        <h1 class="mt-4 text-6xl font-bold select-none header-mode" v-text="Greeter.greet()" />

    </div>

</template>

The working environment is set up.

It would be interesting to add the additional method say() that takes a string as a parameter to test the tool in real time.

package/src/Greeter.js

export default class Greeter
{
        ...

    static say( something )
    {
        return something;
    }
}

Testing it via the terminal :

> node -e "import( 'capsulescodes-package' ).then( module => console.log( module.default.say( 'That\'s a quick way to develop and test a package!' ) ) );"

That's a quick way to develop and test a package!

or modifying the Welcome.vue file to test the static Greeter class :

template/resources/js/pages/Welcome.vue

<script setup>

import logotype from '/public/assets/capsules-logotype.svg';

import Greeter from 'capsulescodes-package';

</script>

<template>

    <div class="w-screen h-screen flex flex-col items-center justify-center text-center">

        <img class="w-24 h-24" v-bind:src="logotype" v-bind:alt="'Capsules Codes Logotype'">

        <h1 class="mt-4 text-6xl font-bold select-none header-mode" v-text="Greeter.greet()" />

        <h2 class="mt-4 text-xl font-bold select-none header-mode" v-text="Greeter.say( 'That\'s a quick way to develop and test a package!' )" />

    </div>

</template>

At this stage, everything is ready to develop a simple Node package. However, in this article, the focus is on implementing a npm run greet command that will call the static Greeter class.

It's necessary to create the greet command at first. To do this, return to the package folder and create the Greet.js command in the Commands folder of the source directory src.

package/src/Commands/Greet.js

#!/usr/bin/env node

import Greeter from '../Greeter.js';

console.log( Greeter.greet() );

#!/usr/bin/env node indicate that it is a node executable.

To access this command in the template you can then run either :

node node_modules/capsulescodes-package/src/commands/greet.js

Or add a script in the package.json file that will achieve the same result :

template/package.json

"scripts": {
    ...
    "greet": "node node_modules/capsulescodes-package/src/commands/greet.js"
},

> npm run greet

> greet
> node node_modules/capsulescodes-package/src/commands/greet.js

Hello world!

All that’s left is to create the binary via package.json.

package/package.json

"bin": {
    "greet" : "src/Commands/Greet.js"
}

This property, upon installing the package, will copy the specified file src/Commands/Greet.js and paste it into the node_modules/.bin/ folder, renaming this file with the given key greet.

If, as in our case, our package is already installed, running yet another npm install ../package will restart the process.

You just need to add a new script to the package.json file or simply run the command npx greet [ where npx greet is equivalent to node node_modules/.bin/greet ].

template/package.json

"scripts": {
    "greet": "greet"
},

> npm run greet

> greet
> greet

Hello world!

> npx greet

Hello world!

For the case of the static method say and its parameter, a new command is needed.

package/src/Commands/Say.js

#!/usr/bin/env node

import Greeter from '../Greeter.js';

console.log( Greeter.say( process.argv[ 2 ] ) );

process.argv represents the arguments of the command, where process.argv[0] contains node and process.argv[1] contains the node_modules/.bin/say binary in this case.

The command can be added to the list of binaries in the package.json file.

package/package.json

"bin": {
    "say" : "src/Commands/Say.js"
}

You just need to add a new script to the package.json file or simply run the command npx say "Capsules Codes".

template/package.json

"scripts": {
    ...
    "say": "say"
},

> npm run say "Capsules Codes"

> say
> say Capsules Codes

Capsules Codes

> npx say "Capsules Codes"

Capsules Codes

You want to publish this amazing package? One last small step is necessary: avoid publishing all the files in the project :

package/package.json

"files": [ "!*", "src" ]

!* indicates that it should exclude everything. Therefore, only the src folder will remain to be kept.

npm publish

This command requires being logged in to NPM via npm login. It's necessary to specify the version in the package.json file when publishing.

Glad this helped.

Run Laravel on your browser with Browser PHP

Capsules Codes — Wed, 28 Feb 2024 15:55:30 +0000

TL;DR: How to set up a Laravel project using only the Node Browser PHP and PHP WASM packages.

You will find a link to a CodeSandbox Demo or the source code via this Github Repository. Learn more on Capsules or X.

First and foremost, it's worth mentioning that PHP is primarily a server-side scripting language, and this article may not appeal to purists. However, it stems from a simple question: How can a PHP script be executed on the client side? Browser PHP is the outcome of this reflexion.

Browser PHP provides a collection of commands to execute PHP from the Node command-line interface or to launch a PHP server from Node. Perfect for running a Laravel project in CodeSandbox, for example.

This package is experimental and under continuous development. It was created with the purpose of accessing PHP functionalities from a browser. Therefore, it is strongly recommended to use it exclusively in a development environment.

This article suggests creating a Laravel project without access to the PHP executable. Starting from the Browser PHP package and providing Composer. The steps are as follows :

Create a temp directory and install browser-php :

mkdir temp

cd temp

npm install browser-php

browser-php will install the composer binary in the vendor/bin directory.

Now, you need to make php and composer available to npm in the package.json file.

temp/package.json

  "scripts" : {
       "php" : "php",
       "composer" : "php --disable-functions vendor/bin/composer"
  }

disable-functions indicates to vendor/bin/composer that the functions proc_open, popen, curl_exec, and curl_multi_exec are inactive. In reality, they do not exist in php-wasm.

npm run composer

> composer
> php --disable-functions vendor/bin/composer

   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 2.7.1 2024-02-09 15:26:28

With Composer now accessible, it's time to create a new Laravel project.

npm run composer create-project -- --no-scripts --ignore-platform-reqs laravel/laravel ../laravel

no-scripts helps to avoid a PHP not found error. The scripts listed in the composer.json file require the PHP executable.
ignore-platform-reqs silences errors related to the absence of PHP extensions.

  ...

  - Installing spatie/flare-client-php (1.4.4): Extracting archive
  - Installing spatie/ignition (1.12.0): Extracting archive
  - Installing spatie/laravel-ignition (2.4.2): Extracting archive
    0 [>---------------------------]    0 [->--------------------------]
65 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating optimized autoload files
83 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
No security vulnerability advisories found.

The Laravel project has been created ! 🎉

A few small tasks need to be done to apply browser-php to an existing Laravel project. The recently created project will serve as the base. However, initially, you need to delete the temp directory and install browser-php.

rm -rf temp 

cd laravel

npm install --save-dev browser-php

The scripts in the composer.json file can also be cleaned up.

laravel/composer.json

"scripts": {
    "post-autoload-dump": [
       "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump"
    ]
},

To be able to execute artisan, you need to apply a umask(577). This will give file permissions to artisan.

laravel/artisan

#!/usr/bin/env php
<?php

umask(577);

define('LARAVEL_START', microtime(true));

...

npm run php artisan inspire

> php
> php artisan inspire

  “ Act only according to that maxim whereby you can, at the same time, will that it should become a universal law. ”
  — Immanuel Kant

It's time to see the result of setting up the Laravel project. To do this, copy the .env.example file to .env and run the key:generate command using the newly accessible artisan.

cp .env.example .env && npm run php artisan key:generate

> php
> php artisan key:generate

   INFO  Application key set successfully.

The new script serve from browser-php will launch a PHP server on localhost:2222.

"scripts" : {
    "serve": "serve",
}

npm run build && npm run serve

> build
> serve

   PHP server is listening on localhost:2222

Great... But now, why? Well, to enable the visualization of Capsules Codes articles on CodeSandbox! And to launch a Laravel project on CodeSandbox, here are the steps to follow :

npm run install --save-dev browser-php

package.json

"scripts": {
      "dev": "vite",
      "build": "vite build",
      "php" : "php",
      "serve" : "vite & serve",
      "composer" : "php --disable-functions vendor/bin/composer"
},

.env

APP_URL="<https://localhost>::2222"

BROWSER_PHP_HOST="<https://localhost>"
BROWSER_PHP_PORT=2222

vite.config.js

server : { host : 'localhost' }

.codesandbox/tasks.json

{
    "$schema" : "<https://codesandbox.io/schemas/tasks.json>",
    "setupTasks" : [
        { "name" : "Install Node Dependencies", "command" : "npm install" },
        { "name" : "Install PHP Dependencies", "command" : "npm run composer install -- --ignore-platform-reqs --no-scripts" },
        { "name" : "Prepare Environment Variables", "command" : "cp .env.example .env && npm run php artisan key:generate" }
    ],
    "tasks" : {
        "dev" : { "name" : "Start Dev and PHP Server", "command" : "npm run serve", "preview" : { "port" : 2222 }, "runAtStart": true }
    }
  }

And now, What about offering a demonstration of an issue or a pull request? A good demonstration may be worth more than a lengthy description.

Glad this helped.