EACCES: permission denied, mkdir '/root/.vite-plugin-mkcert'

userV4T81 0
Viewed 22

I'm trying to set up an environment in which vite's hot-refresh is available through traefik's reverse proxy. For this, I noticed that it is necessary to add a certificate in the vite settings vite.config.js.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
// import mkcert from 'vite-plugin-mkcert';

export default defineConfig({
    server: {
        // https: true,
        host: '0.0.0.0',
        hmr: {
            host: '0.0.0.0'
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        // mkcert()
    ],
});

The code above works correctly for localhost. When I use vite-plugin-mkcert I get the following error with npm run dev:

error when starting dev server: Error: EACCES: permission denied, mkdir '/root/.vite-plugin-mkcert'

I tried installing the package using --unsafe-perm=true --allow-root options, but it didn't work.

The whole environment is inside docker and other packages don't have the same problem. My container uses the root user.

mkcert traefik vite npm docker
1 Answers

Solved in the following way:

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

export default defineConfig({
    server: {
        https: {
            key: fs.readFileSync('./certs/local-key.pem'),
            cert: fs.readFileSync('./certs/local-cert.pem'),
        },
        host: '0.0.0.0',
        hmr: {
            host: 'template.docker.localhost'
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Now I don't need the package anymore and hot-reload works with reverse proxy.

userV4T810
Related