This bundle allows you to integrate Vite into your Symfony application by using WebpackEncoreBundle and ViteFait
Make sure Node and a package manager (Yarn) are installed.
Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:
$ composer require bechir/vite-bundleThen, enable the bundle by adding it to the list of registered bundles
in the config/bundles.php file of your project:
// config/bundles.php
return [
// ...
Bechir\ViteBundle\BechirViteBundle::class => ['dev' => true],
];Add the bundle configuration in config/packages/bechir_vite.yaml:
bechir_vite:
output_path: '%kernel.project_dir%/public/dist'# using yarn
yarn add --dev vite-fait
# using npm
npm install vite-fait --save-devCreate vite.config.js in the root folder and add the following code inside the file:
const ViteFait = require('vite-fait');
ViteFait
.setRoot('assets')
.setOutputPath('../public/dist')
.addEntry('app', './assets/app.js')
.addEntry('admin', './assets/admin/app.js');
module.exports = ViteFait.getViteConfig()Add vite-fait scripts in your package.json
{
"scripts": {
"build": "vite-fait build",
"dev": "vite-fait dev",
}
}Then run your first build with yarn build or npm run build
It generate entrypoints.json file in public/dist:
{
"entrypoints": {
"app": {
"js": [
"/dist/app.7f38ab96.js"
],
"css": [
"/dist/app.c385b6b3.css"
]
},
"admin": {
"js": [
"/dist/admin.a88436ae.js"
],
"css": [
"/dist/admin.0e68df5b.css"
]
}
}
}Add the twig functions in templates/base.html.twig:
<html>
<head>
{{ vite_entry_link_tags('app') }}
</head>
<body>
<!-- html code -->
{{ vite_entry_script_tags('app') }}
</body>
</html>Read the vite docs for more information
Read how to use vite plugins first before reading this section
Put your plugins inside the usePlugins method:
const fooPlugin = function() {
return {
name: 'vite-plugin-foo',
configureServer() {
console.log('foo');
}
}
}
ViteFait
.usePlugins(fooPlugin()) // use array for multiple plugins: [fooPlugin(), barPlugin()]- Add tests
- React support
- Vue support
- Documentation