Replace Laravel Mix with Vite

[emmadesilva]

Replace Laravel Mix with Vite #1129

Abstract

As this is now the default for Laravel applications, we should also use Vite as the default frontend asset bundler for new HydePHP projects.

Internal development notes

Resources

• https://laravel.com/docs/10.x/vite
• https://laravel-news.com/webpack-to-vite
• https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-laravel-mix-to-vite

Tasks

• Remove Laravel Mix files
• Add Vite starter configuration files
• Use Vite to generate assets
• Update documentation
• Update monorepo CI
• Verify compatibility in downstream repositories
• Migrate Webpack aliases to Vite config?

[emmadesilva]

Closing as Vite is not at all a good fit for HydePHP. I have build quite a few sites with Hyde and never really had any issues with Webpack/Mix. Moving to Vite would require a special wrapper (meaning it would wrap the wrapper that wraps a wrapper -- which makes as little sense as that sentence) to transform the generated files. And at this point I don't even know the problem I'm solving. Sure Vite is the new and cool thing, but it just isn't needed here. I'm sure it's great for Laravel apps using Vue or another JS frontend and you want HMR, but here were we just want to compile some Tailwind it's just overkill. Webpack works great, and if you want lightning fast TailwindCSS compilation, just turn on the Play CDN with a single config setting!

[emmadesilva]

Reconsidering this for HydePHP v2 #1499 as Vite has now evolved from a "shiny new thing" to the de-facto standard for Laravel.

Key changes from Laravel Mix to Vite:

• Simpler configuration with Vite
• Faster development builds with HMR support
• Better production optimization
• Modern ESM-based development
• Built-in dev server at port 5173 instead of Mix's watch command

And main part: Match new Laravel syntax of npm run build. And we can use HMR as a BrowserSync replacement.

[emmadesilva]

Implemented in #2010