Sebastian De Deyne

Vite with Laravel: Using React

∙ 1 min. read ∙ Vite with Laravel ∙ #laravel #vite #frontend #buildtools #react

Vite supports JSX out of the box (you might have to rename .js files to .jsx), so there are no additional steps to get started with React. However, you’ll probably want to enable React Refresh for a better development experience.

React Refresh lets you edit components without losing the current state of your running application. For example, if you’re working on modal that appears after clicking a button, you’d need to reopen that modal every time the page refreshes. With React Refresh, the modal will stay open after the code reloaded, because it’s able to remember the previous state.

To enable React Refresh, install the @vitejs/plugin-react-refresh package.

  {
      "private": true,
      "scripts": {
          "dev": "vite",
          "production": "vite build"
      },
      "devDependencies": {
+         "@vitejs/plugin-react-refresh": "^1.3.1",
          "axios": "^0.21",
          "lodash": "^4.17.19",
          "vite": "^2.1.0",
      }
  }

Next, add it to your vite.config.js.

import reactRefresh from '@vitejs/plugin-react-refresh';

// vite.config.js
export default ({ command }) => ({
    base: command === 'serve' ? '' : '/build/',
    outDir: 'public/build',
    publicDir: 'fake_dir_so_nothing_gets_copied',
    build: {
        manifest: true,
        rollupOptions: {
            input: 'resources/js/app.js',
        },
    },
    plugins: [reactRefresh()],
});

Finally, you’ll need to add an extra script in your development snippet.

<script type="module">
    import RefreshRuntime from "http://localhost:3000/@react-refresh"
    RefreshRuntime.injectIntoGlobalHook(window)
    window.$RefreshReg$ = () => {}
    window.$RefreshSig$ = () => (type) => type
    window.__vite_plugin_react_preamble_installed__ = true
</script>
<script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/resources/js/app.js"></script>

Happy hot reloading!


More Laravel, Vite, Frontend, Build tools & React

Vite with Laravel: Using Vue.js

Vite with Laravel: Using Tailwind CSS

Vite with Laravel: Auto-refresh Blade views