support for base href parameters durng application build

[stefanbukovski]

Summary

Is there a way that we can somehow add parameters (prefixes) to the path configuration for the assets (fonts for example)?

Relevant information

So currently, we have for example requests for the fonts and they are not found (picture below):

But if the request was issued like this:

https://bdh-pe1-int.chapp-test.os1.balgroupit.com/bdh/pe1/assets/fonts/BaloiseCreateText-bold.woff

with '/bdh/pe1' prefix for example the fonts would be downloaded. This prefix is different for every calculator and stack.

so is there a way that we can add these prefixes dynamically to the path configuration during the build process?

Currently, the fonts are configured as described in the DS (see the picture), but during the build we add these prefixes to base href.

[hirsch88]

@m4rc0z will analyse that issue deeper with the DS example app

[m4rc0z]

i analyzed it in the DS example app and it looks like its also not working with the DS system in the example app.

In the client libs we used the approach of having a relative path (see solution 1 from: https://stackoverflow.com/questions/62619062/unable-to-use-assets-in-url-in-scss-after-upgrading-to-angular-10/62619147#62619147)

but this also does not work. So it looks to me like an issue with the way the app gets built with the DS. Maybe @nobilo can also have a look at this?

[nobilo]

We have investigated, the issue is how angular builds prod files, it unfortunately does not append base-href to the url() of fonts in sass files. However this we can overcome with nginx config on our apps. So angular builds fonts in the root of output directory and appends hash in the name of the font in order not to be cashed. We should put them in root of serving directory and configure our frontend server to return them as FE application is using absolute path and targets on the root location of our FEserver. So solution is to add a rule to for example nginx to search for those static files in the root (not only in the built directory with name passed as base-href )

[tklueber]

Here is what we have found out: In principle, the suggested approach of setting a relative font-path before loading the global DS styles works.

$font-path: '~assets/fonts';
@import 'node_modules/@baloise/design-system-next-components/src/styles/global';

If you do this, Webpack/Angular CLI will copy the relative assets into the dist directory, possibly hashed and linked in the stylesheets.

But now to the problem: In some components in our application and additionally, in our library we use DS global.utilities. (e.g. for using color tokens or we want to style mobile version) @import '~@baloise/design-system-next-components/src/styles/global.utilities';

But this sass file has again an indirect dependency to the fonts.sass and use there the standard absolute path /assets/fonts for the specific component.

My two workarounds

• You could redefine the $font-path each time before using the global.utilities in a sass file (works quite well in the application, even though it's messy; in our selfservice shared lib it's not so easy because of path resolution problems).
• Our approach now was, instead of including the global.utilities, we import the tokens, mixins and/or variables directly into the corresponding sass files

@import "~@baloise/design-system-next-tokens/dist/tokens";
@import "~@baloise/design-system-next-css/scss/variables/all";
@import "~@baloise/design-system-next-css/scss/mixins/all";

My question/suggestion: Since I think you only have to define the fontfaces intially once (with global.scss), you could possibly remove the dependency in global.utilitis.sass or create a new one like global.utilitis-without-fontface.sass?

I hope I have described this well enough and it is usefull - otherwise please contact me

[nobilo]

Hi @tklueber thanks for detail investigation and explanation. I see that there might be problem if you import global.utilites.sass, i think it is better to import specific things you need, like variables and not everything. We might make some sass like that, @hirsch88 what do you think ?

[tklueber]

@nobilo yes that is exactly our solution for now, we only import specific things But as you suggested, it makes sense to provide a sass in the DS. Or the documentation where it is suggested to use the global.utilities.sass would have to be adapted

[clastzoo]

@joachimprinzbach will have a talk with Timo

[hirsch88]

@nobilo & @hirsch88 add comment how to import the styles without the fonts

[hirsch88]

@m4rc0z @tklueber that's how you could import the styles without the font in the newest version 10.21.1

@import '~@baloise/design-system-next-components/src/styles/global.utilities'
// @import '~@baloise/design-system-next-components/src/styles/global.fonts'
@import '~@baloise/design-system-next-components/src/styles/global.base'
@import '~@baloise/design-system-next-components/src/styles/global.core'
@import '~@baloise/design-system-next-components/src/styles/global.helpers'