Symfony and Laravel with Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

• A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).
• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Vite is opinionated and comes with sensible defaults out of the box, but is also highly extensible via its Plugin API and JavaScript API with full typing support.

But if you use it with Laravel or Symfony, it could be tricky to change laravel mix and webpack encore build.

Laravel in the latest versions moved to Vite as a builder for assets, details and migration you can find in official documentation.

Integration for symfony is a bit more complicated, so let’s move to steps how to do it.

First of all you need composer vite bundle for symfony. It will remove webpack encore and install vite. Manual installation is also available in github description.

Run

npm i vite vite-plugin-symfony -D

to install vite and vite plugin symfony.

// vite.config.js

import { fileURLToPath, URL } from 'url';
import { defineConfig } from 'vite';
import symfonyPlugin from 'vite-plugin-symfony';

export default defineConfig({
  server: {
    hmr: { protocol: 'ws' },
  },
  plugins: [
    symfonyPlugin(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./assets', import.meta.url)),
    },
  },
  build: {
    manifest: true,
    sourcemap: true,
    rollupOptions: {
      input: {
        app: './assets/app.js',
        theme: './assets/styles/app.css',
      },
    },
  },
});

Vite has quite a lot of plugins, that you can install to update its config and add new functions.

I’ve had an issue with that symfony waits for manifest for dev build, but vite makes it only for production build. It also could be fixed by vite-plugin-dev-manifest.

Summary
Vite is a great development tool and it helps to make development more comfortable with hmr and fast building. It works with modern frontend frameworks and pretty easy to integrate with different backend frameworks.