Hello Symfony 7.2 — installation propre + Vite + React

#Pourquoi Symfony 7.2 + Vite plutôt qu’AssetMapper

AssetMapper est la solution sans build de Symfony : un fichier importmap, du JavaScript natif, et c’est servi. C’est élégant pour un projet vitrine sans React ni Tailwind.

Dès qu’on veut React 19, du JSX, et Tailwind 4 (qui exige un build de classes utilitaires), Vite redevient le bon outil. Le bundle officiel pentatrion/vite-bundle fait le pont avec Symfony : routes /build/* proxifiées vers le dev server en local, manifest généré en prod, intégration native avec StimulusBundle et UX React.

#Le setup minimal

symfony new portfolio --version=7.2.* --webapp
cd portfolio
composer remove symfony/asset-mapper
composer require pentatrion/vite-bundle symfony/ux-react
npm install -D vite vite-plugin-symfony @vitejs/plugin-react @tailwindcss/vite tailwindcss
npm install @hotwired/stimulus @hotwired/turbo react react-dom

💡 Les bridges @symfony/stimulus-bundle, @symfony/ux-react, @symfony/ux-turbo se linkent en file: vers le vendor/. Pas de double maintenance des versions.

#Le piège des paths Windows

Sur WAMP (Windows), évite symfony new . qui rate à cause des permissions du .git/. Préfère scaffolder dans un sous-dossier temporaire, puis déplacer le contenu.

#Le bonus tsconfig.json

Vite 8 utilise OXC (le transformer Rust qui remplace esbuild). Sans tsconfig.json à la racine, OXC échoue sur les fichiers du vendor/symfony/ux-turbo/assets/. Une config minimale avec allowJs: true et checkJs: false suffit à servir d’ancre.

#Pour aller plus loin

• Le code source de ce portfolio est public.
• L’article suivant montrera comment brancher le moteur Markdown — celui qui rend justement cette page.