[Feature] Support deploying Appsmith on a subpath

[sharat87]

Currently, the index.html page of Appsmith requests for resources starting at /, like /static/main.js etc. This makes it hard to have an Appsmith instance deployed at a non-root path in a domain. Like http://example.com/appsmith or something.

This will be useful in setups where people don't have access to setup an A record for a subdomain, but do have access setup multiple applications over paths by configuring their routing.

Front conversations

[Nikhil-Nandagopal]

@mohanarpit any idea how easy / hard this is?

[mohanarpit]

As a solution, we'll have to:

1. Include the host URL as an environment parameter. This way the application understands what the root URL needs to be.
2. Wherever we are invoking these URLs, we need to append the root URL.
3. During installation, this needs to be configured in the Nginx configuration as well. Else Nginx routing will fail.

Honestly, I'm not sure how extensive a change this will be across the board. Need to investigate the source code before being able to commit a timeline here.

[javakonsult]

It would be great to have this feature available so that appsmith can be configured on subpath instead of root path only.

[saenyakorn]

I try to deploy Appsmith with subdirectory like example.com/admin but it didn't work. According to my network tab. Appsmith try to get example.com/static/js/...chuck.js that doesn't exist. (It should get from example.com/admin/static/js/...chuck.js).

I found that Appsmith Client currently doesn't support subdirectory hosting, according to Appsmith Client's AppRouter

Since this application use create-react-app. This article would help you for supporting subdirectory hosting. (I'm not sure it'll work since I didn't try it yet.)

[abelkbil]

Did not test dockerized output and production output. But in the development environment, I am able to achieve it by modifying Nginx reverse proxy files and some level of edits in react.

[manikumarnune123]

A example for this is grafana . We have achieved it while building the app, we are able to run in production too in docker. But the catch is here again we need to rebuild if the sub-path is different.

[Dofamin]

@Nikhil-Nandagopal @manikumarnune123 Hello everyone, is there any update on this issue?

[asingh072318]

@Nikhil-Nandagopal @manikumarnune123 I've the same use case and I have tried implementing this(for /appsmith) but in the end it breaks the ui editor(drag/drop and connect data with widget). Steps taken:

1. app/client/src/entities/URLRedirect/SlugURLRedirect.ts:

let { pathname } = window.location;
if (pathname.startsWith("/appsmith")) {
      // Use the replace method with a regular expression to match the first occurrence of "/appsmith" at the beginning
      pathname = pathname.replace(/^\/appsmith/, "");
}

2. Dockerfile:

RUN sed -i 's/\/pageService.js/\/appsmith\/pageService.js/g' /opt/appsmith/editor/index.html

3. app/client/src/constants/routes/baseRoutes.ts:

export const BASE_URL = "/appsmith";

4. app/client/src/utils/history.ts:

const history: History<AppsmithLocationState> = createHistory({
   basename: "/appsmith",
});

5. app/server/appsmith-server/src/main/java/com/appsmith/server/helpers/RedirectHelper.java:

   public String buildApplicationUrl(Application application, HttpHeaders httpHeaders) {
        String redirectUrl = RedirectHelper.DEFAULT_REDIRECT_URL;
        if (application != null && application.getPages() != null && application.getPages().size() > 0) {
             ApplicationPage applicationPage = application.getPages().get(0); 
        }
   return fulfillRedirectUrl("/appsmith"+redirectUrl, httpHeaders);
   }
   
   public String buildSignupSuccessUrl(String redirectUrl, boolean enableFirstTimeUserExperience) {
       String url = "/appsmith"+SIGNUP_SUCCESS_URL + "?redirectUrl=" + URLEncoder.encode(redirectUrl, StandardCharsets.UTF_8);
       if (enableFirstTimeUserExperience) {
           url += "&" + FIRST_TIME_USER_EXPERIENCE_PARAM + "=true";
       }
       System.out.println("Build signup success url: "+url);
       return url;
   }

6. deploy/docker/templates/nginx-app-http.conf.template.sh: Added this

location ~ ^/appsmith/(.*) {
        rewrite ^/appsmith/(.*)$ /\$1 break;
        access_log /var/log/nginx/sappsmith.log;
        error_log /var/log/nginx/eappsmith.log;
        proxy_pass http://localhost;
    }

7. package.json:

"homepage": "/appsmith",

ideally it should be like this:

The widget on selection does not toggle the properties in right panel.

also dragging the widget breaks the page completely. After trying to drag, everything becomes inactive => even clicking from left side explorer window does not do anything.

[sharat87]

Hey @asingh072318, appreciate your interest here in fixing this but solving for this is quite a complex change. There's several smaller pieces of functionality in both the client and backend that'll need to be reviewed and adjusted for this. In that context, this isn't something that we believe will be impactful for the product right now.

Thank you. 🙏

[Dofamin]

Hey @sharat87, i get why you think that not will be good for the product at this time, to be honest this fix will be very practical for big corp or air gapped networks, where very problematic or even not available creating new dns entry or whole server.

[LauridsJMikkelsen]

Would greatly appreciate this feature

[Nikhil-Nandagopal]

@Dofamin it's interesting that you mention it would be practical for large orgs. From our analysis, hosting on a subpath exposes the session cookies of all applications hosted under that path and so this could become a security risk inside large organizations. If you are part of a large organization that would benefit from this feature, I'd love to chat and understand how your team views this type of deployment. https://calendly.com/appsmith-nikhil/30min

[Dofamin]

@Nikhil-Nandagopal sounds good

[Bleoo]

wanna this feat +1

[willmorgan]

Having this capability would be awesome otherwise we need to set up a whole new domain name for it.

[Nikhil-Nandagopal]

@Bleoo @willmorgan you can still deploy on a subdomain. We don't recommend deployin on a subpath because it shares cookies with all applications on that subpath and that can be a potential security vulnerability

[willmorgan]

Sure, but I'm happy to accept the risk of doing so as the person in control of deploying my infrastructure, given Appsmith would be the only application on my domain that actually sets cookies or serves webpages.

You can also encrypt the cookie contents on your side, use random cookie names, and use HTTP-only secure cookies by prefixing them with __Secure or __Host.

Conversely, Appsmith could still access cookies from my root domain if I deployed it at cms.website.app.

---

update 11/6/24: I ended up selecting an alternative product to Appsmith to support this functionality.

[rhuanbarreto]

For the ones that knows the risk, that's actually why we want appsmith to be shared in a subpath. With this, the user wouldn't need to do another OIDC login to access appsmith and other apps we deploy on the same url, integrating appsmith in our apps environment

[woodmin]

We were able to put every other app we use (n8n, NocoDB, pgAdmin, etc.) under subpath. The only one that does not allow it is Appsmith. Would really like to see it implemented.