Getting Vite and Laravel to work with Lando

I am writing the blog post as I keep getting contacted by people who want to know how how I got Vite to work with Lando. This guide will work with both running your site with http and https.

Set up Lando

First we add a new service to .lando.yml for running node

1services:
2  node:
3    type: node:16
4    scanner: false
5    ports:
6      - 3009:3009
7    build:
8      - npm install

Here we install node version 16, and open port 3009.

We will also add two commands for running the dev server and building assets.

1tooling:
2  dev:
3    service: node
4    cmd: npm run dev
5  build:
6    service: node
7    cmd: npm run build

Rebuild your site with lando rebuild -y and the new service is ready.

Configure vite

Open the vite.config.js file that came with Laravel and add this server config

 1import { defineConfig } from 'vite';
 2import laravel from 'laravel-vite-plugin';
 3 
 4export default defineConfig({
 5    plugins: [
 6        laravel({
 7            input: ['resources/css/app.css', 'resources/js/app.js'],
 8            refresh: true,
 9        }),
10    ],
11    server: { 
12        https: false,
13        host: true,
14        port: 3009,
15        hmr: {host: 'localhost', protocol: 'ws'},
16    }, 
17});

The trick is that we set the dev server to run on http + ws. Normally this wouldnt work with a https site, but as we also set the dev server to be accessed on localhost, the browser will allow it anyways!

That's it!

Start the Vite server with lando dev and open your site like your normally do. Hot reloading should now be working!

Any problems or comments, feel free to reach out to me on @rsinnbeck