Symfony & Vite✨ Easy installation with Symfony Flex recipe.
Prerequisites
In order to test the implementation you must have a Symfony application with at least the Twig bundle installed.
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):
# > WelcomeControllersymfony 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):
# > WelcomeControllerInstallation
If you come from Webpack Encore, check the migration documentation before starting.
Install the bundle and the associated recipe:
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): ycomposer 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): yIf you already have a package.json in your project before the installation of the bundle, the recipe will have kept your file without modifying it, so you will need to update it by referring to the package.json reference file (sections scripts and devDependencies).
# install your js dependencies (vite and vite-plugin-symfony)
npm install# install your js dependencies (vite and vite-plugin-symfony)
npm installAdd these Twig functions in any template or base layout where you need to include a style sheet or JavaScript entry.
{# base.html.twig #}
{% block stylesheets %}
{{ vite_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ vite_entry_script_tags('app') }}
{% endblock %}{# base.html.twig #}
{% block stylesheets %}
{{ vite_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ vite_entry_script_tags('app') }}
{% endblock %}INFO
Usually when you start a new Vite project, you use the create-vite package. Go to the project's github page to add your usual dependencies according to your needs: typescript, eslint, prettier, react...
💻 Usage in development environment
# 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 your Symfony local Web server (listening port 8000 by default)
symfony serve
# start your vite dev server (listening port 5173 by default)
npm run devYou can go to: https://127.0.0.1:8000/welcome.
Open your developer tools console you'll see : Happy coding !!.
📦 Usage in production environment
# build your js/css files
npm run build# build your js/css files
npm run buildYou can go to: https://<your-domain>/welcome.