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-store/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/store/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/530351f5a48243bbc7cf082e5e5c88e83de9e385/features/apimgt/org.wso2.carbon.apimgt.store.feature/src/main/resources/store/public/index.html#L29 [2] https://github.com/this/carbon-dashboards/blob/8f63194abdd52c1f9060c7da5a44c33686d40fab/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>
_______________________________________________ Architecture mailing list Architecture@wso2.org https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
