Setting Up Laravel Vite with Indigo SSL

This guide will walk you through the necessary steps to get Laravel Vite working with Indigo. By the end, your Laravel Vite setup will work over HTTPS with Indigo.

Prerequisites

• Laravel installed in your project.

• Your site is accessible via an Indigo local domain, e.g., https://mysite.test.

Edit vite.config.js#

Indigo stores its trusted development SSL certificates in:

~/.indigo/ssl/key.pem
~/.indigo/ssl/cert.pem

We’ll configure Vite to use these for HTTPS.

Open your Laravel project’s vite.config.js. At the top of the file, import the required Node.js modules and provide your site name:

import fs from 'fs';
import { resolve } from 'path';
import { homedir } from 'os';

const host = 'mysite.test'; // replace with your Indigo site domain

Configure Vite’s Development Server#

Replace the server section in your Vite config with the following:

server: {
    host,
    hmr: { host },
    https: {
        key: fs.readFileSync(resolve(homedir(), '.indigo/ssl/key.pem')),
        cert: fs.readFileSync(resolve(homedir(), '.indigo/ssl/cert.pem')),
    },
},

Run Vite#

From your project root, run:

npm run dev

Visit your site at https://mysite.test. With this config, your Laravel Vite development environment should run securely using the Indigo SSL certificate.

Troubleshooting#

Vite fails to start or HMR doesn’t work: Ensure the host value matches your Indigo site domain exactly.

Changes not reflecting in the browser: Clear Vite’s cache by stopping the dev server and running npm run dev again.