Tutoriel Symfony/ViteJS : Utiliser ViteJS avec Symfony
Symfony is a powerful PHP framework used for building web applications. It provides a solid foundation for developing complex applications with ease. ViteJS, on the other hand, is a lightning-fast build tool designed for modern web development workflows. In this tutorial, we will learn how to integrate ViteJS with Symfony to enhance the development experience and improve performance.
Step 1: Install Symfony
Before we can start using ViteJS with Symfony, we need to have Symfony installed on our machine. Visit the Symfony website and follow the installation instructions for your operating system.
Step 2: Create a new Symfony project
Once Symfony is installed, open your terminal and navigate to the directory where you want to create your new Symfony project. Run the following command:
symfony new my_project
This will create a new Symfony project called “my_project” in the current directory.
Step 3: Install ViteJS
Now, let’s install ViteJS in our Symfony project. Navigate to the project directory and run the following command:
cd my_project
npm init vite@latest
Follow the prompts to configure your ViteJS setup. Make sure to choose “Vue” or “React” as your framework of choice, depending on your preferences.
Step 4: Integrate ViteJS with Symfony
Once ViteJS is installed, we need to integrate it with Symfony. Open your Symfony project in your preferred code editor and navigate to the “/public” directory. In this directory, you will find a “index.php” file. Replace the contents of this file with the following code:
<!DOCTYPE html>
<html>
<head>
<title>My Symfony App</title>
<script src="/dist/main.js" type="module"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
This will include the ViteJS built JavaScript file in your Symfony project. Make sure the path to the “main.js” file matches the output path specified in your ViteJS configuration.
Step 5: Run the Symfony development server
Finally, we need to run the Symfony development server to see our integrated ViteJS setup in action. Open your terminal, navigate to the project directory, and run the following command:
symfony server:start
This will start the Symfony development server and allow you to access your application in the browser.
Conclusion
By integrating ViteJS with Symfony, we can leverage the benefits of faster build times and improved development experience. With ViteJS, we can enjoy hot module replacement, faster compilation, and better performance, making Symfony development even more efficient and pleasant.
Bravo!
Would be even cooler if it was in english.
Waah Grafikart tu es vraiment impressionnant ! Merci pour cette vidéo mais également pour les milliers d'autres!.
Merci pour ce tuto d'une très grande aide ! J'ai aussi eu le problème de refresh infini avec Vite, je l'ai résolu en démarrant le serveur symfony avec la commande suivante : symfony server:start –no-tls. Cela permet de désactiver le https pour le dev en local.
My french is quite bad but I understood quite more than I thought and it was really very helpful! Thanks!
Merci beaucoup ! Dans la dernière version (2.3.8) j'ai du ajouter
hmr: {
protocol: 'ws'
}
Dans la configuration du server dans vite.config.ts afin de sortir du rechargement infini
Bon bha là pour le coup je crois que j'aurais dû me documenter sur vite.js avant, parce que j'ai pas vraiment compris ce que ça apportait 😀
Merci, c'est super !! juste une petite remarque, le tableau imports dans le manifest.json contient un tableau de clés et non directement un tableau de fichiers. (il y a un ligne de plus quoi …)
Merci beaucoup !
Merci beaucoup, vous avez une bonne manière de transmission de connaissances !
Merci, c'est top!!
Tu es le meilleur, meilleur meilleur chaine Grafikart ………
Comment finir de te remercier????
Le monde du code t'est redevable.
Selon vous, peut-on devenir développeur sans diplôme ? Sincérement.
Merci, c'est top!!