DEV Community

Paulo Castellano
Paulo Castellano

Posted on

10 3

How to make Vite, Valet, and SSL works together

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
Enter fullscreen mode Exit fullscreen mode

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,
        },
    },
});
Enter fullscreen mode Exit fullscreen mode

I hope this article helped you!

Image of Timescale

๐Ÿš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsโ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (4)

Collapse
 
pripun profile image
Pripun โ€ข

hi bro you save my day :D thanks

Collapse
 
paulocastellano profile image
Paulo Castellano โ€ข

๐Ÿ‘Š

Collapse
 
wraxton profile image
Scott Wraxton โ€ข

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,
        },
    },
})
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mikeill profile image
Mike iLL Kilmer โ€ข

Nice share! I'm seeing error when starting dev server:
Error: Dynamic require of "os" is not supported

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more