+1 for the approach. On Sat, Oct 14, 2017 at 8:57 AM Chanaka Jayasena <chan...@wso2.com> 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 <thusi...@wso2.com> > 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 <sajit...@wso2.com >> > 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/cs >>> s/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 >> thusi...@wso2.com >> > > > > -- > Chanaka Jayasena > Associate Tech Lead, > email: chan...@wso2.com; cell: +94 77 4464006 <+94%2077%20446%204006> > blog: http://chanaka3d.blogspot.com >
_______________________________________________ Architecture mailing list Architecture@wso2.org https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
