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

Question

I'm trying to set up an environment in which vite's hot reload 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.

Answer 1

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.

Answer 2

Include your host without http/https, make sure that you have installed mkcert.

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

export default defineConfig({
  plugins: [
    mkcert(),
    laravel({
        input: 'resources/js/app.jsx',
    }),
    react(),
  ],
  server: { 
    host:"testserver.dev",
    port: 8000,
    https:true,
 }, 
});

After setting up you need to run npm with https

npm run dev -- --https