webpack encore fetch in symfony 5

Question

I'm learning to use webpack Encore

I would like to know if it is possible to use the 'path' function to call a route via ajax

webpack.config.js

    .setOutputPath ('public / build /')
    .setPublicPath ('/ build')
    .addEntry ('app', './assets/js/app.js') 
    .addEntry ('ajax', './assets/js/ajax.js')

I created a second entry which imports all ajax calls

ajax.js

import 'bootstrap'; // adds functions to jQuery

import articleShow './myAjax/articleShow';
articleShow();
...

myAjax > articleShow.js

is it possible to use the path function ?

        ...
        let formData = new FormData();

        formData.append("folder", folder);
        formData.append("id", id);

        **var urlAjax = "{{ path('showArticle') }}";** (pb)!!!
        //var urlAjax = "https://localhost:8000/article/show";
        fetch(urlAjax, {
            method: 'POST',
            body: formData
        })
            .then(function (response) {
                return response.json();
            })
            .then(function (message) {
            ...

Articlecontroller

    /**
    * @Route("/article/show", name="showArticle")
    */
    public function showArticle(....) {
     ...

question 1: Is it possible to use the 'path' function with webpack encore?

question 2: is my approach correct? if no, do you have a suggestion with a concrete example because i have hardly found anything as documentation.

thanks for your help.

Answer 1

Thank you I succeeded with webpack encore. To help :

Intall Fos jsrouting bundle

step 1 :  expose your route in your controller otherwise you have to modify the file: fos_js_routes.json in the public folder or rename the route

/**
* @Route("/country", **options={"expose"=true},** name="ajaxCountry") 
**/

step 2 : 

import Routing from '../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
const routes = require('../../../public/js/fos_js_routes.json');
Routing.setRoutingData(routes);

 var formData = new FormData();

    var urlAjax = Routing.generate('yourRoute');

    fetch(urlAjax, {
        method: 'POST',
        body: formData
    })
        .then(function (response) {
            return response.json();
        })
        .then(function (message) {
           ...


step 3 : in your terminal 

 php bin/console fos:js-routing:dump --format=json --target=public/js/fos_js_routes.json

bye