Hot file should be stored in build directory

[hailwood]

• Laravel Vite Plugin Version: 0.2.2
• Laravel Version: 9.17.0
• Node Version: 18.0.0
• NPM Version: 8.6.0

Description:

Right now we're storing the hot file directory in the public directory.
What this means is that if we have multiple devservers running they're going to fight over that hot file.

Instead I'm thinking we should probably be joining the build directory onto the path,
this would mean each devserver would have it's own hotFile location.

I.e. lines like

const hotFile = path.join(pluginConfig.publicDirectory, 'hot');

become

const hotFile = path.join(pluginConfig.publicDirectory, pluginConfig.buildDirectory, 'hot');

This would also require an update to the PR open in Laravel so it takes the build directory into account when looking for the hot file.

https://github.com/laravel/framework/pull/42785/files#diff-46c2ed8e094afc518af68102faf85711f7b73426e3ce8c339b087523ba9ee4c7R27

In the stock standard setup all it means is the hot file would end up in public/build/hot instead of public/hot

Steps To Reproduce:

1. Have multiple build process (e.g. resources/frontend/vite.config.js and resources/backend/vite.config.js)
2. Attempt to run the devserver (vite) from both at the same time.

[jessarcher]

Was this also an issue with Mix? I can see the value in customising the hot file location, but I'd prefer to keep the default location as-is.

[hailwood]

Yes it was an issue with Mix as well,
Until vite I actually switched to encore instead of mix specifically for this issue.

If you'd like to keep the default location what about only doing that logic if the build directory is not 'build'?
That would keep the default as is but move it if they've said it's customized?

[timacdonald]

Putting the hot file in the build directory by default is interesting as it would mean that the file would never end up in git if for whatever reason node doesn't clean the file up.

[timacdonald]

It would also be cleared out when a build occurs, so you wouldn't end up with a "hot" file in your built assets (as Vite always clears it out)

[driesvints]

@hailwood thoughts on the above? ^

[hailwood]

I agree with everything @timacdonald has said.
Those benefits combined with it allowing us to run multiple dev servers simultaneously more than sell it 👍

[jessarcher]

I'm a bit worried about putting it in the build directory because:

1. If someone wants to commit their assets and removes the gitignore for this directory, there's a chance they might blindly git add --all while the dev server is running and then deploy the hot file which would confusingly break production. It may even appear to work for the developer if they're still running the dev server locally. This could be solved by separately gitignoring any file called hot regardless of where it is, but this seems a bit generic, so we may want to rename it to vite.hot.
2. The build directory is "owned" by Vite. Co-opting it for another purpose feels unconventional and risky. Vite will wipe the directory on build, so if you're running the dev server and do a build, Laravel won't be able to find the dev server until it's restarted.
3. The name and purpose of the build directory don't really match with what the hot file is doing.
4. When using a custom build directory, you'd also need to pass it to the @viteReactRefresh directive so it can find the hot file.
5. It's a subdirectory, so we'd also need to make sure we create the directory if it doesn't exist.
6. It's another step for people migrating to Vite in an existing application.

In your use case @hailwood, could you just have a single vite.config.js with multiple entry points so that you only need to run a single dev server? You would then just reference the specific entry point you need in separate @vite directives.

[timacdonald]

@hailwood: @jessarcher and I have been chatting about this a lot. I think that for now we don't want to add support for what may be a unique use-case within the community when we aren't sure there is a big need for this. We will of course consider it further if we get enough of the community wanting the feature.

Luckily, the Laravel plugin is not massive, and you can override the bits you need.

In your config you could utilise everything we provide, but specify your own hot file handling. For example you should be able to de-structure the plugin and provide your own configureServer hook - then just copy / paste our implementation and tweak as you need.

export default defineConfig({
    plugins: [
        {
            ...laravel({
                input: 'resources/js/app.js',
            }),
            configureServer() {
                // hot file here...
            }
        },
    ],
}

On the Laravel side of things you also have full control. You could create your own Vite class implementation that checks for the hot file in the build directory.

Due to the nature of Laravel's container, you can just bind any class, even with differing function signatures, to the container and replace the built in Vite class implementation.

app()->bind(\Illuminate\Foundation\Vite::class, function () {
    return new class () {
        public function __invoke($entrypoints, $buildDirectory)
        {
            // check for the hot file in the build dir.
            // etc.
        }
    };
});

Then you could continue to use the built in vite directive as well.

Sorry we aren't adding support for this right now, but we really appreciate your feedback on this already.

[hailwood]

@timacdonald / @jessarcher happy with that,
Appreciate your time on the issues I'm raising too :)