[Develop Extensions] Serving local MapStore extensions does not work anymore

[ridoo]

Description

MapStore does not load extensions served as local bundle (development mode). I cannot tell, if this actually worked before but this tutorial here indicates this feature existed at least in a previous version.

🧭 Context: In a previous project we made some UI adjustments on a geonode-mapstore-client fork. For the future, this is not an option we want to follow. For now, I explore ways on how the customize geonode-mapstore-client. My focus here is, how to bundle such customizations in a GeoNode contrib app which includes related backend customizations.

/cc @giohappy
/cc @gannebamm
/cc @matthesrieke

How to reproduce

• Follow these steps to create a mapstore extension
• As indicated for local development, adjust the index.json to contain http://localhost:8082/extension/ and start up webpack serving the extension via npm start. Mine does look like this:

  {
      "externalapplications": {
          "bundle": "http://localhost:8082/extension/index.js",
          "translations": "http://localhost:8082/extension/translations",
          "assets": "http://localhost:8082/extension/assets"
      }
  }

• Re-Load GeoNode UI. I tested with the compiled version and the development setup (also started via npm start but available under http://localhost:8081)

💡 Note: Loading works when I do a npm run compile and having the index.json like this:

{
    "externalapplications": {
        "bundle": "externalapplications/index.js",
        "translations": "externalapplications/translations",
        "assets": "externalapplications/assets"
    }
}

To mention here is, that it differs a bit from the tutorial. It seems the config folder had to be included back then.

Expected Result

The text message to be displayed on the map view as indicated in the tutorial

Current Result

When MapStore tries to load the local extension an HTTP 404 happens:

I did some research on that, and at least since the merge of "App Infrastructure Review", the configured extension folder and a probably http-configured bundle are just concatenated.

MapStore2/web/client/components/app/withExtensions.js

Lines 100 to 102 in 38978dd

	getAssetPath = (asset) => {
	return ConfigUtils.getConfigProp("extensionsFolder") + asset;
	};

A possible fix might be to just return the given asset in case it is a URL, but I may be wrong here. A more local fix might check for a URL here:

MapStore2/web/client/components/app/withExtensions.js

Lines 154 to 156 in 38978dd

	Promise.all(Object.keys(plugins).map((pluginName) => {
	const bundlePath = this.getAssetPath(plugins[pluginName].bundle);
	return PluginsUtils.loadPlugin(bundlePath, pluginName).then((loaded) => {

But this would be just the bundlePath and my miss the location of translation and assets.

I am willing to prepare a PR but just wanted to ask you for more guidance and your perspective on this issue.

• Not browser related

Browser info

(use this site: https://www.whatsmybrowser.org/ for non expert users)

Browser Affected	Version
Internet Explorer
Edge
Chrome
Firefox
Safari

Other useful information

[allyoucanmap]

Hi @ridoo , that documentation seems outdated, could you try to verify with this one?
https://training.geonode.geosolutionsgroup.com/master/GN4/mapstore_client/005_EXTENSION.html#develop-the-extension

I had to apply this temporary change to the geonode_config.html to work in development mode, this update the extensionFolder config to access absolute urls

{% extends 'geonode-mapstore-client/_geonode_config.html' %}
{% block override_local_config %}
<script>
    window.__GEONODE_CONFIG__.overrideLocalConfig = function(localConfig) {
        localConfig.plugins.map_viewer.push({ "name": "MyGeoNodeExtension" });

+       // IMPORTANT!!! REMOVE AFTER DEVELOPMENT
+       // temporary changes to develop extension
+       // use absolute extensions folder path to correctly get http://localhost:8082 endpoint
+       localConfig.extensionsFolder = '';
+       // ensure that the http://localhost:8082 endpoint will not use proxy but direct requests
+       localConfig.proxyUrl.useCORS.push('http://localhost:8082');

        return localConfig;
    };
</script>
{% endblock %}

[ridoo]

This did the trick! Thanks @allyoucanmap !

Seems, I was tricked by the URL of the tutorial which included GN4 which seems not to resolve to "GeoNode 4" but to the chapter 🙈

I will close this issue then.