feature: Support for Non-Root iFrame Embedding

[bigcat88]

trafficstars

Description:

We are integrating Windmill into Nextcloud, and for this integration to work seamlessly, Windmill needs to support operations within an iFrame that does not use the root address.

Example iFrame URL:

http://nextcloud.local/apps/app_api/proxy/windmill_app

We have configured the correct kit.paths.base in svelte.config.js, and observed that JS/CSS files are successfully loaded. Additionally, we have set the correct URL for the generated "backend-client" in Windmill, ensuring that all requests to /api and some requests to /user endpoints are correctly routed.

However, in the TypeScript files of Windmill, all goto operations are relative to the root of the site, leading to incorrect redirects.

Example Windmill Code:

export async function logout(): Promise<void> {
    await clearUser()
    goto(`/user/login`)
    sendUserToast('you have been logged out')
}

Documentation for goto:

Params:
url – Where to navigate to. Note that if you've set config.kit.paths.base and the URL is root-relative, you need to prepend the base path if you want to navigate within the app.
opts – Options related to the navigation

Request:

We kindly request that the Windmill frontend code be modified to respect the config.kit.paths.base by prepending it to the path in goto operations. This change is crucial for our integration, as manually editing the entire Windmill frontend is not feasible for us.

We appreciate your attention to this matter and want to express our gratitude for maintaining such an excellent open-source project.

[bigcat88]

I noticed a similar request regarding subpath support in this previous issue

As mentioned in that issue, it was considered too niche and required a lot of work.

We are willing to work on this feature and submit a PR to address the necessary changes. Before proceeding, could you please confirm if the team would be open to reviewing and merging a PR that adds support for non-root iFrame embedding by respecting config.kit.paths.base in goto operations?

[rubenfiszel]

The issue with svelte.config.js approach is that it require to maintain your own fork of windmill which will be a heavy burden. Ideally, we can find a solution that work with the stock image of windmill and can be passed as env variable without requiring a re-build of the frontend.

[rubenfiszel]

Do you have any possibility to have windmill be hosted as a subdomain, for instance: http://windmill.nextcloud.local ?

[rubenfiszel]

The other possibility that i see is that we have a new image that support windmill not as a SPA with fallback mode, but as a server rendered website (running the frontend on node.js) that you can pass the base as an env variable to the image.

[bigcat88]

From what I know, we still want to install Windmill as a container, and it’s not difficult for us to rebuild only the frontend without rebuilding the entire binary when we creating that container. And to serve frontend from that folder(let's call it static_frontend)

We need all the “goto” to add the 'base' value from svelte.config.js as a prefix. And maybe some "hrefs" with absolute urls need to respect 'base' too.

Something like this:

function customGoto(href, options) {
  const prefix = '/custom-prefix'; // we will take it from "svelte.config.js"
  const modifiedHref = prefix + href;

  // Call the original goto function with the modified URL
  return originalGoto(modifiedHref, options);
}

[rubenfiszel]

it’s not difficult for us to rebuild only the frontend without rebuilding the entire binary when we creating that container.

It may reveal itself more complex than it first appears. We use multi-stage build so the frontend doesn't exist in the container anymore when you run it, there is only the static assets. And if you want to re-pull the frontend from source, you will need to make sure the commit match exactly the image. It's a lot of machinery.

Are you absolutely certain you cannot use a subdomain ?

[bigcat88]

And if you want to re-pull the frontend from source, you will need to make sure the commit match exactly the image. It's a lot of machinery.

ARG WINDMILL_VERSION=1.338.3
FROM ghcr.io/windmill-labs/windmill:${WINDMILL_VERSION}

# Clone Windmill to build it's frontend with our custom URL for AppAPI
RUN git clone --depth 1 --branch v${WINDMILL_VERSION} https://github.com/windmill-labs/windmill.git /windmill_tmp

RUN cd /windmill_tmp/frontend && \
    npm install
    
# Change svelte base URL
RUN cd /windmill_tmp/frontend && \
    basePath="/apps/app_api/proxy/windmill_app" && \
    configFilePath="svelte.config.js" && \
    sed -i "/kit: {/a \
            paths: {\
                base: '${basePath}'\
            }," "$configFilePath"

# Generate OpenAPI data
RUN cd /windmill_tmp/frontend && \
    npm run generate-backend-client

# Set URL for backend in generated OpenAPI data
RUN sed -i "s|BASE: '/api'|BASE: '/apps/app_api/proxy/windmill_app/api'|" /windmill_tmp/frontend/src/lib/gen/core/OpenAPI.ts

# Build Windmill's frontend
RUN cd /windmill_tmp/frontend && \
    NODE_OPTIONS=--max_old_space_size=8096 npm run build && \
    rm -rf /static_frontend && \
    mv build /static_frontend

/api/ and /user(except user/login) requests go to windmill

all other requests takes stuff from /static_frontend

Will this work or I have missed something?

[rubenfiszel]

It should work but regardless, you should find out in your tests soon enough. Yes, if you can do the work, we will be gladly accepting your PR, thank you very much!

[bigcat88]

Does frontend for EE differs from default one? As we change basePath and plan use frontend from standart image for EE edition - will it work, or the source for EE are different?