### Installation and Setup

Source: https://context7.com/lhapaipai/symfony-vite-dev/llms.txt

Steps to install the Symfony bundle and JavaScript dependencies, and start the development servers.

```APIDOC
## Installation

Install the bundle and npm package to set up Vite in your Symfony application.

```bash
# Install the Symfony bundle (with Flex recipe)
composer require pentatrion/vite-bundle

# Install JavaScript dependencies
npm install

# Start development servers
symfony serve
npm run dev
```
```

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

### Install All Playgrounds

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/examples.md

Install dependencies and build assets for all playgrounds. This command automates the setup process for multiple examples.

```bash
make install-playgrounds
```

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

### Clone and Install Basic Example Dependencies

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/examples.md

Clone the repository and install the main dependencies for the vite-bundle and vite-plugin-symfony. This is the first step for running the basic example.

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

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

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

### Clone and Run Example Project

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/stimulus/installation.md

Clone the `symfony-vite-dev` repository, install dependencies, build the plugin, and then navigate to the Stimulus example playgrounds to run the development server and frontend.

```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
```

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

### Install npm dependencies and start Vite dev server

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/src/vite-bundle/README.md

Install project dependencies using npm and start the Vite development server.

```bash
npm install

# start your vite dev server
npm run dev
```

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

### Install Symfony Vite Bundle and Dependencies

Source: https://context7.com/lhapaipai/symfony-vite-dev/llms.txt

Install the Composer package and npm dependencies, then start the Symfony and Vite development servers.

```bash
composer require pentatrion/vite-bundle

npm install

symfony serve
npm run dev
```

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

### Install Project Dependencies

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/extra/contribute.md

Commands to clone the repository, install main Vite bundle/plugin dependencies, and then install dependencies for all playgrounds.

```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
```

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

### Install Project Dependencies

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/README.md

Clone the repository and install dependencies for the main project and optionally for all playgrounds.

```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 a 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


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

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

### NPM Install and Vite Dev

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/playground/docker/README.md

Installs Node.js dependencies using npm and starts the Vite development server. These commands are typically run within the project's environment.

```bash
make npm-install
make vite-dev
```

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

### Launch Development Environment

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/README.md

Start the local Symfony server and the Vite development server for the 'basic' playground.

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

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

### Example entrypoints.json for CDN

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/cdn.md

This is an example of the `public/build/entrypoints.json` file when configured for a CDN. It shows the `base` URL pointing to the CDN and asset paths including the CDN domain.

```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 Vite Bundle with Composer

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/extra/manual-installation.md

Use Composer to install the pentatrion/vite-bundle package.

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

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

### Run Vite Dev Server with Symfony CLI (No TLS)

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/tips.md

Start the Vite development server using npm and the Symfony CLI without TLS. This is a simpler setup to avoid mixed content warnings when your Symfony app uses HTTPS.

```bash
npm run dev
symfony serve --no-tls
```

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

### Start Development Servers

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/installation.md

Launches the Symfony local web server and the Vite development server for frontend asset hot-reloading.

```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
```

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

### Start Symfony Development Server

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/src/vite-plugin-symfony/static/dev-server-404.html

Use this command to start the local development server for your Symfony application. This is the recommended way to access your application during development.

```bash
symfony serve
```

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

### Create and Configure Symfony Application

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/installation.md

Sets up a new Symfony application and installs necessary bundles like Twig and Maker.

```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
```

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

### Basic Vite Configuration

Source: https://context7.com/lhapaipai/symfony-vite-dev/llms.txt

Example of how to configure Vite with entry points for your JavaScript and CSS files in `vite.config.js`.

```APIDOC
## Basic Vite Configuration

Configure Vite with entry points for your JavaScript and CSS files.

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

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

  build: {
    rollupOptions: {
      input: {
        // Entry points - keys become identifiers for Twig functions
        app: "./assets/app.js",
        theme: "./assets/theme.scss"
      },
    },
  },
});
```
```

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

### Launch Basic Playground Development Environment

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/extra/contribute.md

Steps to navigate to the basic playground, start the Symfony local server, and run the Vite development server.

```bash
# 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/
```

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

### Install Symfony UX React

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/stimulus/symfony-ux.md

Install the symfony/ux-react package using Composer and npm. The `--force` flag may be required for npm.

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

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

### Install Symfony UX Svelte

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/stimulus/symfony-ux.md

Install the symfony/ux-svelte package using Composer and npm. Ensure you run 'npm i --force' after installation.

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

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

### Install Playground Dependencies

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/examples.md

Install Composer dependencies for a specific playground. Navigate to the desired playground directory before running this command.

```bash
cd playground/<your-playground>
symfony composer install
```

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

### Vue Component Definition

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/stimulus/symfony-ux.md

Define a simple Vue 3 component using the `<script setup>` syntax. This example shows a basic component that accepts a 'name' prop and displays it.

```vue
<!-- assets/vue/controllers/Hello.vue -->
<template>
    <div>Hello {{ name }}!</div>
</template>

<script setup>
    defineProps({
        name: String
    });
</script>
```

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

### entrypoints.json (prod) Example

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/fr/guide/getting-started.md

This JSON file represents the entrypoints.json structure after compiling assets for production. It lists the generated CSS and JS files.

```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
}
```

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

### Link Header for Preloading

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/in-depth/preload.md

Example of preloading assets using the `Link` header, which can initiate requests even earlier than inline tags.

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

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

### Start Stimulus App with Vite Plugin

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/stimulus/reference.md

Use `startStimulusApp` for a simplified Stimulus application startup. This is an equivalent to manually starting the Stimulus Application and registering controllers from `controllers.json`.

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

```js
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);
  }
}
```

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

### entrypoints.json (dev) Example

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/fr/guide/getting-started.md

This JSON file shows the structure of entrypoints.json when the Vite development server is running. It includes the Vite server origin and base path for assets.

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

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

### Install JavaScript Dependencies

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/installation.md

Installs frontend JavaScript dependencies, including Vite and vite-plugin-symfony, using npm.

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

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

### Install Stimulus Bundle

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/stimulus/installation.md

Install the Stimulus bundle using Composer. This automatically adds the `@symfony/stimulus-bridge` npm package as a devDependency.

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

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

### Run Development Server and Symfony

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/tips.md

Start the Vite development server and the Symfony development server. Access your application via HTTPS at the specified local address.

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

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

### Docker Compose Up

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/playground/docker/README.md

Starts the Docker containers in detached mode and waits for them to be ready. Use the '-d' flag for background execution.

```bash
docker compose up -d --wait
```

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

### Define Stimulus Controller

Source: https://context7.com/lhapaipai/symfony-vite-dev/llms.txt

Create a Stimulus controller in `assets/controllers/welcome_controller.js`. This example defines targets and values, and connects them in the `connect` method. It also shows how to configure `import.meta.stimulusFetch` and `import.meta.stimulusIdentifier`.

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

// Optional: configure controller behavior
import.meta.stimulusFetch = "lazy";    // Load on demand
import.meta.stimulusIdentifier = "welcome"; // Custom identifier

export default class controller extends Controller {
  static targets = ["title"];
  static values = { name: String };

  connect() {
    this.titleTarget.textContent = `Hello ${this.nameValue}`;
  }
}
```

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

### Vite Production Index HTML with Legacy Plugin

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/in-depth/preload.md

Example of `index.html` after a Vite build with the Legacy plugin enabled, including polyfills and legacy entry points.

```html
<!doctype html>
<html class="page-welcome">
  <head>
    <meta charset="UTF-8" />
    <title>HelloController!</title>
    <link rel="icon" href="data:;base64,iBORw0go=" />

    <link rel="modulepreload" crossorigin href="/assets/shared-5Hh7diCN.js">
    <link rel="stylesheet" crossorigin href="/build/assets/theme-gOv5yEUY.css" />
    <script type="module" crossorigin src="/build/assets/pageWelcome--4K79RzD.js"></script>

    <script type="module">/** DETECT_MODERN_BROWSER_INLINE_CODE */</script>
    <script type="module">/** DYNAMIC_FALLBACK_INLINE_CODE */</script>
  </head>

  <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>
```

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

### Install vite-plugin-symfony

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/src/vite-plugin-symfony/README.md

Use npm to install the Vite plugin for Symfony. This is the first step in integrating Vite into your project.

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

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

### Install React with Symfony UX

Source: https://context7.com/lhapaipai/symfony-vite-dev/llms.txt

Install the React integration for Symfony UX using Composer and npm. This sets up the necessary packages for React component integration.

```bash
composer require symfony/ux-react
npm i @vitejs/plugin-react react react-dom --force
```

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

### Vue.js Application Entry Point

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/performance.md

Basic Vue.js application setup using Vite. This file serves as the main entry point for your Vue application.

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

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

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

### Install Vite Bundle and Remove Webpack Encore

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/extra/migration-webpack-encore.md

Commands to remove Webpack Encore Bundle and install the Vite Bundle. Backup your assets and package.json files before proceeding.

```bash
mv assets assets.bak
mv package.json package.json.bak
mv package-lock.json package-lock.json.bak
composer remove symfony/webpack-encore-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
```

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

### Generate Custom Certificates with mkcert

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/tips.md

Install mkcert and use it to generate local TLS certificates for localhost and 127.0.0.1. These certificates will be used by Vite.

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

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

### HTML Output with 'none' Preload Option

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/performance.md

Example HTML output when the `preload` option is set to `none`. Only essential CSS and JS links are included.

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

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

### Stimulus Controllers Configuration in controllers.json

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/stimulus/reference.md

Example configuration file for defining Stimulus controllers, including package name, controller suffix, fetch strategy (eager/lazy), custom names, auto-import for CSS, and explicit main file paths.

```json
{
    "controllers": {
        // package name
        "@stimulus-components/color-picker": {

            // controller suffix
            // the identifier will therefore be "package-name/suffix" with "-"
            // ex: stimulus-components--color-picker--picker
            "picker": {
                "enabled": true,
                "fetch": "lazy", // "eager" ou "lazy"

                // if you find that the controller name is way too long
                // you can override it and set a much shorter identifier here.
                "name": "color-picker",

                // if you want to include additional files
                "autoimport": {
                    "@simonwep/pickr/dist/themes/classic.min.css": true
                },

                // if your controller corresponds to a specific file in the package you can
                // explicitly set its path here.
                // otherwise the path will be inferred from the "module" or "main" entry in package.json.
                "main": "dist/stimulus-color-picker.mjs"
            }
        }
    },
    "entrypoints": []
}
```

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

### Install Vue with Symfony UX

Source: https://context7.com/lhapaipai/symfony-vite-dev/llms.txt

Install the Vue integration for Symfony UX using Composer and npm. This sets up the necessary packages for Vue component integration.

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

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

### Remove Webpack Encore Entry Point

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/extra/migration-webpack-encore.md

Example of removing a Webpack Encore entry point from the configuration file.

```diff
// webpack.config.js
-Encore.addEntry("app", "./assets/app.js");
```

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

### HTML Output with 'link-tag' Preload Option

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/performance.md

Example HTML output with the default `link-tag` preload option. Includes CSS, module preload for JS dependencies, and the main script tag.

```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>
```

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

### Stimulus Counter Controller Example

Source: https://context7.com/lhapaipai/symfony-vite-dev/llms.txt

A basic Stimulus controller demonstrating target and value definitions, along with methods for incrementing a counter and rendering its value. Set 'import.meta.stimulusFetch' to 'eager' for immediate loading.

```typescript
// assets/controllers/counter_controller.ts
import { Controller } from "@hotwired/stimulus";

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

export default class extends Controller<HTMLElement> {
  static targets = ["count"];
  static values = { initial: { type: Number, default: 0 } };

  declare readonly countTarget: HTMLElement;
  declare initialValue: number;

  private count = 0;

  connect(): void {
    this.count = this.initialValue;
    this.render();
  }

  increment(): void {
    this.count++;
    this.render();
  }

  private render(): void {
    this.countTarget.textContent = String(this.count);
  }
}
```

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

### Development HTML Output

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/fr/guide/getting-started.md

This is an example of the HTML output generated for development when using Vite. It includes the Vite client and the entry point script.

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

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

### Basic Svelte Component Example

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/stimulus/symfony-ux.md

A simple Svelte component named 'Hello.svelte' that accepts a 'name' prop and displays a greeting. This component can be rendered using the svelte_component Twig function.

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

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

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

### Bootstrap Stimulus App

Source: https://context7.com/lhapaipai/symfony-vite-dev/llms.txt

Initialize the Stimulus application and register controllers in `assets/bootstrap.js` using helper functions from `vite-plugin-symfony/stimulus/helpers`. This example uses `import.meta.glob` to dynamically load controllers.

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

const app = startStimulusApp();

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

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

### HTTP Header Output with 'link-header' Preload Option

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/performance.md

Example HTTP `Link` header output when the `link-header` preload option is used. This method preloads all assets before the HTML page is processed. Requires the `symfony/web-link` component.

```http
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
```

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

### Bootstrap Stimulus App (JavaScript)

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/stimulus/installation.md

Initialize and register Stimulus controllers in `bootstrap.js`. This helper function starts the Stimulus app and registers controllers found in the specified glob pattern.

```javascript
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,
  })
)
```

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

### Get Vite Mode - Twig

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/twig-functions.md

The `vite_mode` function returns the current Vite mode ('dev' or 'build') or null. It can accept a configuration name for multiple setups.

```twig
{{ vite_mode('<custom-config-name-1>') }}
```

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

### Install Symfony UX Vue Package

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/stimulus/symfony-ux.md

Install the Symfony UX Vue package using Composer and npm. After installation, you may need to adjust import statements in your bootstrap file.

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

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

### Error Message Example

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/in-depth/preload.md

This is an example of an error message related to crossorigin attributes when preloading scripts.

```text
A preload for 'https://example.org/build/example.js' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
```

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

### Project File Structure

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/extra/contribute.md

Overview of the project's directory structure, including source code, node modules, and playground environments.

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

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

### Configure Stimulus Controller with import.meta

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/stimulus/reference.md

Configure individual Stimulus controllers using import.meta properties like 'stimulusEnabled', 'stimulusFetch', and 'stimulusIdentifier'. This allows fine-grained control over controller behavior and identification.

```javascript
import { Controller } from "@hotwired/stimulus";

import.meta.stimulusEnabled = true;
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}`;
  }
}
```

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

### Install Stimulus Bundle and Remove Webpack Bridge

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/stimulus/symfony-ux.md

Install the Stimulus bundle and remove the webpack-compatible Stimulus bridge. This is a prerequisite for using Symfony UX components.

```bash
composer require symfony/stimulus-bundle

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

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

### Build for Production

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/installation.md

Compiles and optimizes frontend JavaScript and CSS files for deployment in a production environment.

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

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

### Configure Vite with Vite-Symfony Plugin

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/extra/migration-webpack-encore.md

Configuration for Vite using vite.config.js, integrating the vite-plugin-symfony. This replaces the webpack.config.js setup.

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

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

### JavaScript App Entry Point

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/in-depth/preload.md

The main JavaScript file for the application, demonstrating dynamic imports.

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

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

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

### Production HTML Output

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/fr/guide/getting-started.md

This is an example of the HTML output generated for production. It includes the compiled and hashed JavaScript and CSS files.

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

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

### Legacy Entry Point Script Tag

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/fr/in-depth/preload.md

Use this script tag to load legacy entry points for specific application sections, such as the theme. It utilizes System.import to dynamically load the script.

```html
<script
      nomodule
      data-src="/build/assets/theme-legacy-LruLDnf0.js"
      id="vite-legacy-entry-theme"
      crossorigin
      class="vite-legacy-entry"
    >
      System.import(document.getElementById('vite-legacy-entry-theme').getAttribute('data-src'));
    </script>
```

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

### Basic Vite Bundle Configuration

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/reference/vite-bundle.md

Sets the public directory, build directory, and error handling for missing entries. Adjust `public_directory` and `build_directory` based on your project structure.

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

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

### Customizing Vite Build Directory

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/configuration.md

Example of how to change the build directory name in vite.config.js. This involves updating the `base` option and `build.outDir`.

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

  build: {
    outDir: 'public/custom-build', // [!code ++]

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

  },
});
```

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

### Multiple Vite Configurations

Source: https://context7.com/lhapaipai/symfony-vite-dev/llms.txt

Set up multiple Vite build configurations by defining separate `vite.config.js` files and corresponding entries in `pentatrion_vite.yaml`. This allows for different build outputs and base paths.

```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"
      },
    },
  }
});

// vite.config2.config.js
export default defineConfig({
  base: "/build-2/",
  plugins: [symfonyPlugin()],
  build: {
    outDir: "public/build-2",
    rollupOptions: {
      input: {
        admin: "./assets/page/admin/index.js",
      },
    },
  }
});
```

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

### Vite Configuration for Entry Point

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/getting-started.md

Configures the build input for Vite using Rollup, specifying the application's main entry point.

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

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

### React Component Example

Source: https://context7.com/lhapaipai/symfony-vite-dev/llms.txt

A simple React component that accepts a 'fullName' prop and displays a greeting. This component can be rendered within a Symfony application.

```jsx
// assets/react/controllers/Hello.jsx
export default function Hello({ fullName }) {
  return <div>Hello {fullName}!</div>;
}
```

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

### Legacy Page Entry Point Script Tag

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/fr/in-depth/preload.md

This script tag loads legacy entry points for specific pages, like the welcome page. It uses System.import to load the script specified by the data-src attribute.

```html
<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>
```

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

### Vue Component Example

Source: https://context7.com/lhapaipai/symfony-vite-dev/llms.txt

A simple Vue component that accepts a 'name' prop and displays a greeting. This component can be rendered within a Symfony application.

```vue
<!-- assets/vue/controllers/Hello.vue -->
<template>
  <div>Hello {{ name }}!</div>
</template>

<script setup>
defineProps({ name: String });
</script>
```

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

### Legacy Polyfill and Entry Point Scripts

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/src/vite-bundle/docs/vite-legacy.md

These scripts are included in the build output. The legacy polyfill script (`polyfills-legacy-40963d34.js`) is for older browsers, and the legacy entry point (`index-legacy-affdb848.js`) is loaded via System.import.

```html
<script nomodule crossorigin id="vite-legacy-polyfill" src="/assets/polyfills-legacy-40963d34.js"></script>
```

```html
<script type="module" crossorigin src="/assets/index-bac46bd1.js"></script>
```

```html
<script nomodule crossorigin id="vite-legacy-entry" data-src="/assets/index-legacy-affdb848.js">
      System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))
    </script>
```

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

### Vite Build Output: entrypoints.json

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/in-depth/preload.md

This JSON file outlines the entry points for your application, including CSS and JavaScript files, legacy build status, and version information. It's crucial for the frontend integration of Vite assets.

```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
}
```

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

### Définir plusieurs stratégies de versionnement d'assets

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/fr/guide/assets.md

Configurez plusieurs packages d'assets dans Symfony pour utiliser différentes stratégies de versionnement, y compris une stratégie personnalisée avec Vite.

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

```

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

### Vite Configuration for Build 1

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/fr/guide/multiple-configurations.md

Defines the Vite configuration for the first build, including base URL, plugins, and output directory.

```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"
      },
    },
  },
});
```

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

### Twig Asset Usage

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/reference/vite-bundle.md

Example of how to reference a static asset copied by Vite in Twig templates. Ensure the path matches the `dest` directory configured in `viteStaticCopy`.

```twig
<img src="{{ asset('static/angular.svg')}}" />
```

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

### Legacy Entry Point Script Tag

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/in-depth/preload.md

This script tag loads legacy entry points for specific features, using `nomodule` and `System.import` to dynamically load the associated JavaScript file. It requires a `data-src` attribute specifying the script path.

```html
<script
      nomodule
      data-src="/build/assets/theme-legacy-LruLDnf0.js"
      id="vite-legacy-entry-theme"
      crossorigin
      class="vite-legacy-entry"
    >
      System.import(document.getElementById('vite-legacy-entry-theme').getAttribute('data-src'));
    </script>
```

```html
<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>
```

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

### Symfony Twig Template Integration

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/getting-started.md

Example of integrating Vite entry points into a Symfony Twig template using helper functions for script and link tags.

```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>
```

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

### Register Multiple Stimulus Controllers from a Directory

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/stimulus/reference.md

Register all controllers within a specified directory using `registerControllers` and Vite's `import.meta.glob`. Ensure the `?stimulus` query is used and `eager: true` is set for proper loading. Controller names are derived from file names if `import.meta.stimulusIdentifier` is not set.

```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,
    },
  ),
);
```

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

### Bootstrap React Controllers in Symfony

Source: https://context7.com/lhapaipai/symfony-vite-dev/llms.txt

Register React controller components and Stimulus controllers in assets/bootstrap.js. Ensure React components are registered before starting the Stimulus app.

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

registerReactControllerComponents(import.meta.glob('./react/controllers/**/*.jsx'));

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

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

### Vite Configuration for Build 1

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/multiple-configurations.md

Defines the first Vite configuration, specifying the base path, plugins, output directory, and entry points for the build.

```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"
      },
    },
  }
});
```

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

### Bootstrap Vue Controllers in Symfony

Source: https://context7.com/lhapaipai/symfony-vite-dev/llms.txt

Register Vue controller components and Stimulus controllers in assets/bootstrap.js. Ensure Vue components are registered before starting the Stimulus app.

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

// Register Vue components BEFORE startStimulusApp
registerVueControllerComponents(import.meta.glob('./vue/controllers/**/*.vue'));

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

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

### Vite Configuration with Static File Copy

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/reference/vite-bundle.md

Configures Vite to copy static assets and integrate with Symfony. Ensure `vite-plugin-static-copy` is installed and configured correctly for your asset paths.

```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(),
  ],
  // ...
});
```

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

### Using Symfony Asset Component with Vite

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/multiple-configurations.md

Example of how to use Symfony's `asset()` function to reference assets managed by a specific Vite configuration ('config1' in this case).

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

```

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

### Generated Vite Cache File Content

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/performance.md

Example content of the generated Vite cache file (`var/cache/prod/pentatrion_vite.cache.php`). This PHP file replaces the need for `entrypoints.json` and `manifest.json` in production.

```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' => ...,
    ],
  ]
];
```

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

### Entrypoints JSON Structure

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/in-depth/preload.md

The `entrypoints.json` file defines the entry points for your application, including JavaScript and CSS files, and specifies whether they are legacy-compatible.

```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
}
```

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

### Use Registered Third-Party Controller

Source: https://context7.com/lhapaipai/symfony-vite-dev/llms.txt

Use a registered third-party Stimulus controller in your HTML by adding the appropriate `data-controller` attribute to an element. For example, `data-controller="color-picker"`.

```twig
{# Use the registered controller #}
<input data-controller="color-picker" type="text" />
```

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

### Update Dependency Injection for Vite Services

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/extra/migration.md

Adjust service definitions to use the new `Pentatrion\ViteBundle\Service\EntrypointRenderer` and `Pentatrion\ViteBundle\Service\EntrypointsLookupCollection` classes for dependency injection, and retrieve the entrypoints lookup from the collection.

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

class YourTwigExtension extends AbstractExtension
{
    public function __contruct(
        private EntrypointsLookupCollection $entrypointsLookupCollection,
        private EntrypointRenderer $entrypointRenderer
    ) {
        $entrypointsLookup = $entrypointsLookupCollection->getEntrypointsLookup();
        // ...
    }


}
```

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

### Customizing Build Directory in Pentatrion Vite Bundle

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/src/guide/configuration.md

Configuration for pentatrion/vite-bundle to match a custom build directory. This is done via the `pentatrion_vite.yaml` configuration file.

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

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

### Record Terminal Session with Asciinema

Source: https://github.com/lhapaipai/symfony-vite-dev/blob/main/docs/asciinema/README.md

Use asciinema to record your terminal session. The first command starts a standard recording, while the second records and plays back at double speed.

```bash
# window 70x16
ascinema rec asciinema/install.cast
```

```bash
# replay faster
ascinema rec -c 'asciinema play -s 2 asciinema/install.cast' asciinema/install-2x.cast
```