✨ Installation rapide et facile avec les recettes Symfony Flex.

Pré-requis

Afin de tester l'implémentation, vous devez avoir une application Symfony avec au moins le bundle Twig installé.

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

Installation

Si votre application Symfony utilise actuellement le bundle Webpack Encore, consultez la documentation de migration avant de commencer.

Installez le bundle et la recette associée :

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

Si vous avez déjà un package.json dans votre projet avant l'installation du bundle, la recette aura conservé votre fichier sans le modifier, vous devrez donc le mettre à jour en vous référant au fichier package.json de référence (sections scripts et devDependencies).

#  installez vos dépendances js (vite et vite-plugin-symfony)
npm install

Add this Twig functions in any template or base layout where you need to include a JavaScript entry.

{# base.html.twig #}
{% block stylesheets %}
    {{ vite_entry_link_tags('app') }}
{% endblock %}

{% block javascripts %}
    {{ vite_entry_script_tags('app') }}
{% endblock %}

INFO

Habituellement, lorsque vous démarrez un nouveau projet Vite, vous utilisez le package create-vite. Rendez-vous sur la page github du projet pour ajouter vos dépendances habituelles selon vos besoins : typescript, eslint, prettier, react...

• Official create-vite github package
• Awesome Vite : Community templates

💻 Utilisation dans un environnement de développement

# 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

Vous pouvez vous rendre sur : https://127.0.0.1:8000/welcome.

Ouvrez votre console d'outils de développement, vous verrez : Happy coding !!.

📦 Utilisation en environnement de production

# générez vos fichiers js/css.
npm run build

Vous pouvez vous rendre sur : https://<votre-domaine>/welcome.