Add a configurable base_url for Amundsen front end

[dmateusp]

at Earnest we use a single domain with Ambassador and diverse mapping rules to add public endpoints for our Kubernetes-hosted web applications

I'm having an issue with the front end, due to the fact that Amundsen is not at the root of the domain, and I believe I cannot support it currently because the path to static files is hardcoded in the html: example

I think I would need static to be a dynamic path where I could append /amundsen/ (I would actually like the whole web service to serve traffic only on /amundsen/ and not at /)

Airflow uses url_for here for example.

Then I would like the helm chart to allow me to specify the base_url

see how Airflow does it in its helm chart

[feng-tao]

@ttannis @danwom could you two take a look when you have a chance?

[dmateusp]

hey I have work in progress on this, I should have a PR soon

[feng-tao]

sounds good

[Golodhros]

Hi @dmateusp, how is this going? Do you need any help?

[dmateusp]

hey @Golodhros I thought this would only involve Python changes, but there's some JavaScript which I'm unsure how to modify the "right way" to support this feature

There's a Draft PR here https://github.com/lyft/amundsenfrontendlibrary/pull/435/

sorry I didn't report back on status, I'm happy to continue it if someone with JS / Front-end experience can let me know if the way I'm going is ok, happy to drop it as well if someone else would like to implement it

[Golodhros]

Hi @dmateusp, thanks for the prompt response!

The template file has changed lately, and now we use the HtmlWebpackPlugin to insert the file paths of our assets instead of hardcoding them on the template. I think we would be able to modify the "publicPath" property to change the path. Could you give it a try?

Also, would love to hear more about the change from "axios" to "axiosInstance" in your PR. Was something not working properly?

Thanks a lot for your contribution to the project!

[janbe-ts]

Hi all,

we would also like to run Amundsen behind a reverse proxy and are therefore dependent on a configurable base_url. Are there any updates on this? Or does anyone know about a workaround for this issue? Guess it's not that easy, but is there a chance to configure the react app like described here https://create-react-app.dev/docs/deployment/#serving-the-same-build-from-different-paths?

[ttannis]

Hi all,

we would also like to run Amundsen behind a reverse proxy and are therefore dependent on a configurable base_url. Are there any updates on this? Or does anyone know about a workaround for this issue? Guess it's not that easy, but is there a chance to configure the react app like described here https://create-react-app.dev/docs/deployment/#serving-the-same-build-from-different-paths?

No updates as this item isn't something explicitly on the roadmap, so for now it is a matter of someone looking into it and submitting a PR. In our community slack channel you can talk to others who are interested in this feature, and perhaps with multiple folks looking into this it can get moved along. There have already been some attempts linked above, so a starting point could be to understand how far others got and what did or didn't work.

[janbe-ts]

Thanks @ttannis for the quick response. I've joined the Slack channel and will see what I can do

[richwhitjr]

We are having the same issue trying Amundsen internally. Also using ambassador with the helm chat provided.

[mymzheka]

Having the same issue, need help. Any workaround?

[ajitkshirsagar]

Having the same issue. Any path forward? Has anyone tried hosting on Kubernetes or compute machine?

[guillemborrell]

This is also affecting our deployment, since we are using the helm chart and we have to keep a separate domain for Amundsen. Not sure if I can help, but this feature would have a very positive impact in our deployment.

[janbe-ts]

We managed to run the Amundsen frontend behind a base URL by maintaining a local fork and a few code changes. Unfortunately, it's a hacky solution because the base URL needs to be hardcoded. Here's what we did

• Add a baseURL field to AppConfigCustom in amundsen_application/static/js/config like this

[...]
logoPath: 'my/path/to/logo',
navLinks: [],
baseURL: '/<my-base-url>',

• In the index.ts, add this line to the top axios.defaults.baseURL = AppConfig.baseURL; All API calls will now automatically have the baseURL prefixed
• Some assets unfortunately have a hardcoded URL, so we also need to add the baseURL there, e.g. src={AppConfig.baseURL + '/static/images/loading_spinner.gif'} in LoadingSpinner/index.tsx
• In the amundsen_application base folder, I added a file middleware.py

from collections import Callable

from werkzeug.wsgi import ClosingIterator


class PrefixMiddleware:

    def __init__(self, app: Callable, prefix: str = ''):
        self.app = app
        self.prefix = prefix

    def __call__(self, environ: dict, start_response: Callable) -> ClosingIterator:
        if environ['PATH_INFO'].startswith(self.prefix):
            environ['PATH_INFO'] = environ['PATH_INFO'][len(self.prefix):]
            environ['SCRIPT_NAME'] = self.prefix
            return self.app(environ, start_response)

        return self.app(environ, start_response)

• Finally, in wsgi.py, we change the main function to use the new middleware:

if __name__ == '__main__':
    application.wsgi_app = PrefixMiddleware(application.wsgi_app, prefix=os.getenv('BASE_URL'))
    application.run(host='0.0.0.0')

If there is a way to pass an environment variable to the react component, this would actually be a generic solution and the baseURL could be configured in the helm charts. Maybe someone has an idea how to do that?

Hope this helps somebody!

[guillemborrell]

@janbe-ts This is brilliant! Thanks.

I agree that this requires very little changes upstream to be a permanent solution.

[seongk]

Adding a comment here to say I'm having the same issue. I'll try out @janbe-ts solution above and report back. Thanks! Hope there's a permanent solution soon.

[karthikmadupu]

@janbe-ts @guillemborrell @seongk Guys am trying workaround suggested by janbe but till doesn't work. Can anyone guide me. Am modifying below files(mentioning relative paths of file)

frontend/amundsen_application/static/js/config/config-default.ts
frontend/amundsen_application/static/js/config/config-types.ts
frontend/amundsen_application/static/js/components/LoadingSpinner/index.tsx
frontend/amundsen_application/static/js/index.tsx
frontend/amundsen_application/middleware.py
frontend/amundsen_application/wsgi.py

[janbe-ts]

@karthikmadupu can you provide a bit more context? What exactly does not work, what have you tried, what error message(s) do you get?