Routing.js

Example.js

import Routing from './path/to/routing';

;(function() {
    const init = () => {
        let myRoute = Routing.generate('my_route');
        console.log(myRoute); 
    };
  
    document.addEventListener("DOMContentLoaded", () => {
        init();
    });
})();

Routing.js

import Routing from 'fos-routing';
import 'regenerator-runtime/runtime';

// In ezPlatform, FOS-JS is overrided by "eZ/Bundle/EzPublishCoreBundle/Routing/JsRouting/ExposedRoutesExtractor.php"
// So we cant build json file, it 's only accessible by URL "/js/routing.json"
const getJSON = async url => {
    try {
        const response = await fetch(url);
        if(!response.ok) // check if response worked (no 404 errors etc...)
            throw new Error(response.statusText);

         // get JSON from the response
        return await response.json(); // returns a promise, which resolves to this data value
    } catch(error) {
        return error;
    }
};

let jsonUrl = window.location.protocol + '//' + window.location.hostname + ":" + window.location.port + "/admin/js/routing.json";
getJSON(jsonUrl).then(data => {
    Routing.setData(data);
}).catch(error => {
    console.error(error);
});

// import file with routes data
//import RoutingData from '/web/js/fos_js_routes_export';

// export library
export default Routing;

template.twig

{% extends 'EzPlatformAdminUiBundle::layout.html.twig' %}

{%- block breadcrumbs -%}{{ parent() }}{%- endblock -%}

{# CAUTION : don't add fos-js routing here #}
{% block content %}
    // stuff
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('example') }}
{% endblock %}

webpack.config.js

const Encore = require('@symfony/webpack-encore');
const path = require('path');
const getEzConfig = require('./ez.webpack.config.js');
const eZConfigManager = require('./ez.webpack.config.manager.js');
const eZConfig = getEzConfig(Encore);
const customConfigs = require('./ez.webpack.custom.configs.js');

Encore.reset();
Encore.setOutputPath('web/assets/build')
    .setPublicPath('/assets/build')
    .enableSassLoader()
    .enableReactPreset()
    .enableSingleRuntimeChunk()
;

Encore.reset();
Encore
    .setOutputPath('web/assets/project')
    .setPublicPath('/assets/project')
    .enableSassLoader()
    .disableSingleRuntimeChunk()
    .addEntry('example', './assets/js/example.js')
;

const myCustomConfig = Encore.getWebpackConfig();
myCustomConfig.name = 'Coucou';

// uncomment the two lines below, if you added a new entry (by Encore.addEntry() or Encore.addStyleEntry() method)
// to your own Encore configuration for your project
module.exports = [ eZConfig, ...customConfigs, myCustomConfig ];