I decided to delay using vite until rollup version 3 is released. Currently if you run your production building you can end up with different file hashes when using assets versioning, even when the file contents haven't changed a letter. And having the assets cache cleared on every deploy is a show stopper for me right now.
I understand the idea of doing things "right", but "right" is what makes sense for each project. Laravel Mix provided a helper to copy folders and files to the public folder on building. ~~Vite does not and won't from a github issue I will find the link and post here~~ (edit: it now does).
You can add rollup scripts on vite's pipeline to mimic that feature, when I was experimenting with Vite I did that. This was my vite.config.js file.
import {execSync} from 'child_process';
import path from 'path';
import {defineConfig, splitVendorChunkPlugin} from 'vite';
import laravel from 'laravel-vite-plugin';
import svgLoader from 'vite-svg-loader';
import vue from '@vitejs/plugin-vue';
import {viteStaticCopy} from 'vite-plugin-static-copy';
const generateRoutes = function generateRoutes() {
[
'php artisan ziggy:generate --url=/ --group=app',
'php artisan ziggy:generate ./resources/js/ziggy-registration.js --url=/ --group=registration',
'php artisan ziggy:generate ./resources/js/ziggy-internal-registration.js --url=/ --group=internal-registration',
].forEach(function (command) {
console.log(command);
execSync(command, {cwd: __dirname, stdio: [0, 1, 2]});
});
};
export default defineConfig({
plugins: [
{
name: 'ziggy-pre',
enforce: 'pre',
buildStart: generateRoutes,
},
{
name: 'ziggy-hot',
enforce: 'post',
handleHotUpdate({file}) {
if (file.includes('/routes/') && file.endsWith('.php')) {
generateRoutes();
}
},
},
viteStaticCopy({
targets: [
{src: path.join(__dirname, '/resources/images'), dest: path.join(__dirname, '/public')},
{src: path.join(__dirname, '/resources/favicon'), dest: path.join(__dirname, '/public')},
{src: path.join(__dirname, '/resources/favicon/favicon.ico'), dest: path.join(__dirname, '/public')},
],
}),
laravel({
input: [
'resources/sass/app.scss',
'resources/sass/home.scss',
'resources/js/client-light.js',
'resources/js/client-dark.js',
'resources/js/registration.js',
'resources/js/internal-registration.js',
],
ssr: 'resources/js/ssr.js',
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: true,
},
compilerOptions: {
whitespace: 'preserve',
},
},
}),
svgLoader(),
],
resolve: {
alias: {
'@': path.join(__dirname, '/resources'),
ziggy: path.join(__dirname, '/vendor/tightenco/ziggy/dist/index.m.js'),
},
},
build: {
chunkSizeWarningLimit: 1024,
},
});
I also use envoy for both commiting and deploying my personal projects. Envoy is a first-party package, so in the sense of doing what seems "right" there is no harm on using it.
