Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

asolopovas's avatar

Laravel Vite Js change of public directory

Hi Everyone, I can't seem to figure out the inner workings of vite js while trying to migrate from laravel mix. My config looks like that

export default defineConfig({
    server: {
        https: {
            key: fs.readFileSync('src/ssl/localhost.key'),
            cert: fs.readFileSync('src/ssl/localhost.crt'),
        },
        host: 'localhost',
    },
    plugins: [
        laravel(
            {
                publicDirectory: 'static',
                input: [
                    'src/scss/app.scss',
                    'src/js/app.js',
                ],
            }),
    ],
});

Where on dev server will be prebundelled app.css and app.js be located?

https://localhost:5173/@vite/client -> works
https://localhost:5173/static/css/app.css -> does not work
https://localhost:5173/static/js/app.js -> does not work
https://localhost:5173/resources/css/app.css -> does not work
https://localhost:5173/resources/js/app.js -> does not work
https://localhost:5173/css/app.css -> does not work
https://localhost:5173/js/app.js -> does not work
https://localhost:5173/static/build/assets/css/app.css -> does not work
https://localhost:5173/static/build/assets/js/app.js -> does not work
https://localhost:5173/src/scss/app.scss -> returns source file
https://localhost:5173/src/js/app.js -> returns source file,

It seem to be pulling all the static files from the directory, but not prebundled ones from dev server.

0 likes
8 replies
Sinnbeck's avatar

Why is your public directory named static? Maybe it would help if you explained your laravel project structure?

asolopovas's avatar

@Sinnbeck what if I simply want to rename public? what difference does that make? if you can switch the folder it should work regardless, otherwise whats the point of this setting? Plus I am trying to understand the way library works to be able to produce custom configs and apply these to my other non laravel projects to make sure I have same setup throughout.

Sinnbeck's avatar

@asolopovas ok sorry I asked. I'm just used to people trying to solve a problem they think they have, but don't really have. Just wanted to make sure before we spend hours reading the docs/source of vite

Sinnbeck's avatar

The publicDirectory seems to be only used when building, not when running the dev server (except for placing the hot file) Assets should be callable on the dev server url and then the path to the input. So if your vite dev server uses port 5173 and is running on localhost, it should work with https://localhost:5173/src/js/app.js

Be aware that it just shows the source file, not the compiled one. Personally I haven't found any way to inspect the compiled code when using the plug in (I currently don't think it's possible, but perhaps there is a vite flag to change how it behaves)

If you want the output files, you can use

npx vite build --watch
Sinnbeck's avatar

@asolopovas when compiled with 'build' ?

They should end up in /static/build/app.css if I recall correctly. I don't use scss myself so it's probably best to just test it out

Sinnbeck's avatar

@asolopovas ok then I'm unsure what you are asking. As I said I don't think it's possible to see the compiled js/css in dev mode unless there is a hidden setting (in vite, not laravels plugin)

Please or to participate in this conversation.