Re: [Architecture] Option for the customer to change the app context path in React based web apps

[Menaka Jayawardena]

+1 for the approach.

On Sat, Oct 14, 2017 at 8:57 AM Chanaka Jayasena  wrote:

> +1. This will be very helpful to solve the run-time theming feature with
> APIM. Also we can use the client side context path to populate the basePath
> for react routing. Not sure this is possible yet.
>
> We have a msf4j service to read the deployment.yaml and get the available
> multiple enviorments ( qa, prod etc ..). We can use the mentioned feature
> to get these configs and remove this service.
>
>
> thanks,
> Chanaka
>
> On Fri, Oct 13, 2017 at 4:37 PM, Thusitha Kalugamage 
> wrote:
>
>> +1 for the initiative,
>> Hoping this will be the solution for resolving customized styling when a
>> customer wants their styling introduced as a .css file [1].
>> Also this will ensure platform-wide structuring consistency for SPAs.
>>
>> [1] https://stackoverflow.com/questions/28386125/dynamically
>> -load-a-stylesheet-with-react
>>
>> Regards,
>>
>> On Thu, Oct 12, 2017 at 10:34 PM, SajithAR Ariyarathna > > wrote:
>>
>>> Hi All,
>>>
>>> *What is app context path?*
>>>
>>> In http://localhost:8080/store/apis/1234 URL, the app context path is
>>> /store. Customer might want to deploy the Store app in /my-store
>>> context path (in that case the URL will be http://localhost:8080/my-st
>>> ore/apis/1234).
>>>
>>>
>>> Currently in React based web apps, the app context path is hard-coded in
>>> the index.html file (see [1], [2]). This makes harder to change the app
>>> context path for a deployment. One approach that has been suggested to
>>> avoid hard-cording the app context path in the index.html is to use
>>> relative URLs for stylesheets and scripts. However the browser resolves
>>> these relative URLs into absolute URLs by prepending the current page
>>> URL. Therefore we cannot use relative URLs for stylesheets and scripts.
>>>
>>> e.g. If the current page is http://localhost:8080/store/
>>> then the absolute URL will be  http://localhost:8080/stor
>>> e/public/themes/default/css/styles.css. If the current page is
>>> http://localhost:8080/store/apis/12345 then the absolute URL will be
>>> http://localhost:8080/store/apis/12345/public/themes/
>>> default/css/styles.css which is incorrect.
>>>
>>>
>>> In order to resolve this, we need to generate proper URLs (with the
>>> context path). However its difficult to find and fix relative URLs inside
>>> the index.html. (Carbon UI Server has to parse the index.html file, then
>>> find necessary tags like ,  and prepend the app context
>>> path to their relative URLs and generate the final HTML. This process is
>>> cumbersome & will affect negatively on performance.) We can have a template
>>> file instead of a HTML file. Handlebars is a good candidate for this task
>>> as we have much experience with Handlebars template in web apps. So if we
>>> choose Handlebars then index.html will be index.hbs. e.g.
>>>
>>> 
>>> 
>>> ...
>>> >> href="{{contextPath}}/public/themes/default/css/styles.css"/>
>>> 
>>> 
>>> ...
>>> 
>>> 
>>>
>>> This approach opens-up other useful features. For example, if someone
>>> needs the app context path in the client-side JS, they can send it as a
>>> variable to the client-side. e.g.
>>>
>>> 
>>> ...
>>>