As a temporary solution we have retrieved app context by manipulating window.location which is not the correct approach as it might break if there is no context. (ex: if url is abc.com instead of abc.com/appContext )
+1 for the suggested approach as we can use the defined contextPath variable in routing as well [1] [1] https://github.com/wso2/carbon-dashboards/blob/master/components/dashboards-web-component/src/App.jsx Thanks, Tanya 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- > 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> > -- Tanya Madurapperuma Associate Technical Lead, WSO2 Inc. : wso2.com Mobile : +94718184439 Blog : http://tanyamadurapperuma.blogspot.com
_______________________________________________ Architecture mailing list [email protected] https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
