How do you handle HMR for a Laravel Package development using Vite

Hello, I am wondering what's the best way to run vite dev-server while source codes and all remains in a separate package directory that is locally installed on a laravel project (symlink). Should that be run from the package path or from installed project path?

If you want to know the details of the issue I am trying to clarify, hope the following explains:

Laravel Demo App: Fresh installation of Laravel app with specific local development package installed with assets published to vendor path on public folder.

Package development (LaravelUiPackage): A separate folder outside the Demo app (../../Packages/LaravelUiPackage) contains the Laravel package that have a resource folder containing js files, basically an Inertia app that gets loaded into blade view file within the package. The package contains its own routes with specific middlewares it requires to run. When installed, the routes and assets load (when vite build is run) as they are updated and published to the demo app public vendor path.

Now if I run the vite command on package directly, and try open the demo app specific route for the package, all loads fine with vite build, but doesn't work for HMR with dev-server mode.

Expectation: When I change frontend component codes, without having to build and publish, I want to see them updated on the demo app while the vite is running with HMR.

Thanks for all the help here.

martinbean

2 years ago

Level 80

@raf Your package should either publish its own, already-compiled assets (like Nova); or publish the source files to the application so that the application can build those assets.

Raf

2 years ago

Level 6

Hi @martinbean, thanks for the reply. yeah that is more applicable for a released package. I am thinking on the development experience side. My package is similar to Nova package that comes with the public assets that gets published to the vendor path. That's not the issue, should I run the vite dev mode from the parent project or directly from the package path? I wonder how one would develop such a project like Nova and not having to run build and publish assets each time when they want to have it tested on browser while still developing (with HMR)

Raf

2 years ago

Level 6

I have managed to figured out the solution where the dev server can actually be run on the package path and have the HMR work on installed demo application. I will share the solution below for anyone else who might be trying to setup similar development experience.

<!doctype html>
<head>
    {{
        Vite::useHotFile(public_path('vendor/package_name/'))
            ->useBuildDirectory('vendor/package_name/build')
            ->withEntryPoints(['resources/js/app.js'])
    }}
</head>

Instead of relying @vite blade directive, had to use the Vite facade class to custom configure. More details available from Laravel docs https://laravel.com/docs/10.x/vite#advanced-customization

Note: In addition I needed to symlink the package public path to the demo application public vendor path.

1 like

didix16

1 year ago

Level 1

Hey @Raf, I'm in the same situation as yours. Could you explain in more detailed fashion the exact steps to do to develop with HMR working on laravel test demo package. What are you vite configs/aliases on package and laravel demo app. Thanks in advance!

EDIT: Nevermind, I just figure it out. Thanks for you inspiration anyway

Please or to participate in this conversation.