vite-plugin-symfony

Vite plugin Symfony

A Vite plugin to integrate easily Vite in your Symfony application..

• create a entrypoints.json file inside your build directory with your js/css/preload dependencies.
• reload your browser when you update your twig files

This package is intended for use with the Symfony Bundle : pentatrion/vite-bundle.

Installation

npm i vite-plugin-symfony

Create this directory structure :

├──assets
│ ├──app.js
│ ├──app.css
│...
├──public
├──composer.json
├──package.json
├──vite.config.js

Vite base config with vite 3.x

// vite.config.js
import {defineConfig} from "vite";
import symfonyPlugin from "vite-plugin-symfony";

/* if you're using React */
// import reactRefresh from "@vitejs/plugin-react-refresh";

export default defineConfig({
    plugins: [
        /* reactRefresh(), // if you're using React */

        symfonyPlugin({
            /* defaultValues */
            servePublic: true,
            publicDirectory: 'public',
            buildDirectory: 'build',

            /* boolean or array of paths for your twig templates */
            refresh: ["templates/**/*.twig"],

            /** If you set server.host: '0.0.0.0' in your vite.config.js
             * you have to set 'localhost' */
            viteDevServerHostname: null
        }),
    ],

    build: {
        rollupOptions: {
            input: {
              app: "./assets/app.js" /* relative to the root option */
            },
        },
    }
});

and your package.json :

{
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "vite": "^3.0",
        "vite-plugin-symfony": "^0.6.0"
    }
}

From the options publicDirectory and buildDirectory, vite-plugin-symfony will automatically determine the right configuration for vite:

• base
• build.outDir

If you have a specific need you can still define your configuration on top.

With pentatrion/vite-bundle

Although it has no special dependencies, this package is intended for use with the Symfony Bundle : pentatrion/vite-bundle. This bundle provides two twig functions to load your js/css files into your templates. It also acts as a proxy by forwarding requests that are not intended for it to the Vite dev server.

Migrations

If you use previous version of the plugin consult migration page.

Todo

• plugin option to preload dynamic imports

In depth

default js entryPoint

{
  "assets/welcome.js": {
    "file": "assets/welcome.e107d3d9.js",
    "src": "assets/welcome.js",
    "isEntry": true
  },
}

js entryPoint with chunk entrypoints -> by default with vite until 2.8 -> with plugin

import { splitVendorChunkPlugin } from 'vite'

export default defineConfig({
    plugins: [
        symfonyPlugin(),
        splitVendorChunkPlugin(),
    ]
});

{
  "assets/page-vue.js": {
    "file": "assets/pageVue.ef10a2a2.js",
    "src": "assets/page-vue.js",
    "isEntry": true,
    "imports": [
      "_vendor.d13b263d.js"
    ]
  },
  "_vendor.d13b263d.js": {
    "file": "assets/vendor.d13b263d.js"
  }
}

we need to preload imports.

js and Dynamic imports

{
  "assets/page-imports.js": {
    "file": "assets/pageImports.74302e69.js",
    "src": "assets/page-imports.js",
    "isEntry": true,
    "dynamicImports": [
      "assets/lib/async-dep.js"
    ]
  },
  "assets/lib/async-dep.js": {
    "file": "assets/async-dep.8bc0df8e.js",
    "src": "assets/lib/async-dep.js",
    "isDynamicEntry": true
  }
}

css entry point

{
  "assets/theme.scss": {
    "file": "assets/theme.2d6210b2.css",
    "src": "assets/theme.scss",
    "isEntry": true
  }
}