Vite in Dev mode

### Basic Example Installation and Setup Source: https://symfony-vite.pentatrion.com/guide/examples This bash script outlines the steps to clone the symfony-vite-dev repository, install dependencies for vite-bundle and vite-plugin-symfony, set up specific playgrounds, install Composer dependencies, start the Symfony local server, and run the development environment. It also includes commands for installing all playgrounds at once. ```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/ 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 ``` -------------------------------- ### Symfony Vite Plugin - Getting Started and Installation Source: https://symfony-vite.pentatrion.com/fr/in-depth/plugin Initial steps for using the Symfony Vite plugin, including getting started and installation procedures. ```fr ## Guide [Bien démarrer ](https://symfony-vite.pentatrion.com/fr/guide/getting-started) [Installation ](https://symfony-vite.pentatrion.com/fr/guide/installation) ``` -------------------------------- ### Development Environment Setup Source: https://symfony-vite.pentatrion.com/guide/installation Starts the Symfony local web server and the Vite development server for local development. ```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 ``` -------------------------------- ### Symfony Application Setup and Twig Bundle Installation Source: https://symfony-vite.pentatrion.com/guide/installation This snippet demonstrates the initial setup of a Symfony application, including creating a new project, installing dependencies, and requiring the Symfony Twig bundle and Maker bundle. It also shows how to generate a basic controller. ```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 ``` -------------------------------- ### Vite Dev Server Index.html Source: https://symfony-vite.pentatrion.com/guide/getting-started Example of an index.html file served by the Vite development server. It includes references to the Vite client script for hot module replacement and the application's entry point. ```html Vite in Dev mode

``` -------------------------------- ### Vite Production Build Index.html Source: https://symfony-vite.pentatrion.com/guide/getting-started Example of an index.html file generated after a Vite production build. It includes references to hashed static assets for JavaScript and CSS. ```html Vite Build

``` -------------------------------- ### Installation and Development Setup Source: https://symfony-vite.pentatrion.com/extra/contribute This bash script provides instructions for cloning the repository, installing project dependencies using `make` commands, and starting the development environment 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/ ``` -------------------------------- ### Development Setup with Symfony Vite Dev Source: https://symfony-vite.pentatrion.com/fr/stimulus/installation Instructions for cloning the `symfony-vite-dev` repository and setting up a basic Stimulus integration with Symfony. Includes commands for dependency installation, Vite compilation, and running the development server. ```bash git clone https://github.com/lhapaipai/symfony-vite-dev.git cd symfony-vite-dev # installe les dépendances de vite-bundle # compile vite-plugin-symfony make install cd playground/stimulus-basic # ou bien pour Symfony UX cd playground/stimulus composer install symfony serve pnpm dev ``` -------------------------------- ### Vite Configuration with Entry Points Source: https://symfony-vite.pentatrion.com/guide/getting-started Configuration for Vite using `vite.config.js` to define application entry points for the build process. ```js // vite.config.js export default defineConfig({ build: { rollupOptions: { app: './path/to/app.js', }, }, }) ``` -------------------------------- ### Basic HTML Entry Point for Vite Source: https://symfony-vite.pentatrion.com/guide/getting-started This snippet shows a standard HTML file that serves as the entry point for a Vite-powered application. It includes essential meta tags, a body element, and a script tag to load the main application module. ```html Vite Project

``` -------------------------------- ### entrypoints.json (Production) Source: https://symfony-vite.pentatrion.com/guide/getting-started The structure of the `entrypoints.json` file after a production build. It lists the generated static assets for JavaScript and CSS. ```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 } ``` -------------------------------- ### Example Stimulus Controller Source: https://symfony-vite.pentatrion.com/fr/stimulus/installation A basic Stimulus controller demonstrating connection, targets, and values. It logs a greeting message when connected, using a 'welcome' identifier and a 'title' target. ```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}`; } } ``` -------------------------------- ### entrypoints.json (Development) Source: https://symfony-vite.pentatrion.com/guide/getting-started The structure of the `entrypoints.json` file when the Vite development server is active. It includes the Vite server origin and base path. ```json { "isProd": false, "viteServer": { "origin": "http://[::1]:5173", "base": "/build/" }, "entryPoints": { "app": { "js": [ "http://[::1]:5173/build/src/app.ts" ] } }, "legacy": false } ``` -------------------------------- ### Twig Integration for Vite Assets Source: https://symfony-vite.pentatrion.com/guide/getting-started Example of using Twig functions `vite_entry_script_tags` and `vite_entry_link_tags` to dynamically include Vite assets in Symfony templates. ```twig {{ vite_entry_script_tags('app') }} {{ vite_entry_link_tags('app') }} ``` -------------------------------- ### Symfony Vite Configuration Example Source: https://symfony-vite.pentatrion.com/extra/migration Example of configuring asset packages in Symfony's framework.yaml, specifically for Vite. ```yaml framework: assets: packages: build1: # same name as your service defined above version_strategy: 'pentatrion_vite.asset_strategy_build1' version_strategy: 'pentatrion_vite.asset_strategy_config1' ``` -------------------------------- ### Installation de l'exemple 'basic' Source: https://symfony-vite.pentatrion.com/fr/guide/examples Instructions pour cloner le dépôt, installer les dépendances principales, installer les dépendances d'un exemple spécifique, démarrer le serveur local et lancer le processus de développement Vite. ```bash git clone https://github.com/lhapaipai/symfony-vite-dev.git cd symfony-vite-dev ## Installation des dépendances principales vite-bundle/vite-plugin-symfony make install # si vous souhaitez tester un exemple en particulier # - "basic" exemple principal # - "stimulus-basic" pour stimulus seul # - "stimulus" pour stimulus couplé avec Symfony UX # - les autres exemples sont pour des cas spécifiques cd playground/ symfony composer install # démarrage de l'environnement de développement. symfony local:server:start npm run dev # depuis votre navigateur rendez-vous sur : https://127.0.0.1:8000/ # si vous souhaitez installer tous les exemples en une fois # - composer install # - pnpm run build make install-playgrounds ``` -------------------------------- ### Development Setup and Execution Source: https://symfony-vite.pentatrion.com/stimulus/installation Instructions for cloning the development repository, installing dependencies, building the plugin, and running the project with Vite. ```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 ``` -------------------------------- ### Production Build Source: https://symfony-vite.pentatrion.com/guide/installation Builds the JavaScript and CSS files for production deployment using Vite. ```bash # build your js/css files npm run build ``` -------------------------------- ### Stimulus App Initialization and Controller Registration (JavaScript) Source: https://symfony-vite.pentatrion.com/fr/stimulus/installation Initializes the Stimulus application and registers controllers from a specified directory using `import.meta.glob`. This is the core setup for Stimulus in a Vite-managed Symfony project. ```js import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"; const app = startStimulusApp(); registerControllers( app, import.meta.glob('./controllers/*_controller.js', { query: "?stimulus", /** * toujours à true, la comportement `lazy` est géré en interne avec * import.meta.stimulusFetch (voir référence) */ eager: true, }) ) ``` -------------------------------- ### Example Stimulus Controller Source: https://symfony-vite.pentatrion.com/stimulus/installation A basic Stimulus controller demonstrating connection, target access, and value binding. ```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}`; } } ``` -------------------------------- ### Installation du Vite Bundle Source: https://symfony-vite.pentatrion.com/fr/guide/installation Installe le bundle pentatrion/vite-bundle via Composer et confirme l'exécution de la recette associée. ```bash composer require pentatrion/vite-bundle # Review the recipe at https://github.com/symfony/recipes-contrib/tree/main/pentatrion/vite-bundle/1.0 # Do you want to execute this recipe? # [y] Yes # (defaults to n): y ``` -------------------------------- ### Symfony Vite Bundle Installation Source: https://symfony-vite.pentatrion.com/guide/installation This code installs the Symfony Vite Bundle using Composer and accepts the Symfony Flex recipe. It also provides guidance on updating the package.json file if it already exists. ```bash composer require pentatrion/vite-bundle # Review the recipe at https://github.com/symfony/recipes-contrib/tree/main/pentatrion/vite-bundle/1.0 # Do you want to execute this recipe? # [y] Yes # (defaults to n): y ``` -------------------------------- ### Install Stimulus Bundle Source: https://symfony-vite.pentatrion.com/fr/stimulus/installation Installs the Stimulus Bundle for Symfony using Composer and uninstalls the @symfony/stimulus-bridge package. ```bash composer require symfony/stimulus-bundle # désinstallez le package @symfony/stimulus-bridge ``` -------------------------------- ### Installation Symfony avec Twig et Maker Source: https://symfony-vite.pentatrion.com/fr/guide/installation Crée une nouvelle application Symfony, installe les dépendances, ajoute le bundle Twig et le bundle Maker pour la génération de code. ```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 Vite Bundle Source: https://symfony-vite.pentatrion.com/fr/extra/manual-installation Command to install the Symfony Vite bundle using Composer. ```bash composer require pentatrion/vite-bundle ``` -------------------------------- ### Symfony Vite Plugin - Examples and Contribution Source: https://symfony-vite.pentatrion.com/fr/in-depth/plugin Examples of plugin usage and information on how to contribute to the project. ```fr ## Guide [Exemples ](https://symfony-vite.pentatrion.com/fr/guide/examples) ## Extra [Contribuez ](https://symfony-vite.pentatrion.com/fr/extra/contribute) ``` -------------------------------- ### Install JavaScript Dependencies Source: https://symfony-vite.pentatrion.com/guide/installation Installs project dependencies using npm, including Vite and vite-plugin-symfony. ```bash npm install ``` -------------------------------- ### Installation des dépendances Source: https://symfony-vite.pentatrion.com/fr/guide/installation Installe les dépendances JavaScript nécessaires pour le projet, y compris Vite et vite-plugin-symfony. ```bash npm install ``` -------------------------------- ### Starting Vite Development Server Source: https://symfony-vite.pentatrion.com/fr/guide/getting-started Command to launch the Vite development server. ```bash npx vite ``` -------------------------------- ### Install Symfony Vite Bundle Source: https://symfony-vite.pentatrion.com/extra/manual-installation Command to install the Pentatrion Vite Bundle using Composer. ```bash composer require pentatrion/vite-bundle ``` -------------------------------- ### Manual Stimulus App Initialization and Controller Registration Source: https://symfony-vite.pentatrion.com/fr/stimulus/reference This example provides a manual equivalent to `startStimulusApp`, demonstrating how to start the Stimulus application using `@hotwired/stimulus` directly. It also illustrates how to register controllers, including handling both eager and lazy loading strategies based on the `controllers.json` virtual import. ```javascript import { Application } from "@hotwired/stimulus"; const app = Application.start(); /** * l'import virtuel transforme votre fichier controllers.json en javascript * équivalent à * 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); } } ``` -------------------------------- ### Installation Source: https://symfony-vite.pentatrion.com/fr/stimulus/symfony-ux Installs the Symfony UX React package using Composer and forces npm installation. ```bash composer require symfony/ux-react npm i --force ``` -------------------------------- ### Running Vite Dev Server with Symfony CLI (No TLS) Source: https://symfony-vite.pentatrion.com/guide/tips Starts the Vite development server and the Symfony development server without TLS, useful for simpler HTTP development setups. ```bash npm run dev symfony serve --no-tls ``` -------------------------------- ### Twig Functions for Vite Assets Source: https://symfony-vite.pentatrion.com/guide/installation Demonstrates how to use Twig functions to include Vite-managed stylesheets and JavaScript entry points in your Symfony application. ```twig {# base.html.twig #} {% block stylesheets }} {{ vite_entry_link_tags('app') }} {% endblock %} {% block javascripts }} {{ vite_entry_script_tags('app') }} {% endblock %} ``` -------------------------------- ### Example YAML with Multiple Configurations Source: https://symfony-vite.pentatrion.com/reference/vite-bundle YAML example demonstrating the use of 'default_config' and 'builds' (deprecated) for managing multiple Vite build configurations, including custom attributes for each. ```yaml pentatrion_vite: default_config: builds: : build_directory: config1 script_attributes: # etc link_attributes: # etc preload_attributes: # etc ``` -------------------------------- ### Installation Source: https://symfony-vite.pentatrion.com/fr/stimulus/symfony-ux Installs the symfony/ux-vue package using Composer and npm. After installation, specific corrections might be needed in bootstrap files. ```bash composer require symfony/ux-vue npm i --force ``` -------------------------------- ### Installation Source: https://symfony-vite.pentatrion.com/fr/stimulus/symfony-ux Installs the Symfony UX Svelte package using Composer and forces npm installation. ```bash composer require symfony/ux-svelte npm i --force ``` -------------------------------- ### Installation et Lancement de l'Environnement de Développement Source: https://symfony-vite.pentatrion.com/fr/extra/contribute Commandes pour cloner le dépôt, installer les dépendances du bundle Vite et du plugin Symfony, installer les dépendances des playgrounds, et démarrer l'environnement de développement pour le playground 'basic'. ```bash git clone https://github.com/lhapaipai/symfony-vite-dev.git\ncd symfony-vite-dev\n## Install vite-bundle/vite-plugin-symfony dependencies\nmake install\n## Install playgrounds (npm i/composer i for each of them)\nmake install-playgrounds\n# launch the development environment for the `basic` playground.\ncd playground/basic\nsymfony local:server:start\nnpm run dev ``` -------------------------------- ### Stimulus App Initialization and Controller Registration (TypeScript) Source: https://symfony-vite.pentatrion.com/fr/stimulus/installation Initializes the Stimulus application and registers controllers from a specified directory using `import.meta.glob` in a TypeScript environment. It includes type safety for controller imports. ```ts import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"; const app = startStimulusApp(); registerControllers( app, import.meta.glob( "./controllers/*_controller.ts", { query: "?stimulus", /** * toujours à true, la comportement `lazy` est géré en interne avec * import.meta.stimulusFetch (voir référence) */ eager: true, }, ), ); ``` -------------------------------- ### Directory Structure for Assets Source: https://symfony-vite.pentatrion.com/fr/extra/manual-installation Recommended directory structure for JavaScript and CSS assets when manually installing Symfony Vite. ```text ├──assets │ ├──app.js │ ├──app.css │... ├──public ├──composer.json ├──package.json ├──vite.config.js ``` -------------------------------- ### Basic Installation Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux Installs the Symfony UX Svelte package and forces npm installation. ```bash composer require symfony/ux-svelte npm i --force ``` -------------------------------- ### Start Stimulus Application Source: https://symfony-vite.pentatrion.com/fr/stimulus/reference This code snippet shows the basic usage of `startStimulusApp` from `vite-plugin-symfony/stimulus/helpers` to initialize a Stimulus application. It's a straightforward way to get Stimulus running in your Symfony project. ```javascript import { startStimulusApp } from "vite-plugin-symfony/stimulus/helpers"; const app = startStimulusApp(); ``` -------------------------------- ### Vite Bundle Configuration Example Source: https://symfony-vite.pentatrion.com/fr/reference/vite-bundle Example of how to configure the Vite bundle in Symfony's `config/packages/pentatrion_vite.yaml` file. This snippet shows basic settings like public directory, build directory, and error handling for missing entries. ```yaml pentatrion_vite: public_directory: public build_directory: build throw_on_missing_entry: true # etc... ``` -------------------------------- ### Example package.json structure for Vite Source: https://symfony-vite.pentatrion.com/extra/migration-webpack-encore Illustrative example of dev dependencies and scripts for a package.json file when using Vite. ```json { "devDependencies": { "vite": "^4.0.0", "vite-plugin-symfony": "^0.2.0" }, "scripts": { "dev": "vite", "build": "vite build" } } ``` -------------------------------- ### Install Vite Bundle Source: https://symfony-vite.pentatrion.com/fr Installs the pentatrion/vite-bundle package using Composer for Symfony applications. ```php composer require pentatrion/vite-bundle ``` -------------------------------- ### Start Stimulus App Source: https://symfony-vite.pentatrion.com/stimulus/reference Demonstrates how to start a Stimulus application using the `startStimulusApp` helper function from `vite-plugin-symfony`. It also shows the equivalent using `@hotwired/stimulus` directly and how to register 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); } } ``` -------------------------------- ### Example package.json for Vite Bundle Source: https://symfony-vite.pentatrion.com/fr/extra/migration-webpack-encore This JSON object shows an example of a `package.json` file configured for the Vite Bundle, including necessary development dependencies and scripts for Vite integration in a Symfony project. ```json { "scripts": { "build": "vite build", "dev": "vite", "preview": "vite preview" }, "devDependencies": { "vite": "^x.y.z", "vite-plugin-symfony": "^a.b.c" } } ``` -------------------------------- ### Twig Rendered Tags (Production) Source: https://symfony-vite.pentatrion.com/guide/getting-started The HTML output of Twig functions when Vite is used in a production build, referencing the hashed static assets. ```html ``` -------------------------------- ### Twig Rendered Tags (Development) Source: https://symfony-vite.pentatrion.com/guide/getting-started The HTML output of Twig functions when Vite is running in development mode, including the Vite client and the application entry point from the dev server. ```html ``` -------------------------------- ### Build pour l'environnement de production Source: https://symfony-vite.pentatrion.com/fr/guide/installation Génère les fichiers JavaScript et CSS optimisés pour le déploiement en production. ```bash # générez vos fichiers js/css. npm run build ``` -------------------------------- ### HMR Setup for Stimulus Initialization File Source: https://symfony-vite.pentatrion.com/fr/stimulus/installation Ensures Hot Module Replacement (HMR) works correctly for Stimulus by exposing the Stimulus app instance globally when HMR is enabled. This requires the initialization file to be named `bootstrap.js` or `bootstrap.ts`. ```js // assets/stimulus.js import { startStimulusApp } from "vite-plugin-symfony/stimulus/helpers"; const app = startStimulusApp(); // some logic + if (import.meta.hot) { + window.$$stimulusApp$$ = stimulusApp; + } ``` -------------------------------- ### Démarrage en environnement de développement Source: https://symfony-vite.pentatrion.com/fr/guide/installation Lance le serveur web local de Symfony et le serveur de développement Vite. Permet de travailler sur le projet avec le rechargement à chaud. ```bash # démarrez votre serveur Web local Symfony (port d'écoute 8000 par défaut) symfony serve # démarrez votre serveur de développement Vite (port d'écoute 5173 par défaut) npm run dev ``` -------------------------------- ### Dependency Injection Example in Twig Extension Source: https://symfony-vite.pentatrion.com/extra/migration Demonstrates how to inject services like `EntrypointsLookup`, `EntrypointsLookupCollection`, and `EntrypointRenderer` into a custom Twig extension. ```php use Twig\Extension\AbstractExtension; use Pentatrion\ViteBundle\Asset\EntrypointRenderer; use Pentatrion\ViteBundle\Asset\EntrypointsLookup; use Pentatrion\ViteBundle\Service\EntrypointRenderer; use Pentatrion\ViteBundle\Service\EntrypointsLookupCollection; class YourTwigExtension extends AbstractExtension { public function __contruct( private EntrypointsLookup $entrypointsLookup, private EntrypointsLookupCollection $entrypointsLookupCollection, private EntrypointRenderer $entrypointRenderer ) { $entrypointsLookup = $entrypointsLookupCollection->getEntrypointsLookup(); // ... } } ``` -------------------------------- ### Structure du dépôt de développement Source: https://symfony-vite.pentatrion.com/fr/guide/examples Aperçu de la structure des fichiers du dépôt de développement de Symfony Vite, incluant les dossiers pour le bundle, le plugin, les dépendances, les exemples et les fichiers de configuration. ```bash . ├── src │ ├── vite-bundle │ └── vite-plugin-symfony ├── node_modules │ ├── acorn │ ├── ... │ └── yocto-queue ├── package.json ├── package-lock.json ├── phpcs.phar ├── playground │ ├── basic │ ├── legacy │ ├── multiple │ ├── ssr │ └── vite-only ├── README.md └── shared └── theme ``` -------------------------------- ### Vite Configuration for Stimulus Source: https://symfony-vite.pentatrion.com/fr/stimulus/installation Configures Vite to use the Symfony plugin and enable Stimulus integration. Allows specifying Stimulus controller paths or configuration objects. ```js import { defineConfig } from 'vite' import symfonyPlugin from 'vite-plugin-symfony'; export default defineConfig({ plugins: [ symfonyPlugin({ // un booléen pour activer stimulus avec les options par défaut stimulus: true // ou précisez le chemin de votre controllers.json stimulus: './assets/other-dir/controllers.json' // vous pouvez aussi spécifier un objet de configuration stimulus: { fetchMode: "lazy" } }), ], build: { rollupOptions: { input: { "app": "./assets/app.js", } } }, }); ``` -------------------------------- ### entrypoints.json (Development) Source: https://symfony-vite.pentatrion.com/fr/guide/getting-started Example of the entrypoints.json file generated by vite-plugin-symfony when the Vite development server is running. It includes Vite server details and entry point configurations. ```json { "isProd": false, "viteServer": { "origin": "http://[::1]:5173", "base": "/build/" }, "entryPoints": { "app": { "js": [ "http://[::1]:5173/build/src/app.ts" ] } }, "legacy": false } ``` -------------------------------- ### Vue Component Example Source: https://symfony-vite.pentatrion.com/stimulus/symfony-ux A simple Vue 3 component using the Composition API (` ``` -------------------------------- ### Twig Integration for Stimulus Controller Source: https://symfony-vite.pentatrion.com/fr/stimulus/installation Attaches a Stimulus controller to an HTML element using the `stimulus_controller` Twig function. This is a convenient way to initialize controllers directly in your templates. ```twig {# in some template #}

``` -------------------------------- ### Vite Configuration File 1 Source: https://symfony-vite.pentatrion.com/guide/multiple-configurations Configuration for the first Vite build, specifying a base path of `/build-1/`, output directory `public/build-1`, and entry points for 'welcome' and 'theme'. ```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 Integration for Vite Assets Source: https://symfony-vite.pentatrion.com/fr/stimulus/installation Includes Vite-generated CSS and JavaScript assets in the base Twig layout. This ensures that your application's entry points are correctly linked. ```twig {# base.html.twig #} {% block stylesheets %} {{ vite_entry_link_tags('app') }} {% endblock %} {% block javascripts %} {{ vite_entry_script_tags('app') }} {% endblock %} ``` -------------------------------- ### Stimulus Controller Registration with Eager Loading Source: https://symfony-vite.pentatrion.com/extra/migration Example of registering Stimulus controllers in `bootstrap.js` with eager loading enabled using `import.meta.glob`. This ensures controllers are loaded immediately. ```js import { registerControllers } from "vite-plugin-symfony/stimulus/helpers"; registerControllers( app, import.meta.glob('./controllers/*_(lazy)\?controller.[jt]s(x)\?') ) registerControllers( app, import.meta.glob('./controllers/*_controller.js', { query: "?stimulus", eager: true, }) ) ``` -------------------------------- ### Vue Component Example Source: https://symfony-vite.pentatrion.com/fr/stimulus/symfony-ux A simple Vue 3 Single File Component (SFC) that displays a greeting message. It uses the ` ``` -------------------------------- ### Building Vite for Production Source: https://symfony-vite.pentatrion.com/fr/guide/getting-started Command to compile and bundle the application for production using Vite. ```bash npx vite build ``` -------------------------------- ### TypeScript Type Definitions for Stimulus Source: https://symfony-vite.pentatrion.com/fr/stimulus/installation Adds type definitions for Stimulus integration in TypeScript projects, enabling better autocompletion and type checking for Stimulus-related imports and meta properties. ```ts /// ``` -------------------------------- ### Configuration CDN Entrypoints Source: https://symfony-vite.pentatrion.com/fr/guide/cdn Exemple de fichier `public/build/entrypoints.json` configuré pour pointer vers un CDN. Ce fichier est essentiel pour que Vite puisse trouver et charger les assets depuis votre fournisseur de CDN. ```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 } ``` -------------------------------- ### Twig Function for Assets Source: https://symfony-vite.pentatrion.com/guide/assets Example of using the Vite Twig function to include assets in a Twig template. This function leverages the configuration to correctly link to versioned assets. ```twig {{ vite_asset('app.js') }} ``` -------------------------------- ### Referencing Assets from Different Packages in Twig Source: https://symfony-vite.pentatrion.com/guide/assets This example shows how to reference assets using the `asset()` Twig function, specifying the package name. The first call uses the 'vite' package, while the second call uses the default Symfony asset handling. ```twig {# Vite asset version strategy #} {{ asset('assets/images/avatar.jpg', 'vite') }} {# default strategy #} {{ asset('other-location/logo.svg')}} ``` -------------------------------- ### Legacy Entry Point Script (Page Welcome) Source: https://symfony-vite.pentatrion.com/fr/in-depth/preload Similar to the theme script, this HTML snippet loads a legacy entry point for a 'pageWelcome' component. It also uses 'nomodule' and 'crossorigin', and employs System.import to load the script from the 'data-src' attribute. ```html ``` -------------------------------- ### CSS File Entrypoints Source: https://symfony-vite.pentatrion.com/guide/tips Demonstrates how to configure CSS files as entry points in Symfony Vite. This allows for better asset management and styling integration. ```twig {% block stylesheets %} {{ vite_entry_link_tags('app') }} {{ vite_entry_link_tags('styles') }} {% endblock %} ``` -------------------------------- ### Install Stimulus Bundle Source: https://symfony-vite.pentatrion.com/stimulus/installation This command installs the Symfony Stimulus Bundle using Composer, which is necessary for integrating Stimulus with your Symfony project. ```bash composer require symfony/stimulus-bundle ``` -------------------------------- ### Starting a Stimulus Application (`startStimulusApp`) Source: https://symfony-vite.pentatrion.com/fr/stimulus/reference Explains how to initialize a Stimulus application using the `startStimulusApp` function. This function creates a Stimulus application instance and preloads controllers defined in `./assets/controllers.json`. It's the recommended place to add controllers from Symfony UX components or third-party Stimulus components. ```javascript import { startStimulusApp } from "vite-plugin-symfony/stimulus/helpers"; const app = startStimulusApp(); ``` -------------------------------- ### Générer des certificats personnalisés avec mkcert Source: https://symfony-vite.pentatrion.com/fr/guide/tips Instructions pour générer des certificats TLS personnalisés à l'aide de `mkcert`. Cela inclut l'installation de `mkcert` et la création de fichiers de clé et de certificat pour `localhost` et `127.0.0.1`. ```bash mkcert -install mkcert -key-file certs/vite.key.pem -cert-file certs/vite.crt.pem localhost 127.0.0.1 ``` -------------------------------- ### Install Vite Symfony Plugin Source: https://symfony-vite.pentatrion.com/fr Installs the vite-plugin-symfony as a development dependency using npm. ```javascript npm i -D vite-plugin-symfony ``` -------------------------------- ### Dependency Pre-Bundling Source: https://symfony-vite.pentatrion.com/guide/tips Explains how to pre-bundle dependencies with Vite for improved performance. This involves configuring Vite to bundle common libraries separately. ```bash # Install dependencies npm install # Pre-bundle dependencies (example using vite-plugin-checker) vite build --force ``` -------------------------------- ### Vite Development Server Index HTML Source: https://symfony-vite.pentatrion.com/fr/guide/getting-started Example of the index.html file served by Vite during development. It includes a script tag for the Vite client to enable hot module replacement and a script tag for the application's entry point. ```html Vite in Dev mode

```