Add flexibility to modify the base-href of DataDashboard app

[farhin23]

Feature Request

Add flexibility to modify the base-href of the application according to need. Define the base href of choice at the time of image creation.

Which Areas Would Be Affected?

the Dockerfile and app-config.service.ts file

Why Is the Feature Desired?

When we try to deploy the edc-datadashboard to a Kubernetes cluster and implement an ingress route to access the service, it encounters the following issue: The index file loads correctly but, it cannot load the asset files (css, js, images) properly. As a result, the angular app cannot be loaded properly, and the browser shows a blank page.

For example, in the following ingress file we have defined the ingress route /company-dashboard/ for our dashboard application.

Now, if we try to access the application from our browser (for instance, at "http://localhost/company-dashboard/"), then it encounters the above-mentioned problem.

This happens because we are accessing our application from a non-root path ('/company-dashboard/'), but the angular application is trying to load the assets from the root path ('/'). This can easily be solved by modifying the base-href in index.html file. If we change the <base href="/"> to <base href="/company-dashboard/">, the application will use this path to load the script files.

However, directly modifying the index.html file is not a good option as it compromises our flexibility for defining the paths.

Solution Proposal

One solution for this is to include the following command in the Dockerfile.

RUN npm run build -- --base-href=$BASE_PATH

We can take the $BASE_PATH as input during image creation. It will change the <base href=…> of the application according to our choice.

Also, when trying to fetch any asset from within the code, the URL to the asset should be adapted accordingly. For example, in app-config.service.ts file we are using the url 'assets/config/app.config.json' to get the config files.

return this.http
      .get<AppConfig>('/assets/config/app.config.json')
      .toPromise()
      .then(data => {
      ....

In case, we are using a base-href different than root (‘/’) then this will fail to get the files. We can modify this and prepare the url by adding the base-href with it. We can utilize Angular LocationStrategy, prepareExternalUrl in this scenario.

return this.http
      .get<AppConfig>(this.locationStrategy.prepareExternalUrl('assets/config/app.config.json'))
      .toPromise()
      .then(data => {
      ....