Forem: Ostap Brehin

How to enable hot reloading for React with Vite in Laravel

Ostap Brehin — Mon, 25 Dec 2023 19:55:27 +0000

If you use Vite with @vitejs/plugin-react in a Laravel project, there's an easy way to enable hot reloads.

Add this code inside your <head> tag, but before @vite:

@env('local')
<script type="module">
    import RefreshRuntime from "{{ Vite::asset('@react-refresh') }}"

    RefreshRuntime.injectIntoGlobalHook(window)
    window.$RefreshReg$ = () => {
    }
    window.$RefreshSig$ = () => (type) => type
    window.__vite_plugin_react_preamble_installed__ = true
</script>
@endenv

In frontend-only Vite apps, this code gets injected automatically. However, when used in a monolith full-stack framework like Rails, Laravel, Django or else - we have to include a code snippet above.

Fortify: How to disable password confirmation field (Jetstream)

Ostap Brehin — Tue, 16 Feb 2021 11:51:55 +0000

Solution

Add this method to app/Actions/Fortify/CreateNewUser.php file.

use Illuminate\Validation\Rules\Password;

// ...

protected function passwordRules()
{
    return ['required', 'string', Password::default()];
}

If you are using Jetstream, you should also remove these line in resources/views/auth/register.blade.php

<div class="mt-4">
    <x-jet-label for="password_confirmation" value="{{ __('Confirm Password') }}" />
    <x-jet-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" />
</div>

Explanation

Fortify has an action class which is responsible for user creation.
You can find it at app/Actions/Fortify/CreateNewUser.php.

You can see the line:

'password' => $this->passwordRules(),

Under hood it uses passwordRules method from PasswordValidationRules trait. That method returns array with confirmed element:

return ['required', 'string', Password::default(), 'confirmed'];

confirmed is a rule responsible for email confirmation, so we made our own passwordRules method which doesn't has confirmed rule.

How to use PNPM with Laravel

Ostap Brehin — Sat, 21 Nov 2020 18:20:18 +0000

PNPM is a "Fast, disk space-efficient package manager".

Here is a simple script to start using pnpm in Laravel:

echo "shamefully-hoist=true" > .npmrc

Now you run build scripts as usual:

pnpm run watch
# or
pnpm run dev

How to use Preact with Laravel Mix

Ostap Brehin — Fri, 23 Oct 2020 14:02:36 +0000

Update 2023: I highly advise using Vite with their official preset, as it's much easier to configure and miles faster than Webpack.

In this article, I share my configuration for Preact usage with Laravel Mix.

Install these dependencies before you get started:

preact
@babel/plugin-proposal-class-properties
@babel/preset-react

You can do it with this command:

npm install preact @babel/plugin-proposal-class-properties @babel/preset-react

Next, add this content to your webpack.mix.js

// webpack.mix.js
const mix = require('laravel-mix');

mix.webpackConfig({
    "resolve": {
        "alias": {
            "react": "preact/compat",
            "react-dom": "preact/compat"
        }
    }
});

mix.babelConfig({
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ],
});

mix.react('resources/js/app.js', 'public/js');

And here is an example app component, you can store it in resources/js/app.js file:

// app.js
import { h, render, Component } from 'preact';

window.React = require('preact');

class App extends Component {
    render() {
        return <h1>Preact from Laravel Mix</h1>;
    }
}

render(<App />, document.body);

Note: As we set out rendering node as document.body, you should place your script tag inside <body> tag. If you need to place <script> tag in the <head> section - you will need to add defer attribute.

<body>
<script src="{{ mix('js/app.js') }}"></script>
</body>

That's all, happy coding! :)

How to install IBM Plex on macOS

Ostap Brehin — Mon, 31 Aug 2020 20:01:33 +0000

Open terminal and run

brew install font-ibm-plex

That's it! :)

IntelliJ-based IDE

When you have font installed, go to

Preferences/Settings -> Editor -> Font

Choose "font" and type "IBM Plex Mono".

Orchid Platform meets multi-tenancy

Ostap Brehin — Mon, 20 Jul 2020 21:27:02 +0000

Orchid is a Platform for back-office applications on Laravel. With it, you can create beautiful apps faster, using only PHP code.

Tenancy is a feature, allows you to split data each user use (The way how SaaS works).

Here are a few steps you can use to integrate multi-tenancy for your orchid application.

1. Install tenancy package

For tenancy package, I will use stancl/tenancy.

Go to installation page and run 2 simple commands as written :)

composer require stancl/tenancy
php artisan tenancy:install

2. Configure domain detection

2.1. Go to the config/tenancy.php and specify all your domains (local, production) in central_domains key.

Example:

    'central_domains' => [
        '127.0.0.1',
        'localhost',
        'businessmachine.wip',
        'businessmachine.local',
        'businessmachine.app',
    ],

2.2. Move all your platform routes from routes/platform.php to routes/tenant.php

Note: if you want to add acess control, you can do it here by specifying middleware:

Route::middleware('auth', 'tenant.access')->group(function (){
    // Your content here
});

Sample access-middleware:

class CheckTenantAccess
{
    public function handle(Request $request, Closure $next)
    {
        if (!auth()->user()->tenants->contains(tenant('id'))){
            return redirect()->route('workspaces.index');
        }
        return $next($request);
    }
}

2.3 Add macro to get subdomain

Inside boot method in AppServiceProvider, add these lines:

use Illuminate\Http\Request;
...
Request::macro('subdomain', function () {
    return current(explode('.', $this->getHost()));
});

2.4. Automatically add subdomain as a parameter to every platform route:

Create new middleware with content:

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\URL;

class TenancyDomain
{
    public function handle(Request $request, Closure $next)
    {
        // Add current subdomain as a parameter to all route links
        URL::defaults(['subdomain' => $request->subdomain()]);

        // Do not inject 'subdomain' parameter in controllers
        $request->route()->forgetParameter('subdomain');

        return $next($request);
    }
}

And register it in app/Http/Kernel.php:

class Kernel extends HttpKernel
...
    protected $middlewareGroups = [
        'web' => [
            ...
            \App\Http\Middleware\TenancyDomain::class,
        ],
...

2.5 Go to config/platform.php, and update 'domain' line:

    'domain' => env('DASHBOARD_DOMAIN', '{subdomain}.yourdomain.test'),
    'prefix' => env('DASHBOARD_PREFIX', '/'),

3. Move migrations

Move your migrations to a 'database/migrations/tenant' directory.

That's it! :)