Symfony & Vite

https://symfony-vite.pentatrion.com
Admin
Symfony & Vite is a suite consisting of a Vite plugin and a Symfony bundle that provides seamless...
Tokens:26,772
Snippets:301
Trust Score:5.2
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install and run basic example

Source: https://symfony-vite.pentatrion.com/guide/examples

Commands to clone the repository, install dependencies, and start the development server for the basic playground.

```bash
git clone https://github.com/lhapaipai/symfony-vite-dev.git
cd symfony-vite-dev

## Install vite-bundle/vite-plugin-symfony dependencies
make install

# if you want to test the features in one playground
# - "basic" is the principal playground
# - "stimulus-basic" is for the core feature of stimulus
# - "stimulus" is for Symfony UX
# - other playgrounds are for specific use cases

cd playground/<your-playground>
symfony composer install


# launch the development environment for the `basic` playground.
symfony local:server:start
npm run dev
# from your browser go to: https://127.0.0.1:8000/

# if you want to install all the playgrounds in one time (for each of them)
# - composer install
# - pnpm run build
make install-playgrounds
```

--------------------------------

### Development Environment Setup Commands

Source: https://symfony-vite.pentatrion.com/extra/contribute

Commands to clone the repository, install dependencies, and start the development server for the basic playground.

```bash
git clone https://github.com/lhapaipai/symfony-vite-dev.git
cd symfony-vite-dev


## Install vite-bundle/vite-plugin-symfony dependencies
make install


## Install playgrounds (npm i/composer i for each of them)
make install-playgrounds

# launch the development environment for the `basic` playground.
cd playground/basic
symfony local:server:start
npm run dev

# from your browser go to: https://127.0.0.1:8000/
```

--------------------------------

### Restore Assets and Install Vite Bundle

Source: https://symfony-vite.pentatrion.com/extra/migration-webpack-encore

Restore the backed-up assets and install the Vite bundle.

```bash
mv assets.bak assets
mv package.json.bak package.json
mv package-lock.json.bak package-lock.json
composer require pentatrion/vite-bundle
```

--------------------------------

### Install Svelte UX

Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux

Install the Svelte UX package via Composer and NPM.

```bash
composer require symfony/ux-svelte
npm i --force
```

--------------------------------

### Initialize Symfony Project

Source: https://symfony-vite.pentatrion.com/guide/installation

Commands to create a new Symfony project and install necessary bundles.

```bash
symfony new symfony-app

cd symfony-app
composer install

composer require symfony/twig-bundle
composer require --dev symfony/maker-bundle

./bin/console make:controller
# Choose a name for your controller class (e.g. FierceElephantController):
# > WelcomeController
```

--------------------------------

### Install Symfony UX React

Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux

Install the UX React package and its dependencies.

```bash
composer require symfony/ux-react
npm i --force
```

--------------------------------

### Run development server with custom certificates

Source: https://symfony-vite.pentatrion.com/guide/tips

Start the development server with HTTPS enabled.

```bash
npm run dev
symfony serve
```

--------------------------------

### Start Development Servers

Source: https://symfony-vite.pentatrion.com/guide/installation

Commands to run the Symfony local server and the Vite development server.

```bash
# start your Symfony local Web server (listening port 8000 by default)
symfony serve

# start your vite dev server (listening port 5173 by default)
npm run dev
```

--------------------------------

### Install JavaScript Dependencies

Source: https://symfony-vite.pentatrion.com/guide/installation

Install project dependencies defined in package.json.

```bash
# install your js dependencies (vite and vite-plugin-symfony)
npm install
```

--------------------------------

### Build Artifacts With Legacy Plugin

Source: https://symfony-vite.pentatrion.com/in-depth/preload

Example entrypoints.json and manifest.json files for a build using the Legacy plugin.

```json
// entrypoints.json
{
  "base": "/build/",
  "entryPoints": {
    "pageWelcome-legacy": {
      "css": [],
      "dynamic": [],
      "js": [
        "/build/assets/pageWelcome-legacy-TXGWt7m6.js"
      ],
      "legacy": false,
      "preload": [
        "/build/assets/shared-legacy-Gun4aQJC.js"
      ]
    },
    "pageWelcome": {
      "css": [],
      "dynamic": [],
      "js": [
        "/build/assets/pageWelcome--4K79RzD.js"
      ],
      "legacy": "pageWelcome-legacy",
      "preload": [
        "/build/assets/shared-5Hh7diCN.js"
      ]
    },
    "theme-legacy": {
      "css": [],
      "dynamic": [],
      "js": [
        "/build/assets/theme-legacy-LruLDnf0.js"
      ],
      "legacy": false,
      "preload": []
    },
    "theme": {
      "css": [
        "/build/assets/theme-gOv5yEUY.css"
      ],
      "dynamic": [],
      "js": [],
      "legacy": "theme-legacy",
      "preload": []
    },
    "polyfills-legacy": {
      "css": [],
      "dynamic": [],
      "js": [
        "/build/assets/polyfills-legacy-im0EAdDu.js"
      ],
      "legacy": false,
      "preload": []
    }
  },
  "legacy": true,
  "metadatas": {},
  "version": ["6.5.0", 6, 5, 0],
  "viteServer": null
}
```

```json
// manifest.json
{
  "_shared-5Hh7diCN.js": {
    "file": "assets/shared-5Hh7diCN.js",
    "name": "shared"
  },
  "_shared-legacy-Gun4aQJC.js": {
    "file": "assets/shared-legacy-Gun4aQJC.js",
    "name": "shared"
  },
  "assets/page/welcome/index-legacy.js": {
    // legacy browsers only load this script
    "file": "assets/pageWelcome-legacy-TXGWt7m6.js",
    "isEntry": true,
    "src": "assets/page/welcome/index-legacy.js"
  },
  "assets/page/welcome/index.js": {
    // modern browsers only load this script
    "file": "assets/pageWelcome--4K79RzD.js",
    "isEntry": true,
    "src": "assets/page/welcome/index.js"
  },
  "assets/theme-legacy.scss": {
    "assets": [
      "assets/topography-iIXb0l18.svg"
    ],
    "file": "assets/theme-legacy-LruLDnf0.js",
    "isEntry": true,
    "src": "assets/theme-legacy.scss"
  },
  "assets/theme.scss": {
    "file": "assets/theme-gOv5yEUY.css",
    "isEntry": true,
    "src": "assets/theme.scss"
  },
  "vite/legacy-polyfills-legacy": {
    // polyfill loaded only once
    "file": "assets/polyfills-legacy-im0EAdDu.js",
    "isEntry": true,
    "src": "vite/legacy-polyfills-legacy"
  }
}
```

--------------------------------

### Build Artifacts Without Legacy Plugin

Source: https://symfony-vite.pentatrion.com/in-depth/preload

Example entrypoints.json and manifest.json files for a standard Vite build.

```json
// entrypoints.json
{
  "base": "/build/",
  "entryPoints": {
    "app": {
      "css": [
        "/build/assets/app-Cz4zGhbH.css"
      ],
      "dynamic": [
        "/build/assets/my-async-dep-BSHE5Y3H.js"
      ],
      "js": [
        "/build/assets/app-BBraN-Dm.js"
      ],
      "legacy": false,
      "preload": [
        "/build/assets/shared-5Hh7diCN.js"
      ]
    }
  },
  "legacy": false,
  "metadatas": {},
  "version": ["6.5.0", 6, 5, 0],
  "viteServer": null
}
```

```json
// manifest.json
{
  "_shared-5Hh7diCN.js": {
    "file": "assets/shared-5Hh7diCN.js",
    "name": "shared"
  },
  "index.html": {
    "file": "assets/app-bXh9WZ8a.js",
    "name": "index",
    "src": "index.html",
    "isEntry": true,
    "imports": [
      /* files that need to be preloaded */
      "_shared-5Hh7diCN.js"
    ],
    "dynamicImports": [
      /* files that should not be preloaded */
      "src/my-async-dep.ts"
    ],
    "css": [
      "assets/index-Cz4zGhbH.css"
    ],
    /* assets are not preloaded */
    "assets": [
      "assets/typescript-EnIy2PE5.svg"
    ]
  },
  "src/my-async-dep.ts": {
    "file": "assets/my-async-dep-BSHE5Y3H.js",
    "name": "my-async-dep",
    "src": "src/my-async-dep.ts",
    "isDynamicEntry": true
  },
  "src/typescript.svg": {
    "file": "assets/typescript-EnIy2PE5.svg",
    "src": "src/typescript.svg"
  }
}
```

--------------------------------

### View rendered HTML output

Source: https://symfony-vite.pentatrion.com/guide/custom-attributes.html

Example of the resulting HTML tag after attributes have been applied.

```html
<script
  type="module"
  src="/build/assets/app-dc399f15.js"
  foo="bar-modified"
  hello="world"
  nonce="lookup nonce"
></script>
```

--------------------------------

### Install Stimulus Bundle

Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux

Install the required Stimulus bundle and remove the Webpack-compatible bridge.

```bash
composer require symfony/stimulus-bundle

# remove the webpack-compatible @symfony/stimulus-bridge
npm rm @symfony/stimulus-bridge
```

--------------------------------

### Example entrypoints.json for CDN

Source: https://symfony-vite.pentatrion.com/guide/cdn

The generated entrypoints.json file after configuring the CDN base URL and integrity hashes.

```json
{
  "base": "http://cdn.your-cdn-provider.com/",

  "entryPoints": {

    "app": {
      "assets": [],
      "css": [],
      "js": ["http://cdn.your-cdn-provider.com/assets/app-dc399f15.js"],
      "legacy": false,
      "preload": []
    }
  },
  "legacy": false,
  "metadatas": {
    "http://cdn.your-cdn-provider.com/assets/app-dc399f15.js": {
      "hash": "sha256-k/0PccRNhijyiBqBUXa8Uw3GQdPxOk1iPIfqarKGEY0="
    }
  },
  "version": "6.0.0",
  "viteServer": null,
}
```

--------------------------------

### Install Pentatrion Vite Bundle

Source: https://symfony-vite.pentatrion.com/extra/manual-installation

Use Composer to add the bundle to your Symfony project.

```bash
composer require pentatrion/vite-bundle
```

--------------------------------

### Legacy Script Injection Example

Source: https://symfony-vite.pentatrion.com/in-depth/preload

An example of how legacy scripts and polyfills are injected into the HTML body.

```html
  <body>
    <script nomodule>/** SAFARI10_NO_MODULE_FIX_INLINE_CODE */</script>
    <script nomodule crossorigin src="/build/assets/polyfills-legacy-im0EAdDu.js" id="vite-legacy-polyfill" ></script>
    <script
      nomodule
      data-src="/build/assets/pageWelcome-legacy-TXGWt7m6.js"
      id="vite-legacy-entry-page-welcome"
      crossorigin
      class="vite-legacy-entry"
    >
      System.import(
        document.getElementById('vite-legacy-entry-page-welcome').getAttribute('data-src')
      );
    </script>
  </body>
</html>
```

--------------------------------

### Generate custom certificates with mkcert

Source: https://symfony-vite.pentatrion.com/guide/tips

Install and generate local development certificates using mkcert.

```bash
mkcert -install
mkcert -key-file certs/vite.key.pem -cert-file certs/vite.crt.pem localhost 127.0.0.1
```

--------------------------------

### Basic vite.config.js setup

Source: https://symfony-vite.pentatrion.com/guide/configuration

Standard configuration for the Vite plugin in a Symfony project.

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

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

    build: {
        rollupOptions: {
            input: {
                /* relative to the root option */
                app: "./assets/app.ts",

                /* you can also provide [s]css files */
                theme: "./assets/theme.scss"
            },
        }
    },
});
```

--------------------------------

### Install Symfony UX Vue

Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux

Install the UX Vue package and its dependencies.

```bash
composer require symfony/ux-vue
npm i --force
```

--------------------------------

### Create a React Component

Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux

Example of a simple React component for Symfony UX.

```jsx
// assets/react/controllers/Hello.jsx
import React from 'react';

export default function (props) {
    return <div>Hello {props.fullName}</div>;
}
```

--------------------------------

### Example Application Source Code

Source: https://symfony-vite.pentatrion.com/in-depth/preload

JavaScript source code used for documentation purposes, demonstrating module imports and dynamic loading.

```javascript
// assets/app.js
import { foo } from "./shared.js";
console.log(foo);

window.addEventListener("DOMContentLoaded", () => {
  import("./my-async-dep.ts").then(({ hello }) => {
    console.log(hello);
  });
});
```

--------------------------------

### Link Header Preload Configuration

Source: https://symfony-vite.pentatrion.com/in-depth/preload

Example of using the Link header to trigger early requests for preloaded assets.

```bash
Link: </assets/app-bXh9WZ8a.js>; rel="modulepreload"; crossorigin, </assets/shared-5Hh7diCN.js>; rel="modulepreload"; crossorigin
```

--------------------------------

### Initialize Stimulus Application

Source: https://symfony-vite.pentatrion.com/stimulus/reference

Demonstrates the helper function for starting a Stimulus application and the manual equivalent using the Hotwired Stimulus library and virtual controller imports.

```javascript
import { startStimulusApp } from "vite-plugin-symfony/stimulus/helpers";
const app = startStimulusApp();
```

```javascript
import { Application } from "@hotwired/stimulus";
const app = Application.start();

/**
 * virtual import transforms your controllers.json file into javascript
 * equivalent to
 * const thirdPartyControllers = [
 *    {
 *        identifier: "welcome",
 *        enabled: true,
 *        fetch: "eager",
 *        controller: WelcomeController
 *    }
 * ]
 */
import thirdPartyControllers from "virtual:symfony/controllers.json";
import { createLazyController } from "vite-plugin-symfony/stimulus/helpers";

for (const controllerInfos of thirdPartyControllers) {
  if (controllerInfos.fetch === "lazy") {
    app.register(controllerInfos.identifier, createLazyController(controllerInfos.controller));
  } else {
    app.register(controllerInfos.identifier, controllerInfos.controller);
  }
}
```

--------------------------------

### Generated JavaScript Asset Example

Source: https://symfony-vite.pentatrion.com/in-depth/preload

Example of how dynamic imports are handled in generated JavaScript files.

```javascript
// assets/app-bXh9WZ8a.js

// we find our files that need to be preloaded that are directly
// imported into the js code.
import { foo } from "./shared-5Hh7diCN.js";
console.log(foo);

// our dynamic imports are wrapped in a `preloadResources` function
// that does nothing special.
window.addEventListener("DOMContentLoaded", () => {
  preloadResources(async () => {
    const { hello } = await import("./my-async-dep-BSHE5Y3H.js");
    return { hello };
  }, []).then(({ hello }) => {
    console.log(hello);
  });
});
```

--------------------------------

### Configure Symfony Vite bundle

Source: https://symfony-vite.pentatrion.com/reference/vite-bundle

Example configuration structure for the pentatrion_vite bundle in Symfony.

```yaml
pentatrion_vite:
  public_directory: public
  build_directory: build
  throw_on_missing_entry: true
  # etc...
```

--------------------------------

### Vite configuration for manual chunking

Source: https://symfony-vite.pentatrion.com/guide/performance

Example Vite configuration to split dependencies like Vue into separate chunks.

```javascript
// vite.config.js
import symfonyPlugin from 'vite-plugin-symfony';
import vuePlugin from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vuePlugin(),
    symfonyPlugin(),
  ],

  build: {
    rollupOptions: {
      input: {
        "app": "./assets/app.js",
      },
      output: {
        manualChunks: {
          vue: ['vue']
        }
      }
    },

  },
});
```

--------------------------------

### Install Stimulus Bundle

Source: https://symfony-vite.pentatrion.com/stimulus/installation

Install the bundle via Composer. The @symfony/stimulus-bridge package is added automatically but can be ignored.

```bash
composer require symfony/stimulus-bundle
```

--------------------------------

### Configure Vite for Svelte

Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux

Setup vite.config.js and svelte.config.js for Svelte integration.

```javascript
// vite.config.js
import { defineConfig } from 'vite'

import symfonyPlugin from 'vite-plugin-symfony';
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [
    svelte(), 
    symfonyPlugin({
      stimulus: true
    }),
  ],
  build: {
    rollupOptions: {
      input: {
        "app": "./assets/app.js",
      }
    },
  },
});
```

```javascript
// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
```

--------------------------------

### Install Vite Plugin

Source: https://symfony-vite.pentatrion.com/

Install the required Vite plugin for Symfony as a development dependency.

```bash
npm i -D vite-plugin-symfony
```

--------------------------------

### Configure Vite for React

Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux

Setup vite.config.js with the Symfony and React plugins.

```javascript
// vite.config.js
import { defineConfig } from 'vite'

import symfonyPlugin from 'vite-plugin-symfony';
import reactPlugin from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    reactPlugin(), 
    symfonyPlugin({
      stimulus: true
    }),
  ],
  build: {
    rollupOptions: {
      input: {
        "app": "./assets/app.js",
      }
    },
  },
});
```

--------------------------------

### Asset Import Resolution

Source: https://symfony-vite.pentatrion.com/reference/vite-plugin-symfony

Example of how asset imports are resolved by the Vite server.

```javascript
import logo from './assets/logo.svg'
// see https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/asset.ts#L289

console.log(logo);
// '/build/assets/logo.svg'
```

--------------------------------

### Define Stimulus Controller

Source: https://symfony-vite.pentatrion.com/stimulus/installation

Example of a basic Stimulus controller implementation.

```js
// ./assets/controllers/welcome_controller.js
import { Controller } from "@hotwired/stimulus";

import.meta.stimulusFetch = "eager";
import.meta.stimulusIdentifier = "welcome";

export default class controller extends Controller {

  static targets = ["title"];
  static values = {
    name: String,
  };
  connect() {
    this.titleTarget.textContent = `hello ${this.nameValue}`;
  }
}
```

--------------------------------

### Generated cache file structure

Source: https://symfony-vite.pentatrion.com/guide/performance

Example of the auto-generated PHP cache file.

```php
// var/cache/prod/pentatrion_vite.cache.php
// This file has been auto-generated by the Symfony Cache Component.
return [
  [
    '_default.entrypoints' => 0,
    '_default.manifest' => 1,
  ],
  [
    0 => [
        'base' => '/build/',
        'entryPoints' => [
            'app' => ...,
        ],
        'legacy' => false,
        'metadatas' => [],
        'version' => '5.0.0',
        'viteServer' => null,
    ],
    1 => [
        'assets/app.js' => ...,
    ],
  ]
];
```

--------------------------------

### Implement Vite assets in Twig blocks

Source: https://symfony-vite.pentatrion.com/guide/twig-functions

A complete example showing how to include entry tags and conditionally add scripts based on the Vite mode.

```twig
{% block stylesheets %}
  {{ vite_entry_link_tags('app') }}
{% endblock %}

{% block javascripts %}
  {{ vite_entry_script_tags('app') }}
  {% if vite_mode() == 'dev' %}
    <script type="module" src="http://localhost:5173/@vite-plugin-checker-runtime-entry"></script>
  {% endif %}
{% endblock %}
```

--------------------------------

### Twig and rendered output examples

Source: https://symfony-vite.pentatrion.com/guide/getting-started

Twig function usage and the resulting HTML output for development and production modes.

```twig
{{ vite_entry_script_tags('app') }}
{{ vite_entry_link_tags('app') }}
```

```html
<script type="module" src="http://[::1]:5173/@vite/client"></script>
<script type="module" src="http://[::1]:5173/build/src/app.ts"></script>
```

```html
<script type="module" crossorigin src="/assets/app-6f6529cf.js"></script>
<link rel="stylesheet" href="/assets/app-3443e464.css">
```

--------------------------------

### Integrate vite-plugin-static-copy

Source: https://symfony-vite.pentatrion.com/reference/vite-bundle

Example of using vite-plugin-static-copy alongside the Symfony plugin to handle static assets not referenced in the manifest.

```javascript
import { defineConfig } from 'vite'

import symfonyPlugin from 'vite-plugin-symfony';
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: "assets/images/angular.svg",
          dest: "static"
        }
      ]
    }),
    symfonyPlugin(),
  ],
  // ...
});
```

--------------------------------

### Rendered output in production environment

Source: https://symfony-vite.pentatrion.com/in-depth/bundle

The bundle resolves entry points to static files with hashed filenames for production deployment.

```html
<!-- vite_entry_link_tags('app') -->
<link rel="stylesheet" href="/build/app.[hash].css" />
<link rel="modulepreload" href="/build/vendor.[hash].js" />

<!-- vite_entry_script_tags('app') -->
<script src="/build/app.[hash].js" type="module"></script>
```

--------------------------------

### Rendered output in development environment

Source: https://symfony-vite.pentatrion.com/in-depth/bundle

The bundle injects the Vite client and entry points pointing to the local development server.

```html
<!--Nothing with vite_entry_link_tags('app') -->

<!-- vite_entry_script_tags('app') -->
<script src="http://localhost:5173/build/@vite/client" type="module"></script>
<script src="http://localhost:5173/build/app.js" type="module"></script>
```

--------------------------------

### Configure bundle settings

Source: https://symfony-vite.pentatrion.com/guide/multiple-configurations

Define multiple configurations in the bundle's YAML file to map build directories.

```yaml
pentatrion_vite:

    default_config: config1
    configs:
        config1:
            build_directory: build-1
            script_attributes:
                # you can define attributes that you want to apply
                # for all your script tags

            link_attributes:
                # you can define attributes that you want to apply
                # for all your link tags

        config2:
            build_directory: build-2
            script_attributes:
                # etc

            link_attributes:
                # etc
```

--------------------------------

### Project Directory Structure

Source: https://symfony-vite.pentatrion.com/extra/manual-installation

Recommended layout for assets and configuration files in the project root.

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

--------------------------------

### Build Assets for Production

Source: https://symfony-vite.pentatrion.com/guide/installation

Command to compile JavaScript and CSS files for production deployment.

```bash
# build your js/css files
npm run build
```

--------------------------------

### Build and cache warm-up commands

Source: https://symfony-vite.pentatrion.com/guide/performance

Commands to build assets and warm up the Symfony cache.

```bash
# build your js files
# and also generates `public/build/entrypoints.json` and `public/build/manifest.json`
npm run build

# clear the cache and perform a warm-up
# important this step must take place after the `npm run build`
symfony console cache:clear
```

--------------------------------

### startStimulusApp()

Source: https://symfony-vite.pentatrion.com/stimulus/reference

Initializes a new Stimulus application and automatically preloads controllers defined in the ./assets/controllers.json configuration file.

```APIDOC
## startStimulusApp()

### Description
Creates a Stimulus application instance and registers all controllers defined in the project's `controllers.json` file.

### Usage
```javascript
import { startStimulusApp } from "vite-plugin-symfony/stimulus/helpers";
const app = startStimulusApp();
```
```

--------------------------------

### Remove Webpack Dependencies

Source: https://symfony-vite.pentatrion.com/extra/migration-webpack-encore

Remove Webpack and Babel dependencies no longer required for the Vite setup.

```bash
npm rm @symfony/webpack-encore webpack webpack-cli webpack-notifier

# you probably won't need those dependencies either
npm rm @babel/core @babel/preset-env core-js regenerator-runtime
```

--------------------------------

### Define Vite configuration files

Source: https://symfony-vite.pentatrion.com/guide/multiple-configurations

Create separate configuration files for each build, ensuring unique base paths and output directories.

```javascript
// vite.config1.config.js
import { defineConfig } from 'vite'
import symfonyPlugin from 'vite-plugin-symfony';

export default defineConfig({
  base: '/build-1/',

  plugins: [
    symfonyPlugin(),
  ],

  build: {
    outDir: 'public/build-1',

    rollupOptions: {
      input: {
        "welcome": "./assets/page/welcome/index.js",
        "theme": "./assets/theme.scss"
      },
    },
  }
});
```

```javascript
// vite.config2.config.js
import { defineConfig } from 'vite'
import symfonyPlugin from 'vite-plugin-symfony';

export default defineConfig({
  base: '/build-2/',

  plugins: [
    symfonyPlugin(),
  ],

  build: {
    outDir: 'public/build-2',
    rollupOptions: {
      input: {
        "other": "./assets/page/other/index.js",
      },
    },
  }
});
```

--------------------------------

### Clone Development Playground

Source: https://symfony-vite.pentatrion.com/stimulus/installation

Commands to clone and set up the development repository for testing Stimulus implementations.

```bash
git clone https://github.com/lhapaipai/symfony-vite-dev.git
cd symfony-vite-dev

# install vite-bundle dependencies
# build vite-plugin-symfony
make install

cd playground/stimulus-basic
# or for Symfony UX
cd playground/stimulus

composer install
symfony serve
pnpm dev
```

--------------------------------

### HTML Preload Tag Configuration

Source: https://symfony-vite.pentatrion.com/in-depth/preload

HTML structure demonstrating manual preload configuration.

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- the crossorigin attribute is present by default in all script and link tags -->
    <script type="module" crossorigin src="/assets/app-bXh9WZ8a.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-Cz4zGhbH.css">
  </head>
  <body>
    ...
  </body>
</html>
```

--------------------------------

### Configure Vite

Source: https://symfony-vite.pentatrion.com/extra/migration-webpack-encore

Define the entry point and symfony plugin in vite.config.js.

```diff
// vite.config.js
+export default {
+    // ...
+    plugins: [
+      symfonyPlugin()
+    ],
+    build: {
+        rollupOptions: {
+            input: {
+                app: "./assets/app.js"
+            },
+        },
+    },
+};
```

--------------------------------

### Twig asset function usage

Source: https://symfony-vite.pentatrion.com/guide/troubleshooting

Example of referencing an asset in a Twig template that may fail if the file is inlined by Vite.

```twig
<img src="{{ asset('assets/images/logo-symfony-less-4kb.png') }}">
```

--------------------------------

### Define Vite entry point in configuration

Source: https://symfony-vite.pentatrion.com/guide/getting-started

Configuring the application entry point within the vite.config.js file.

```js
// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        app: './path/to/app.js',
      }
    },
  },
})
```

--------------------------------

### Registering Multiple Controllers

Source: https://symfony-vite.pentatrion.com/stimulus/reference

Use import.meta.glob to register all controllers in a directory simultaneously.

```javascript
import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers";

registerControllers(
  app,
  import.meta.glob(
    "./controllers/*_controller.js",
    {
      // remember to add the suffix "?stimulus"
      query: "?stimulus",

      // dynamic imports and `Lazy-`controllers are managed internally, in all
      // cases you must specify eager to true to avoid nesting promises.
      eager: true,
    },
  ),
);
```

--------------------------------

### import.meta.stimulusFetch

Source: https://symfony-vite.pentatrion.com/stimulus/reference

Configures the loading strategy for the Stimulus controller.

```APIDOC
## import.meta.stimulusFetch

### Description
Sets how your controller will load. With 'lazy', your controller will be built in a separate file that will only be loaded when an element of the page's DOM explicitly references it.

### Type
"eager" | "lazy"

### Default Value
"eager"
```

--------------------------------

### Application entry point

Source: https://symfony-vite.pentatrion.com/guide/performance

Standard Vue application entry point.

```javascript
// assets/app.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
```

--------------------------------

### Import Asset Directories

Source: https://symfony-vite.pentatrion.com/guide/assets

Use import.meta.glob in your JavaScript entry point to ensure assets in a directory are processed and included in the manifest.

```js
// assets/app.js
import.meta.glob([
    './images/**'
]);
```

--------------------------------

### Standard Vite index.html entry point

Source: https://symfony-vite.pentatrion.com/guide/getting-started

The default HTML entry point used by Vite to load application scripts.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vite Project</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>
```

--------------------------------

### Configure package.json scripts

Source: https://symfony-vite.pentatrion.com/guide/multiple-configurations

Use concurrently to run multiple Vite configurations in development and chain build commands for production.

```json
{
  "dependencies": {
    "concurrently": "^8",
  },
  "scripts": {
    "dev": "concurrently \"vite -c vite.config1.config.js\" \"vite -c vite.config2.config.js\"",
    "build": "vite build -c vite.config1.config.js && vite build -c vite.config2.config.js"
  }
}
```

--------------------------------

### Preload behavior: none

Source: https://symfony-vite.pentatrion.com/guide/performance

HTML output when preload is set to none.

```html
<link rel="stylesheet" href="/build/assets/app-05a88f8a.css" crossorigin>
<script type="module" src="/build/assets/app-1b490458.js" crossorigin></script>
```

--------------------------------

### Bootstrap Stimulus Application

Source: https://symfony-vite.pentatrion.com/stimulus/installation

Initialize the Stimulus app and register controllers using the provided helpers.

```js
import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers";

const app = startStimulusApp();
registerControllers(
  app,
  import.meta.glob('./controllers/*_controller.js', {
    query: "?stimulus",
    /**
     * always true, the `lazy` behavior is managed internally with
     * import.meta.stimulusFetch (see reference)
     */
    eager: true,
  })
)
```

```ts
import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers";

const app = startStimulusApp();
registerControllers(
  app,
  import.meta.glob<StimulusControllerInfosImport>(
    "./controllers/*_controller.ts",
    {
      query: "?stimulus",
      /**
       * always true, the `lazy` behavior is managed internally with
       * import.meta.stimulusFetch (see reference)
       */
      eager: true,
    },
  ),
);
```

--------------------------------

### Initializing Stimulus App

Source: https://symfony-vite.pentatrion.com/stimulus/reference

Create a Stimulus application instance that automatically preloads controllers defined in controllers.json.

```javascript
import { startStimulusApp } from "vite-plugin-symfony/stimulus/helpers";
const app = startStimulusApp();
```

--------------------------------

### Migrate Entry Points to Object Format

Source: https://symfony-vite.pentatrion.com/extra/migration

Change the input configuration in vite.config.js from an array to an object.

```diff
-input: ["./assets/app.js"],
+input: {
+  app: "./assets/app.js"
+}
```

--------------------------------

### Configure Vite with custom certificates

Source: https://symfony-vite.pentatrion.com/guide/tips

Load custom key and certificate files into the Vite server configuration.

```javascript
// vite.config.js
import fs from "fs";

export default defineConfig({

    // ...
    server: {
        https: {
          key: fs.readFileSync('certs/vite.key.pem'),
          cert: fs.readFileSync('certs/vite.crt.pem'),
        },
        cors: true
    },
});
```

--------------------------------

### Preload behavior: link-tag

Source: https://symfony-vite.pentatrion.com/guide/performance

HTML output when using the default link-tag preload strategy.

```html
<link rel="stylesheet" href="/build/assets/app-05a88f8a.css" crossorigin>
<link rel="modulepreload" href="/build/assets/vue-1efeee8e.js" crossorigin>
<script type="module" src="/build/assets/app-1b490458.js" crossorigin></script>
```

--------------------------------

### Repository structure overview

Source: https://symfony-vite.pentatrion.com/guide/examples

Visual representation of the project directory layout.

```text
.
├── src
│ ├── vite-bundle
│ └── vite-plugin-symfony
├── node_modules
│ ├── acorn
│ ├── ...
│ └── yocto-tail
├── package.json
├── package-lock.json
├── phpcs.phar
├── playground
│ ├── basic
│ ├── legacy
│ ├── multiple
│ ├── ssr
│ └── fast-only
├── README.md
└── shared
     └── theme
```

--------------------------------

### Configure Svelte Preprocessor

Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux

Set up the Svelte preprocessor in your Vite configuration file.

```javascript
export default {
  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
  // for more information about preprocessors
  preprocess: vitePreprocess(),
}
```

--------------------------------

### Preload behavior: link-header

Source: https://symfony-vite.pentatrion.com/guide/performance

HTTP headers and HTML output when using the link-header preload strategy.

```css
/* HTTP header added by the Symfony Web-Link component */
Link: \
  </build/assets/vue-1efeee8e.js>; rel="modulepreload"; crossorigin, \
  </build/assets/app-1b490458.js>; rel="modulepreload"; crossorigin, \
  </build/assets/app-05a88f8a.css>; rel="preload"; as="style" crossorigin
```

```html
<link rel="stylesheet" href="/build/assets/app-05a88f8a.css">
<script type="module" src="/build/assets/app-1b490458.js"></script>
```

--------------------------------

### Register Stimulus Controllers

Source: https://symfony-vite.pentatrion.com/stimulus/reference

Shows how to register controllers using the helper function versus manual eager or lazy registration patterns.

```javascript
import { registerController } from "vite-plugin-symfony/stimulus/helpers";

import ColorPicker from "./controllers/color_picker_controller?stimulus";
registerController(app, ColorPicker);
```

```javascript
import { createLazyController } from "vite-plugin-symfony/stimulus/helpers";

//  if you want eager behavior
import ColorPickerController from "./controllers/color_picker_controller";
app.register("color-picker", ColorPickerController)

//  if you want lazy behavior
app.register(
  "color-picker",
  createLazyController(() => import("./controllers/color_picker_controller")),
);
```

--------------------------------

### Enable production caching

Source: https://symfony-vite.pentatrion.com/guide/performance

Enable the cache option in the bundle configuration for production environments.

```yaml
# config/packages/pentatrion_vite.yaml
when@prod:
    pentatrion_vite:
        cache: true
```

--------------------------------

### Use assets in Twig with package names

Source: https://symfony-vite.pentatrion.com/guide/multiple-configurations

Reference assets by passing the configuration name as the second argument to the asset function.

```twig
<img src="{{ asset('assets/images/violin.jpg', 'config1')}}" alt="">
```

--------------------------------

### Define Multiple Routing Configurations

Source: https://symfony-vite.pentatrion.com/extra/migration

Manually update routing configuration to support multiple build paths.

```yaml
# config/routes/pentatrion_vite.yaml
when@dev:
    # remove this default config
    _pentatrion_vite: 
        prefix: /build // [!code --]
        resource: "@PentatrionViteBundle/Resources/config/routing.yaml"

    # add one route by build path
    _pentatrion_vite_config1: 
        path: /build-1/{path} #same as your config1 base //
        defaults: 
            _controller: Pentatrion\ViteBundle\Controller\ViteController::proxyBuild // [!code ++]
            configName: config1 // [!code ++]
        requirements: 
            path: ".+"

    _pentatrion_vite_config2: 
        path: /build-2/{path} #same as your config2 base //
        defaults: 
            _controller: Pentatrion\ViteBundle\Controller\ViteController::proxyBuild // [!code ++]
            configName: config2 // [!code ++]
        requirements: 
            path: ".+"

    _profiler_vite:
        path: /_profiler/vite
        defaults:
            _controller: Pentatrion\ViteBundle\Controller\ProfilerController::info
```

--------------------------------

### Configure React Controller Registration

Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux

Update bootstrap files to register React components using Vite's glob import.

```js
import { registerReactControllerComponents } from '@symfony/ux-react'; 
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/)); 

import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"
import { registerReactControllerComponents } from "vite-plugin-symfony/stimulus/helpers/react"

registerReactControllerComponents(import.meta.glob('./react/controllers/**/*.js(x)\?')); 
```

--------------------------------

### Configure CSS Entrypoint in Vite

Source: https://symfony-vite.pentatrion.com/guide/tips

Define a CSS or SCSS file as an entrypoint in your Vite configuration to prevent Flash of Unstyled Content (FOUC) during development.

```javascript
export default defineConfig({
    // ...your config
    build: {
        rollupOptions: {
            input: {
                theme: "./assets/theme.scss"
            },
        }
    },
});
```

--------------------------------

### Configure controllers.json for Svelte

Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux

Set fetch to eager for Svelte controllers in controllers.json.

```json
{
    "controllers": {
        "@symfony/ux-svelte": {
            "svelte": {
                "enabled": true,
                "fetch": "eager"
            }
        },

    },
    "entrypoints": []
}
```

--------------------------------

### Customizing the build directory

Source: https://symfony-vite.pentatrion.com/guide/configuration

Configuration changes required to use a non-default build directory.

```javascript
// vite.config.js
export default defineConfig({
  base: '/custom-build/', 
  plugins: [
    symfonyPlugin(),
  ],

  build: {
    outDir: 'public/custom-build', 

    rollupOptions: {
      input: {
        "app": "./assets/app.js",
      },
    },

  },
});
```

```yaml
#config/packages/pentatrion_vite.yaml
pentatrion_vite:
  build_directory: custom-build // [!code ++]
```

--------------------------------

### entrypoints.json configuration

Source: https://symfony-vite.pentatrion.com/guide/getting-started

The entrypoints.json file generated by vite-plugin-symfony for development and production environments.

```json
{
  "isProd": false,
  "viteServer": {
    "origin": "http://[::1]:5173",
    "base": "/build/"
  },
  "entryPoints": {
    "app": {
      "js": [
        "http://[::1]:5173/build/src/app.ts"
      ]
    }
  },
  "legacy": false
}
```

```json
{
  "entryPoints": {
    "app": {
      "assets": [],
      "css": [
        "/build/assets/app-3443e464.css"
      ],
      "js": [
        "/build/assets/app-6f6529cf.js"
      ],
      "legacy": false,
      "preload": []
    }
  },
  "isProd": true,
  "legacy": false,
  "viteServer": false
}
```

--------------------------------

### Optimize Dependency Pre-bundling

Source: https://symfony-vite.pentatrion.com/guide/tips

Explicitly include common dependencies in the Vite configuration to reduce page reloads caused by automatic discovery.

```javascript
// vite.config.js

export default defineConfig({
    server: {
        // Set to true to force dependency pre-bundling.
        force: true,
    },
    // ...
    optimizeDeps: {
        include: ["my-package"],
    },
});
```

--------------------------------

### Configure controllers.json for Eager Fetching

Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux

Set the fetch mode to eager in controllers.json to avoid promise nesting when using import.meta.glob.

```json
{
    "controllers": {
        "@symfony/ux-react": {
            "react": {
                "enabled": true,
                "fetch": "eager"
            }
        },

    },
    "entrypoints": []
}
```

--------------------------------

### Register Stimulus Controllers with Vite

Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux

Use import.meta.glob to register Stimulus controllers when using Vite.

```javascript
const app = startStimulusApp();
registerControllers(
  app,
  import.meta.glob(
    "./controllers/*_controller.js",
    {
      query: "?stimulus",
      eager: true,
    },
  ),
);
```

--------------------------------

### Configure Asset Version Strategy

Source: https://symfony-vite.pentatrion.com/reference/vite-bundle

Set the version strategy for assets in the framework configuration.

```yaml
framework:
    assets:
        version_strategy: 'Pentatrion\ViteBundle\Asset\ViteAssetVersionStrategy'
```

--------------------------------

### Run Vite in Docker

Source: https://symfony-vite.pentatrion.com/guide/tips

Command to execute the Vite development server within a Docker container.

```bash
docker run
  --rm \
  -ti \
  --user $(id -u):$(id -g) \
  -v $(pwd):/app \
  -p 5173:5173 \
  -w /app \
  node:21-alpine \
  npm run dev
```

--------------------------------

### Vite production build index.html

Source: https://symfony-vite.pentatrion.com/guide/getting-started

The HTML output generated by Vite after running the build command for production.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vite Build</title>
    <script type="module" crossorigin src="/assets/index-aa676a50.js"></script>
    <link rel="stylesheet" href="/assets/index-3443e464.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
```

--------------------------------

### Reference entry points in Twig templates

Source: https://symfony-vite.pentatrion.com/guide/getting-started

Using Twig functions to inject script and link tags for the defined entry point.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vite Build</title>
    {{ vite_entry_script_tags('app') }}
    {{ vite_entry_link_tags('app') }}
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
```

--------------------------------

### Create Svelte Controller

Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux

Define a basic Svelte component with exported props.

```svelte
<!-- assets/svelte/controllers/Hello.svelte -->
<script>
    export let name = "Svelte";
</script>

<div>Hello {name}</div>
```

--------------------------------

### Native Vite Build Output

Source: https://symfony-vite.pentatrion.com/in-depth/preload

The index.html structure after a Vite build, showing default crossorigin attributes and modulepreload links.

```html
<html lang="en">
  <head>
    <!-- the crossorigin attribute is present by default in all script and link tags -->
    <script type="module" crossorigin src="/assets/app-bXh9WZ8a.js"></script>
    <!--  scripts that have been split are preloaded -->
    <link rel="modulepreload" crossorigin href="/assets/shared-5Hh7diCN.js">
    <link rel="stylesheet" crossorigin href="/assets/index-Cz4zGhbH.css">
  </head>
  <body>
    ...
  </body>
</html>
```

--------------------------------

### Import Controller with Stimulus Metadata

Source: https://symfony-vite.pentatrion.com/stimulus/reference

Import a controller using the ?stimulus suffix to trigger the parsing of its metadata.

```javascript
import WelcomeController from "./controllers/welcome_controller.js?stimulus";

console.log(WelcomeController);
/*
{
  identifier: "welcome",
  enabled: true,
  fetch: "eager",
  controller: WelcomeController
}
*/
```

--------------------------------

### Deprecated Build Configuration

Source: https://symfony-vite.pentatrion.com/reference/vite-bundle

Legacy configuration format for multiple builds, now deprecated in favor of configs.

```yaml
pentatrion_vite:
  default_build: <custom-build-name-1>
  builds:
    <custom-build-name-1>:

      build_directory: build1

      script_attributes:
        # etc

      link_attributes:
        # etc
```

--------------------------------

### Configure Multiple Asset Packages

Source: https://symfony-vite.pentatrion.com/guide/assets

Define multiple asset packages in Symfony configuration to support different asset sources alongside Vite.

```yaml
# config/packages/framework.yaml
framework:
    assets:
        packages:
            vite:
                version_strategy: 'Pentatrion\ViteBundle\Asset\ViteAssetVersionStrategy'
```

--------------------------------

### Configure Multiple Vite Builds

Source: https://symfony-vite.pentatrion.com/reference/vite-bundle

Define multiple build configurations using the configs option.

```yaml
pentatrion_vite:
  default_config: <custom-build-name-1>
  builds:
    <custom-build-name-1>:

      build_directory: config1

      script_attributes:
        # etc

      link_attributes:
        # etc

      preload_attributes:
        # etc
```

--------------------------------

### Importing Stimulus Helpers

Source: https://symfony-vite.pentatrion.com/stimulus/reference

Import the necessary helper functions from the plugin package.

```javascript
import {
  startStimulusApp,
  registerController,
  registerControllers,
  createLazyController,
} from "vite-plugin-symfony/stimulus/helpers";
```

--------------------------------

### Import Bootstrap in App Entry

Source: https://symfony-vite.pentatrion.com/stimulus/installation

Ensure the bootstrap file is imported in your main application entry point.

```js
// assets/app.js
import './bootstrap.js';
```

--------------------------------

### Injecting EntrypointRenderer into a Twig Extension

Source: https://symfony-vite.pentatrion.com/guide/dependency-injection

Use this pattern to access Vite services within a custom Twig extension. Ensure the necessary service classes are imported from the Pentatrion ViteBundle.

```php
use Twig\Extension\AbstractExtension;
use Pentatrion\ViteBundle\Service\EntrypointRenderer;
use Pentatrion\ViteBundle\Service\EntrypointsLookupCollection;
use Pentatrion\ViteBundle\Service\TagRendererCollection;

class YourTwigExtension extends AbstractExtension
{
    public function __contruct(
        private EntrypointRenderer $entrypointRenderer,

        // or this if you want internal services
        private EntrypointsLookupCollection $entrypointsLookupCollection,
        private TagRendererCollection $tagRendererCollection
    ) {
        $content = $this->entrypointRenderer->renderScripts(
          'app',  // entryName
          [],     // options
          null,   // configName if you have multiple configs.
          true    // toString (specify false and you will have ane array of Tag)
        );


        $entrypointsLookup = $this->entrypointsLookupCollection->getEntrypointsLookup();

        $viteServer = $entrypointsLookup->getViteServer();
        $jsFiles = $entrypointsLookup->getJSFiles('app');
        $cssFiles = $entrypointsLookup->getCSSFiles('app');
        // etc...
    }
}
```

--------------------------------

### Configure script preloading in Symfony

Source: https://symfony-vite.pentatrion.com/guide/performance

Set the preload strategy in the bundle configuration file.

```yaml
# config/packages/pentatrion_vite.yaml
pentatrion_vite:
    preload: link-header
```

--------------------------------

### Configure Pentatrion Vite Cross-Origin

Source: https://symfony-vite.pentatrion.com/extra/migration

Set the crossorigin option in the bundle configuration file.

```yaml
pentatrion_vite:
  crossorigin: true
```
Tokens:
Raw