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…


This content originally appeared on DEV Community and was authored by Paulo Castellano

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!


This content originally appeared on DEV Community and was authored by Paulo Castellano


Print Share Comment Cite Upload Translate Updates
APA

Paulo Castellano | Sciencx (2022-07-01T19:34:59+00:00) How to make Vite, Valet, and SSL works together. Retrieved from https://www.scien.cx/2022/07/01/how-to-make-vite-valet-and-ssl-works-together/

MLA
" » How to make Vite, Valet, and SSL works together." Paulo Castellano | Sciencx - Friday July 1, 2022, https://www.scien.cx/2022/07/01/how-to-make-vite-valet-and-ssl-works-together/
HARVARD
Paulo Castellano | Sciencx Friday July 1, 2022 » How to make Vite, Valet, and SSL works together., viewed ,<https://www.scien.cx/2022/07/01/how-to-make-vite-valet-and-ssl-works-together/>
VANCOUVER
Paulo Castellano | Sciencx - » How to make Vite, Valet, and SSL works together. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/01/how-to-make-vite-valet-and-ssl-works-together/
CHICAGO
" » How to make Vite, Valet, and SSL works together." Paulo Castellano | Sciencx - Accessed . https://www.scien.cx/2022/07/01/how-to-make-vite-valet-and-ssl-works-together/
IEEE
" » How to make Vite, Valet, and SSL works together." Paulo Castellano | Sciencx [Online]. Available: https://www.scien.cx/2022/07/01/how-to-make-vite-valet-and-ssl-works-together/. [Accessed: ]
rf:citation
» How to make Vite, Valet, and SSL works together | Paulo Castellano | Sciencx | https://www.scien.cx/2022/07/01/how-to-make-vite-valet-and-ssl-works-together/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.