vite in subdirectory?

[kukac7]

hi,

i'm trying to config vite to be in a subdirectory.
the project looks like this:

backend
-app
-bootstrap
-...
-package.json
-vite.config.js
-composer.json
public
.env

the laravel project is in a subfolder, on the same level as public.

build works, but dev doesn't.
how should vite be config?

vite.config.js:

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

export default defineConfig({
	server: {
		port: 4200,
	},
	plugins: [
		laravel({
			input: [
				'resources/css/app.css',
				'resources/js/app.js',
			],
			publicDirectory: '../public',
		}),
	],
	resolve: {
		alias: {
			'@': '/resources/js'
		}
	}
});

thanks for the help!

[mattkingshott]

Hey there. This can be very frustrating, but I figured it out. Here's my setup:

First up, package.json:

{
  "scripts": {
      "dev": "vite --config resources/js/vite.config.js",
      "production": "vite build --config resources/js/vite.config.js"
  }
},

Then within the vite.config.js file:

import { defineConfig } from 'vite';

const { default : vue } = await import(`${process.cwd()}/node_modules/@vitejs/plugin-vue/dist/index.js`);
const { default : laravel } = await import(`${process.cwd()}/node_modules/laravel-vite-plugin/dist/index.js`);

let plugins = [
    laravel.default([`${process.cwd()}/resources/js/app.js`]),
    vue({ template: { transformAssetUrls: { base : null, includeAbsolute : false } } }),
];

let aliases = {
    '@' : `${process.cwd()}/resources/vue`,
    vue : `${process.cwd()}/node_modules/vue/dist/vue.esm-bundler.js`,
};

export default defineConfig({
    plugins : plugins,
    resolve : { alias : aliases },
});

It seems that when you're not in the root, you have to use import as a function and reference the current working directory.

[kukac7]

hi @mattkingshott,

thanks for the help.

maybe, i was misunderstood.
that's not the problem, i'm not in the root folder.
npm and everything is in the backend folder, i run everything from there.
the goal is to make the build public outside of the backend folder, which works.
the problem is when, i run the dev command.
localhost:4200 does not work.

[kukac7]

i'm a bit confused.
i made a virgin laravel app.
the npm run dev command gives a 404 page, but the build works.

in .env i specified APP_URL=http://laravel-vite.test.
http://laravel-vite.test works fine.

edit: ah, i see there are problems with this.
then i won't upgrade to vite yet.

laravel/vite-plugin#57