Laravel Vite does not work nicely with Warden

[jkenneydaniel]

Scenario:

Installing the latest version of Laravel (v9.44.0) with Vite (v4.0.1), Jetstream (v2.13.1) and Inertia.js (v0.6.4).

Expectation:

Running npm run dev would result in a similar experience to Webpack when using npm run watch.

Problem:

Because Vite uses a port similar to livereload, one must use npm run dev -- --https --host instead, which partially resolves the issue. However, because Warden uses a self-signed certificate with it's on CA cert, Vite cannot/does not leverage this and so you must visit the URL in your browser to accept the certificate before proceeding further.

The https flag will configure Vite to load resources over HTTPS, but this tries to use localhost or 127.0.0.1 and unless the port used (default: 5174) is exposed, this does not work.

The host flag will configure Vite to leverage the domain (ie. app.domain.test) to load resources over so that there is no CORS concerns/issues, etc.

I feel like this isn't necessarily a bug, but rather a feature request for Warden to support Vite by modifying the way it inserts the CA and SSL cert for the domain of the environment such that Vite can leverage them to prevent unnecessary steps on the part of the end-user.

I did modify my Warden config to push the SSL certs Warden is using for my domain to the environment (which appeared to work successfully) - however, it appears the format of these keys are not supported by Vite or something?

I'd like to hear some thoughts on this?

[navarr]

I've converted this into a discussion until we have actionable steps. Then we'll open an issue 🙂

---

I'm unfamiliar with Vote, but reading your post reminds me a lot of some similar stuff I've had to do with React and yarn dev. In such cases, what I did was I setup additional Traefik routes using the labels on the image to point a new subdomain to the port it ran on, and let Traefik continue to deal with SSL termination.

I find that to be the easiest approach. If Vite is compatible, it may be worthwhile to have something like js..test that points to a configured port on the php image

[boumanb]

Did anyone get this working? Have been playing around the past 2 hours just to arrive at the same conclusion as @jerrylopez. Thanks you for your detailed write-up.

[jerrylopez]

@boumanb no problem!

I haven't had a chance to circle back to this myself and will be needing a solution in the near future. Let me know if you get it working!

[jerrylopez]

Soo... I was able to get it to work actually. I set the protocol: 'wss' in the server.hmr config. So now my vite.config.js file looks like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        host: true,
        hmr: {
            host: 'vite.[DOMAIN].test',
            clientPort: 443,
            protocol: 'wss',
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true
        }),
    ],
});

[boumanb]

Works like a charm. Thank you so much.

[boumanb]

I've added the following to my .env:

APP_URL=https://${TRAEFIK_SUBDOMAIN}.${TRAEFIK_DOMAIN}
VITE_DOMAIN=vite.${TRAEFIK_DOMAIN}

My vite.config.js:

import { defineConfig, loadEnv } from 'vite';
import laravel from 'laravel-vite-plugin';


export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd(), '');

    return {
        server: {
            host: true,
            hmr: {
                host: env.VITE_DOMAIN,
                clientPort: 443,
                protocol: 'wss',
            },
        },
        plugins: [
            laravel({
                input: [
                    'resources/css/app.css',
                    'resources/js/app.js',
                ],
                refresh: true,
            }),
        ],
    };
});

The .warden/warden-env.yml:

version: "3.5"
services:
  php-fpm:
    labels:
      - traefik.enable=true
      - traefik.http.routers.${WARDEN_ENV_NAME}-vite.tls=true
      - traefik.http.routers.${WARDEN_ENV_NAME}-vite.priority=3
      - traefik.http.routers.${WARDEN_ENV_NAME}-vite.rule=Host(`vite.${TRAEFIK_DOMAIN}`)
      - traefik.http.routers.${WARDEN_ENV_NAME}-vite.service=${WARDEN_ENV_NAME}-vite
      - traefik.http.services.${WARDEN_ENV_NAME}-vite.loadbalancer.server.port=5173
      - traefik.docker.network=${WARDEN_ENV_NAME}_default

Now the vite.config.js can be included in git and other people working on the same project may differ domain if they wish.