Sebastian De Deyne
Designer & developer at Spatie

Vite with Laravel: Using 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!

If you enjoyed this post, you might be interested in my newsletter. I occasionally send a dispatch with personal stories, things I’ve been working on in the past month, and other interesting tidbits I come across online.