Comment partager de la configuration entre Symfony et son front en JS ?

Imaginez que vous avez de la configuration qui doit être disponible :

• Dans vos templates Twig ;
• Dans votre code JavaScript ;
• Et pourquoi pas dans vos services PHP.

On peut alors se demander comment partager cette configuration pour éviter de la dupliquer.

Section intitulée le-fichier-de-configurationLe fichier de configuration

La première chose à mettre en place est le fichier de configuration. Nous utilisons le format JSON qui est un format d’échange qui est facilement compris par PHP et JavaScript :

// ./assets/config.json
{
    "a_key": "a value",
    "another_key": "another value"
}

Section intitulée l-utilisation-en-javascriptL’utilisation en JavaScript

Ensuite, pour le récupérer depuis un fichier JavaScript, il suffit de l’importer :

// ./assets/app.js

import config from './config.json';

console.log(config);

Section intitulée l-utilisation-via-symfonyL’utilisation via Symfony

Ensuite, pour exposer la configuration dans Symfony, nous allons utiliser un paramètre config.

Si votre version de Symfony le permet, vous pouvez utiliser une variable d’environnement avec des processors :

# config/services.yaml
parameters:
    env(CONFIG_FILE): '%kernel.project_dir%/assets/config.json'
    config: '%env(json:file:CONFIG_FILE)%'

Si votre version de Symfony est trop ancienne, ou si vous voulez bidouiller la configuration en PHP :

<?php
// config/packages/parameters.php

$container->setParameter(
    'config',
    json_decode(
        file_get_contents(__DIR__ . '/../../assets/config.json'),
        true,
        flag: JSON_THROW_ON_ERROR
    )
);

Sur les dernières versions de Symfony, ce fichier est automatiquement lu. Si ce n’est pas le cas, vous allez devoir le charger manuellement :

# config/packages/framework.yaml
imports:
    - { resource: 'parameters.php' }

Section intitulée l-utilisation-dans-twigL’utilisation dans Twig

Pour récupérer la configuration depuis twig, nous allons déclarer une nouvelle globale :

# config/packages/twig.yaml
twig:
    globals:
        config: '%config%'

Et son utilisation se fait de la manière suivante :

{# template/base.html.twig #}

...
{{ config.a_key }}
...

Et voilà ! Avec un seul fichier JSON, nous sommes capables d’exposer des configurations dans les trois langages que nous utilisons couramment avec Symfony.

Et vous, avez-vous une autre technique ?