DEV Community: Jenry Mazariegos

Laravel Nova - Dependent Filter

Jenry Mazariegos — Sun, 15 Feb 2026 02:02:53 +0000

Hi guys! Today I want to share a new custom component I built for Laravel Nova 4/5.

The idea behind this package is simple: cascading dependent filters. If you've ever needed your Nova filters to talk to each other — where selecting a value in one filter automatically narrows the options in the next — this is for you.

For example, imagine you have Clients, Projects, and Users. When you select a client, the Project filter should only show projects belonging to that client. Then, when you pick a project, the User filter narrows down to only the users assigned to that project.

Nova doesn't support this out of the box, and building it from scratch every time is tedious. So I packaged it up into a clean, reusable solution:

use DevJM\DependentFilter\Nova\Filters\DependentFilter;

$client = DependentFilter::make('Client', Client::class, 'client_id');

$project = DependentFilter::make('Project', Project::class, 'project_id')
    ->dependsOn($client, foreignKey: 'client_id');

$user = DependentFilter::make('User', User::class, 'user_id')
    ->dependsOn($project, relationship: 'projects');

return [$client, $project, $user];

Three lines. Three cascading filters. No boilerplate.

Check it out

Laravel Reverb in Production Environment

Jenry Mazariegos — Wed, 20 Nov 2024 14:40:55 +0000

Hi, before starting this tutorial, I recommend reading The Ultimate Guide to Laravel Reverb: Real-Time Notifications, as this tutorial assumes you already have Laravel Reverb set up and working locally.

Basic Concepts

First, it’s essential to understand how port connections work. Laravel Reverb uses two ports: one for connecting to the WebSocket and another for server communication.

In this case, we will use port 443 for public access. This port is crucial for users accessing the webpage as it handles secure HTTPS traffic.

For WebSocket communication, we will use port 6001. This port doesn’t need to be publicly accessible since it is only used internally by the server for real-time communication.

Configurations

Now, let's modify out .env

REVERB_HOST="your.domain.com" # your domain name here
REVERB_PORT=443 # The public port used by all clients on your website
REVERB_SCHEME=https # Required for prod environment

Them in your nginx configuration put the next code.

server {
  listen 443 ssl;
  listen [::]:443 ssl;
  server_name your.server.name;
  {{ssl_certificate_key}}
  {{ssl_certificate}}

 location /app/ {
    proxy_http_version 1.1;
    proxy_set_header Host $http_host;
    proxy_set_header Scheme $scheme;
    proxy_set_header SERVER_PORT $server_port;
    proxy_set_header REMOTE_ADDR $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass http://0.0.0.0:6001;
}
location /apps {
    proxy_http_version 1.1;
    proxy_set_header Host $http_host;
    proxy_set_header Scheme $scheme;
    proxy_set_header SERVER_PORT $server_port;
    proxy_set_header REMOTE_ADDR $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass http://0.0.0.0:6001;
}
}

What we do here? This setup securely redirects all WebSocket traffic from the public-facing port 443 to the internal WebSocket server on port 6001, enabling secure and efficient real-time communication between clients and the server.

For Apache configurations you can read these posts.

After completing the configuration, the next step is to start the service. In a real-world scenario, you should use a process manager, such as Supervisor, to ensure the service runs continuously and restarts automatically if needed.

For testing purposes, however, you can run the command manually from the command line.

php artisan reverb:start --port=6001 --debug

Now we are ready to work with WebSocket in a production environment. Remember to restart the service and clear the cache before testing to ensure everything runs smoothly.

A post that can help us gain a deeper understanding of this topic.

I hope this helps you get started! See you in the next post.

Laravel

Jenry Mazariegos — Wed, 13 Nov 2024 03:37:35 +0000

How to override laravel nova components

Jenry Mazariegos — Thu, 19 Sep 2024 15:53:57 +0000

Hello again! Before starting the tutorial, you must have Laravel Nova already installed. Let's dive right in!

Note: This tutorial is based on Laravel 10 and Nova 4.

Introduction

In this tutorial, we will learn how to customize the 404 error page in Laravel Nova. By default, Laravel Nova includes a 404 error page component, but if we want to customize it, there isn't a straightforward way to do so. Follow these steps to override Nova's default 404 error page with your own custom page.

Step 1

We will use a Laravel Nova command to create a resource tool that will allow us to override the component. The resource tool must be named in the following format: vendor/custom-nova-components, where vendor is required, and you can choose any name after the /.

Run the following command:

php artisan nova:resource-tool vendor/custom-nova-components

Laravel will prompt you with a few questions, and you should answer "yes" to all of them.

After installing the resource tool, you will see a new directory called nova-components where you will find your custom resource tool, in my case custom-nova-components.

Step 2

Now, we will override the CustomError404 component, which is the default view used by Laravel Nova for 404 errors. You can find the original component in:

vendor/laravel/nova/resources/js/views/CustomError404.vue

In our resource tool, locate the tool.js and Tool.vue files. Rename Tool.vue to CustomError404.vue. Next, register the component in tool.js as follows:

import CustomError404 from './components/CustomError404.vue'

Nova.booting((app, store) => {
  app.component('CustomError404', CustomError404)
})

As you can see, we've used the same name, CustomError404, as in the Nova package. This will override the default Nova component with our custom one.

Step 3

Once the component is registered, you can customize your CustomError404.vue as you like. After making your changes, run in directory nova-components/custom-nova-components the following command to compile the changes:

npm run prod

That's it! You've successfully overridden the default Nova 404 error page.

Tips and notes

Before overriding any Nova component, make sure to locate the component you want to customize in vendor/laravel/nova.
You can use the same resource tool to override multiple components. Simply create additional Vue files in the components directory and register them in tool.js using the corresponding component name.
Note that overridden components will inherit the default Nova layout, which cannot be changed.

How to use toast notification with ASP .Net Core

Jenry Mazariegos — Fri, 07 Jul 2023 21:43:27 +0000

Before start with the tutorial, make shore u already have jQuery installed, cause this library use jQuery, in this case I will use the latest version.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.js"></script>

Let start!

We're going to use the toastr library, so go to the repositorie here.

Before make something else, first we create a directory in your project like this.

As u can see, we have a folder named toastr where we have 2 files.
Now let's create this 2 files(JS and CSS).

So go to the repository that you opened before, enter the file toast.js in the repository, copy the code, and paste in your file project.

Now we'll do the same with the .scss file.

After this, put the references in your HTML.

NOTE: make shore you put the script after the jQuery script.

Now, we'll use the toast

<input 
  onclick="test()"
  type="button"
/>

 <script type="text/javascript">

   const test = () => {        
     toastr.success('Have fun storming the castle!', 'Miracle Max Says')
    }

  </script>

we'll get this result

Very easy right? toastr have a demo where u can personalize with some click and see the result, here u have.

See you soon.

LUCIDE ICONS WITH ASP .NET CORE

Jenry Mazariegos — Thu, 06 Jul 2023 17:56:58 +0000

Today, i going to show you how to implement LUCIDE with ASP .NET CORE, we going suppose the project its already created.

1- Create package.json

In case you still no have package.json first you must create the file with the next command
npm init -y

2- Open Terminal Inside Visual Studio

Go to View in the top and click on Terminal or Ctrl+`

will appear this windows in the right bottom

3- Install Lucide

In the terminale write the next command
npm install lucide
then press enter.

After install, you can see in your package.json the next json.

4- Usage

Now we're going to use the icons, let's see an example.

<i data-lucide="save"></i>
Its simple right?

Ok now let see in a input button with style

<div class="flex flex-row gap-2 hover:cursor-pointer max-w-fit px-2 py-1 rounded shadow drop-shadow-md bg-blue-800 transform duration-300 hover:bg-blue-700 font-semibold font-mono text-white"> **<i data-lucide="save"></i>** <input type="submit" value="Guardar" class="hover:cursor-pointer" /> </div>

as you can see its very simple to use, you can customize the color, size, etc.

<i class="w-10 h-10" data-lucide="save"></i>

<i data-lucide="save"></i>

We have reached the end of this post, I invite you to try this simple method, in which it will give a better appearance to your web application.