Aller au contenu principal

Gestion des assets avec ViteJS

Installation du bundle​

remarque

Guide officiel du bundle Pentatrion

composer require pentatrion/vite-bundle
npm install

Configuration du bundle​

Changement du répertoire de build​

config/packages/pentatrion_vite.yaml
pentatrion_vite:
    # Base public path when served in development or production
    base: /assets/
    # path to the web root relative to the Symfony project root directory
    public_dir: /public
vite.config.js
// [...]

export default defineConfig({
    plugins: [
        symfonyPlugin({
            buildDirectory: 'assets',
        }),
    ],
    build: {
        assetsDir: 'build',
        // [...]

Activer le SourceMap CSS​

vite.config.js
export default defineConfig({
    // [...]
    css: {
        devSourcemap: true,
    },
    // [...]

Surveiller les fichiers Twig​

vite.config.js
    symfonyPlugin({
        // [...]
        refresh: ["templates/**/*.twig"],
    }),

Activer le serveur HMR avec prise en charge du « Remote »​

vite.config.js
import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";
import { networkInterfaces } from 'os';

let localIP = () => {
    const nets = networkInterfaces();
    for (const name of Object.keys(nets)) {
        for (const net of nets[name]) {
            const familyV4Value = typeof net.family === 'string' ? 'IPv4' : 4
            if (net.family === familyV4Value && !net.internal)
                return net.address;
        }
    }
};

export default defineConfig({
    // [...]
    server: {
        host: true,
        cors: true,
        hmr: {
            host: localIP(),
            protocol: 'ws',
        },
    }

    // [...]
.symfony.local.yaml
# disable tls on symfony dev server
http:
  no_tls: true

Inclusion des assets avec Twig​

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

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

Commandes​

Démarrer le serveur de developpement Vite​

npm run dev
astuce

Il est possible de démarrer automatiquement le serveur Vite avec la commande symfony serve.

.symfony.local.yaml
workers:
  vite:
    cmd: ['npm', 'run', 'dev']

Build les assets​

npm run build