+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 <[email protected]> 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 <[email protected]> > 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. <link rel="stylesheet" href="public/themes/default/css/styles.css" >> /> 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 <link>, <script> 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. >> >> <htmL> >> <head> >> ... >> <link rel="stylesheet" >> href="{{contextPath}}/public/themes/default/css/styles.css"/> >> </head> >> <body> >> ... >> </body> >> </htmL> >> >> 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. >> >> <head> >> ... >> <script> >> var contextPath = *{{contextPath}}*; >> </script> >> </head> >> >> >> *Configuring app context path* >> >> Since app context path is decided for a deployment, deployment.yaml is >> the ideal place to define it. >> >> wso2.ui-server: >> contextPaths: >> # <app-name>: <context-path> >> "store": "/store" >> >> Here app name is the name of the directory where web app resides. If >> context path is not defined in the deployment.yaml then the default >> context path will be /<app-name> (e.g. /store). >> >> >> [1] https://github.com/wso2/carbon-apimgt/blob/530351f5a4824 >> 3bbc7cf082e5e5c88e83de9e385/features/apimgt/org.wso2. >> carbon.apimgt.store.feature/src/main/resources/store/ >> public/index.html#L29 >> [2] https://github.com/this/carbon-dashboards/blob/8f63194ab >> dd52c1f9060c7da5a44c33686d40fab/features/org.wso2.carbon. >> dashboards.portal.feature/src/main/resources/portal/pages/index.html#L11 >> >> WDYT? >> Thanks >> >> -- >> Sajith Janaprasad Ariyarathna >> Senior Software Engineer; WSO2, Inc.; http://wso2.com/ >> <https://wso2.com/signature> >> > > > > -- > Thusitha Kalugamage > *Software Engineer* > Mobile : +94 (0) 774 074370 > Tel : +94 (0) 112 145 345 > [email protected] > -- Chanaka Jayasena Associate Tech Lead, email: [email protected]; cell: +94 77 4464006 blog: http://chanaka3d.blogspot.com
_______________________________________________ Architecture mailing list [email protected] https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
