Moving vite config to subfolder?

I want to use Vite together with my Laravel 9 application. I am using https://github.com/laravel/vite-plugin to connect them.

My folder structure is like this:

/resources /vite /package.json /vite.config.js /app.js /node_modules

Usually Vite is in the root directory. However, I want to have Laravel mix for now in the root directory and vite in a subdirectoy. I want to slowly migrate from laravel.mix / Vue2 to Vite/Vue3 and rebuild my entire dashboard, so this is more convinient for me.

The command

npm run build

works fine. However,

npm run dev

is not working. The problem is, that the "hot" file is not generated in the /public directory.

This is my standard setup:

laravel( {
        input: [
            // 'resources/css/app.css',
            './app.js',
        ]
    }),

With this configuration, vite tries to generate the hot file in "/resources/vite/public/hot". When I try to adjust the path like this:

laravel( {
        input: [
            // 'resources/css/app.css',
            './app.js',
        ],
        publicDirectory: '../../public',
    }),

I get this error:

    node:internal/fs/utils:346 throw err; ^

    Error: EISDIR: illegal operation on a directory, open '../../public/hot' at Object.openSync (node:fs:584:3) at Object.writeFileSync (node:fs:2201:35) at Server. (/home/adam/www/personal-projects/memberportal/resources/vite/node_modules/laravel-vite-plugin/dist/index.cjs:135:29) at Object.onceWrapper (node:events:627:28) at Server.emit (node:events:525:35) at emitListeningNT (node:net:1775:10) at process.processTicksAndRejections (node:internal/process/task_queues:81:21) { errno: -21, syscall: 'open', code: 'EISDIR', path: '../../public/hot' }

    Node.js v19.4.0

How to change the path?

LaryAI

2 years ago

Best Answer

Level 58

To change the path for the hot file generated by Vite, you can modify the vite.config.js file. Here's how you can do it:

Open the vite.config.js file located in the /vite directory.
Inside the laravel() function, add the publicDirectory option and set it to the desired path relative to the vite.config.js file. For example, if you want the hot file to be generated in the /public directory, you can set it like this:

laravel({
  input: [
    // 'resources/css/app.css',
    './app.js',
  ],
  publicDirectory: '../public',
}),

Save the vite.config.js file.

Now, when you run npm run dev, Vite will generate the hot file in the specified publicDirectory path.

Note: Make sure the specified path is correct and accessible from the location of the vite.config.js file.

1 like

NielsNumbers

2 years ago

Level 10

Ah it works now, during my tests I had a "hot" folder generated upps :)

Please or to participate in this conversation.