Add baseUrl to a importmap()

[tacman]

Symfony's importmap() function generates

<script type="importmap">
{
    "imports": {
        "app": "/assets/app-e4599d4ad24d45913e4d05569a4414b4.js",
        "/assets/bootstrap.js": "/assets/bootstrap-c423b8bbc1f9cae218c105ca8ca9f767.js",
        "@symfony/stimulus-bundle": "/assets/@symfony/stimulus-bundle/loader-e1ee9ace0562f2e6a52301e4ccc8627d.js",
        "/assets/@symfony/stimulus-bundle/controllers.js": "/assets/@symfony/stimulus-bundle/controllers-abf606f3085d4a46150023eb97dbf33b.js",
        "/assets/controllers/hello_controller.js": "/assets/controllers/hello_controller-c19dd529e97e8ef33363253ca96d13fe.js",
        "/assets/controllers/api_controller.js": "/assets/controllers/api_controller-192ad26be8b939ca8ca28b3dad1fa53f.js",
        "@hotwired/stimulus": "https://cdn.jsdelivr.net/npm/@hotwired/[email protected]/+esm",
        "@fullcalendar/daygrid": "https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/+esm",
        "@fullcalendar/interaction": "https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/+esm",
        "@fullcalendar/core": "https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/+esm"
    }
}

when there's a base url, though, those routes need to be prefixed, like the path() commands.

I use this to publish to github pages:

bin/console -e prod stenope:build ./docs --base-url /micro-calendar/

https://tacman.github.io/micro-calendar/fullcalendar/

I've hacked around this problem by embedding my app.js in the HTML itself, but obviously it'd be better if the generator tweaked the paths.

Thanks.

[ogizanagi]

Is there a way to provide a base URL when using importmap? I suspect this to be more a Symfony feature request rather than a Stenope one

[tacman]

Not that I know of. Can you point to where in your code the links are created?

Your code IS working as expected for the web page links, just not for the assets. I think the issue is best fixed in Stenope, since --base-url is being passed into your build command. The asset links are probably generated differently than the embedded HTML page links.

For production, the assetmapper files exist on disk, so it's just a simple path (in dev, there's some magic that maps the asset routes). That's why I think the baseUrl needs to be added in stenope.

I can provide a very simple demo repo if that's helpful.

[ogizanagi]

I'm not used to the AssetMapper yet. That's why I'm wondering how could Stenope communicate the baseURL to generate the proper links when using importmap? Where should we hook?

For routing (path), this is handled by setting the request context:

Stenope/src/Builder.php

Lines 186 to 189 in 4ff235c

	public function setBaseUrl(string $baseUrl): void
	{
	$this->router->getContext()->setBaseUrl('/' . ltrim($baseUrl, '/'));
	}

What would be the equivalent for generating the proper importmap?
Or is there a config entry that would allow to configure the base URL in the userland code, allowing to use an env var?

[tacman]

Thanks. AssetMapper 6.4 is marked as experimental, but will be stable in 6.4. I'll add this as an issue, as it does seem like baseUrl should be honored there, too. Can we keep this open until it's functional?

I've been playing around with the steno-skeleton, trying to remove webpack and replace it with AssetMapper. It'll be very cool when it's done!

[ogizanagi]

It seems to me the default asset package is used to render the importmap. Did you try to set the base_path here (using an env var to provide when building for your production environment) ?

[ogizanagi]

Should work using 6.4 at least : symfony/symfony#52561

With:

    assets:
        base_urls: https://stenopephp.github.io/skeleton/

and with base_path :

    assets:
        base_path: /skeleton

Please note this : symfony/symfony#52561 (comment)

[ogizanagi]

See StenopePHP/skeleton#2 for skeleton upgrade to the asset mapper

[ogizanagi]

Closing as resolved, using Symfony 6.4/7.0