Using Laravel Vite with MAMP

As seen in other posts, I use MAMP quite a bit for my web development environment. I know I can run docker, or any of the other platforms out there but they use more memory and resources that I’d prefer to devote to my dev tools.

I started a new Laravel project and wanted to use MAMP but Vite was throwing errors due to the SSL not matching out of the box.

When adding

@vite('resources/js/app.js')

to my blade file, I’d get errors including:

This request has been blocked; the content must be served over HTTPS.

I found articles saying to add –https or –host to my package json command but then I got this error:

net::ERR_SSL_VERSION_OR_CIPHER_MISMATCH

Load MAMP Pro, add your host and generate your SSL certificates. For this example, we’ll use set the host name to my-app.test, and assume you’re storing the SSL keys in the default location.

Open vite.config.js and add the following 2 lines:

import fs from 'fs';
const host = 'my-app.test';

Then add this to defineConfig section:

server: {
    host,
    hmr: { host },
    https: {
        key: fs.readFileSync(`/Applications/MAMP/Library/OpenSSL/certs/${host}.key`),
        cert: fs.readFileSync(`/Applications/MAMP/Library/OpenSSL/certs/${host}.crt`),
    },
},

You should now be able to run npm run dev and have no issues.

Sample full vite.config.js file for easy reference:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import fs from 'fs';
const host = 'my-app.text';

export default defineConfig({
    server: {
        host,
        hmr: { host },
        https: {
            key: fs.readFileSync(`/Applications/MAMP/Library/OpenSSL/certs/${host}.key`),
            cert: fs.readFileSync(`/Applications/MAMP/Library/OpenSSL/certs/${host}.crt`),
        },
    },
    plugins: [
        laravel([
            'resources/sass/app.scss',
            'resources/js/app.js',
        ]),
    ],
});