Get Backend Base Url in JS file Magento 2?

You can get base URL of the backend/admin panel in javascript(JS) file to fetch Custom URL of a site to call ajax request in backend area.

‘mage/url’ widget is not used to fetch backend base URL in Magento 2.

You need to create a template file using layout XML and define the base URL of the backend under the template file.

You can define any Global variable and set your URL in the Global variable.

Create a simple layout XML file to fetch the backend URL of the site using JS,

Create a default.xml file for global access at the admin area or create a specific action layout file for a specific page,
Path: app/code/Rbj/MyModule/view/adminhtml/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="js">
            <block class="Magento\Backend\Block\Template" template="Rbj_MyModule::js.phtml"
                   name="custom_js_backend"/>
        </referenceContainer>
    </body>
</page>

Now you need to create a js.phtml file,
Path: app/code/Rbj/MyModule/view/adminhtml/templates/js.phtml

<?php
/**
 * @author  Rakesh Jesadiya
 */
?>
<script>
    require([
        "prototype"
    ], function () {
        window.customUrl = '<?= /** @noEscape */ $block->getUrl('sales/order/index')?>';
    });
</script>

Now you can use the Global variable inside your custom js file,

var customUrl = window.customUrl;
You can get the backend URL using the above variable in the js file.

Check to Get Base Url in JS file for the Frontend Area.

Share this:

Related