DEV Community

Ostap Brehin
Ostap Brehin

Posted on

How to enable hot reloading for React with Vite in Laravel

#inertia #laravel

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)