Laravel Vite with Laravel Valet on local network

Well, just right off Vite doesn't run your Laravel application like Laravel Valet or artisan serve does. npm run dev spins up a Vite development server, all that does is re-build your assets when you update them, update your Laravel views or any other files and directories you've asked it to watch.

I haven't exposed it locally yet, but based on the fact that artisan serve and Valet runs on one port, and Vite runs on the other. Valet runs on :80 by default, artisan serve runs :8080 and the Vite server runs :5173 by default.

You can see this when you start the server with npm run dev. It tells you in the terminal which port is used.

VITE v3.1.4  ready in 1705 ms

Local:   http://127.0.0.1:5173/
Network: use --host to expose
// Using --host will result in this result below of IP_RANGE
// Network: https://{IP_RANGE}:5173/
// Network: https://{IP_RANGE}:5173/

LARAVEL v9.21.5  plugin v0.5.4

APP_URL: https://laravel.test

And the APP_URL is only forwarded from your .env file, it doesn't do anything in Vite, it's just convenient and quick way to open your Laravel app.

My suggestion would be to expose Vite on one port of your local IP and expose your Laravel app on another port. Like they do on your own machine.

Okay, did some research and got it to work using artisan serve and npm run dev. The order off if your start artisan serve or npm run dev first doesn't really matter, but I'd start Vite first to get hot reloading on the first load.

You need to find your local IP address. The IP that's used internally between your devices, on Mac you can find that under System Preferences, Network, and in there you should see your IP address, 192.168.???.???.

That's the IP you will pass in as the host for both artisan serve and npm run dev. In separate terminals run.

php artisan serve --host 192.168.???.???

For the npm command, we first need to add two dashed after the command and then pass in the flag.

npm run dev -- --host 192.168.???.???

Now you should be able to access your site locally from the IP and port that artisan serve gives you, for me, it was :8000.

@thinkverse Thanks for the help! I was able to get it working using artisan serve and my local IP. Thanks for explaining the concepts out to better understand too!

This is definitely a good solve for now, but I would love to figure out how to do it with using Laravel Valet. I am constantly working on multiple projects so I "park" a directory for valet and would love to not have to start the Artisan Server every time. I am going to keep looking into it myself, but for now, I at least have a solve for the immediate needs.

Thanks!

@ajsheldon93 have you managed to access your app on the local network using Vite yer? I have the same issues like described here.

I fixed the problem just updating the vite.config.js file.

export default defineConfig({
    base: '/',
    server: {
        host: '0.0.0.0',
        port: 8000,
        hmr: {
            host: '192.168.X.X', // Change this value for your local network ip address
            port: 8000, // Or your app's standard port
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/scss/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Hope this helps you!

@reppair I was able to get browserSync to work with vite build --watch! Like so (contrived example):

import { defineConfig, loadEnv, UserConfig } from "vite";
import viteBrowserSync from "vite-plugin-browser-sync";
import browserSync from "browser-sync";

export default defineConfig(async ({ mode }) => {

  const env = loadEnv(mode, process.cwd(), "");

  /**
   * Make browserSync options re-usable
   */
  const bsOptions: browserSync.Options = {
    proxy: env.APP_URL, // your laravel herd APP_URL
    ui: false,
    ghostMode: false,
    open: false,
    notify: false,
    injectChanges: false,
    online: true, // required to print the external URL when running `vite build --watch`
  };

  const config: UserConfig = {
    // ....
    plugins: [
      // ...
      viteBrowserSync({
        dev: { enable: false },
        preview: { enable: true, bs: bsOptions },
        buildWatch: { enable: true, bs: bsOptions },
      }),
    ],
  };

  return config;
});

As you can see, I'm using vite-plugin-browser-sync with the buildWatch option enabled.

This will print the browserSync URLs to the terminal on vite build --watch or vite preview, just as you remember it from the good old webpack days :)