How to make Vite, Valet, and SSL works together

#laravel #vite #ssl #valet

Hey 👋

I decided to create a new project today, then I created a new laravel project and it's coming with a new assets compiler, vite.

But my project requires SSL in local development, then I needed to make the vite works together with SSL and laravel valet.

I did not find much content on the internet about it, because it's a very new release, then I decided to share the solution with you.

Let's go, first assure your domain already have SSL with the command:

cd ~/Code/your-current-project
valet secure your-current-project

Now check in the browser your domain it's working with the certificate.

Solution

The magic is you pass the key and cert to vite.config.js as you make in Nginx or Apache.

Check the file example bellow 👇

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

 const domain = "domain.test"; // add it
 const homedir = require("os").homedir(); // add it

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.js",
            ssr: "resources/js/ssr.js",
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    // add this block
    server: {
        https: {
            key: homedir + "/.config/valet/Certificates/" + domain + ".key",
            cert: homedir + "/.config/valet/Certificates/" + domain + ".crt",
        },
        host: domain,
        hmr: {
            host: domain,
        },
    },
});

I hope this article helped you!

Latest comments (4)

Scott Wraxton • Oct 23 '23

This article helped me to secure my local while using Herd. Thank you Paulo!

Here is my config

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

const domain = "your-domain.test";

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/sass/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        https: {
            key: "/Path/To/Your/Herd/config/valet/Certificates/your-domain.key",
            cert: "/Path/To/Your/Herd/config/valet/Certificates/your-domain.test.crt",
        },
        host: domain,
        hmr: {
            host: domain,
        },
    },
})