fix(UI): Provide relative route for UI #231

lordrip · 2025-04-03T04:07:07Z

Context

When running the UI through quinoa, you will be accessing it through a quarkus endpoint, whereas when running the UI in standalone mode you will be accessing it from another server. This is important because depending on where you are running from, the API address will change.

The solution is to set a relative route in the application.properties file so the services are call relative to the providing host.

For local development, a default value of http://localhost:8080 is provided.

fix: #229

lordrip · 2025-04-03T04:09:33Z

@orpiske @Croway I provided this PR and tried to run the router directly but I was having the following error:

2025-04-03 00:08:39,560 WARN  [ai.wan.cli.mai.sup.Downloader] (main) Unable to create directory /project/.wanaku/cache.
2025-04-03 00:08:39,560 ERROR [ai.wan.cli.mai.com.sta.StartLocal] (main) java.io.FileNotFoundException: /project/.wanaku/cache/wanaku-tool-service-http-0.0.4-SNAPSHOT.zip (No such file or directory): ai.wanaku.api.exceptions.WanakuException: java.io.FileNotFoundException: /project/.wanaku/cache/wanaku-tool-service-http-0.0.4-SNAPSHOT.zip (No such file or directory)
        at ai.wanaku.cli.main.support.Downloader.downloadFile(Downloader.java:47)
        at ai.wanaku.cli.runner.local.LocalRunner.deploy(LocalRunner.java:70)
        at ai.wanaku.cli.runner.local.LocalRunner.start(LocalRunner.java:29)
        at ai.wanaku.cli.main.commands.start.StartLocal.startWanaku(StartLocal.java:36)
        at ai.wanaku.cli.main.commands.start.StartLocal.run(StartLocal.java:86)
        at picocli.CommandLine.executeUserObject(CommandLine.java:2030)
        at picocli.CommandLine.access$1500(CommandLine.java:148)
        at picocli.CommandLine$RunLast.executeUserObjectOfLastSubcommandWithSameParent(CommandLine.java:2465)
        at picocli.CommandLine$RunLast.handle(CommandLine.java:2457)
        at picocli.CommandLine$RunLast.handle(CommandLine.java:2419)
        at picocli.CommandLine$AbstractParseResultHandler.execute(CommandLine.java:2277)
        at picocli.CommandLine$RunLast.execute(CommandLine.java:2421)
        at picocli.CommandLine.execute(CommandLine.java:2174)
        at ai.wanaku.cli.main.CliMain.run(CliMain.java:32)
        at io.quarkus.runtime.ApplicationLifecycleManager.run(ApplicationLifecycleManager.java:143)
        at io.quarkus.runtime.Quarkus.run(Quarkus.java:77)
        at io.quarkus.runtime.Quarkus.run(Quarkus.java:48)
        at ai.wanaku.cli.main.Main.main(Main.java:10)
Caused by: java.io.FileNotFoundException: /project/.wanaku/cache/wanaku-tool-service-http-0.0.4-SNAPSHOT.zip (No such file or directory)
        at [email protected]/java.io.FileOutputStream.open0(Native Method)
        at [email protected]/java.io.FileOutputStream.open(FileOutputStream.java:289)
        at [email protected]/java.io.FileOutputStream.<init>(FileOutputStream.java:230)
        at [email protected]/java.io.FileOutputStream.<init>(FileOutputStream.java:179)
        at ai.wanaku.cli.main.support.Downloader.downloadFile(Downloader.java:42)
        ... 17 more

I guess I need to provide a different folder than /project am I right?

lordrip · 2025-04-03T04:10:15Z

In addition to that, could be possible that some dependencies weren't updated? I'm seeing changes in the yarn.lock file 🤔

orpiske · 2025-04-03T05:06:13Z

how are you running it? it could be related to some cleanups I did yesterday

Croway · 2025-04-03T09:09:29Z

Interesting, I cloned your repo, and it is trying to connect to http://localhost:8080/api/v1/api/v1/api/v1/resources/list

And is kind of expected since api/v1 is already part of the openapi spec. What about quarkus.quinoa.package-manager-command.build-env.VITE_API_URL="/"?

Moreover, I think that quarkus.quinoa.package-manager-command.dev-env.VITE_API_URL=\"http://localhost:${quarkus.http.port:8080}\" is still needed in case of mvn quarkus:dev

Croway · 2025-04-03T09:36:29Z

@lordrip the issue with using is "/" is the following, in custom-fetch.ts the following line of code

    const baseUrl = VITE_API_URL;
    const url = new URL(baseUrl + contextUrl);

in case of VITE_API_URL = "/", new URL("/", ..") fails..

Croway · 2025-04-03T10:11:30Z

I did the following change to the vite.config.ts:

export default defineConfig(({ mode }) => {
  // Load env file based on `mode` in the current working directory.
  // Set the third parameter to '' to load all env regardless of the
  // `VITE_` prefix.
  const env = loadEnv(mode, process.cwd(), '')
  let envFileViteApiUrl = null;
  if (env.VITE_API_URL) {
    envFileViteApiUrl = JSON.stringify(env.VITE_API_URL);
  }
  return {
    plugins: [react()],
  define: {
    VITE_API_URL:
      envFileViteApiUrl ??
      process.env.VITE_API_URL ??
      JSON.stringify("http://localhost:8080/api/v1"),
  },
  build: {
    outDir,
    sourcemap: true,
    emptyOutDir: true,
  },
  base: "./",
  css: {
    preprocessorOptions: {
      scss: {
        api: "modern-compiler",
      },
    },
  },
  }
});

and created a .env.production file with VITE_API_URL=http://localhost:8080, this way, when running with npm run preview the content of the .env.production is used, BUT, when running the application without quinoa, I am getting CORS issue, in this case, I think that some reverse proxy configuration is needed.

Anyway, I do not know if .env files are a good practice here, but I think that this way we have more freedom (running UI and wanaku-router in different servers for example)

Right now, a cors configuration is created only for quarkus dev run

%dev.quarkus.http.cors=true
%dev.quarkus.http.cors.origins=http://localhost:5173

lordrip · 2025-04-03T10:20:08Z

@Croway I didn't consider the automatic openapi client 🤔 , thanks for the heads-up. I might be missing something here but I don't think we need env files nor prod mode for vite 🤔

Here's my reasoning, when running the UI (yarn dev) we need to have the VITE_API_URL variable pointing to where the server is running, in the vite config, when there's no env variable defined, it fallbacks to http://localhost:8080/api/v1 as you saw.

When running through quinoa, the webapp should already be built, therefore we have the quarkus config providing the env variable that ultimately gets into the VITE_API_URL variable.

lordrip · 2025-04-03T10:22:41Z

Moreover, I think that quarkus.quinoa.package-manager-command.dev-env.VITE_API_URL="http://localhost:${quarkus.http.port:8080}\" is still needed in case of mvn quarkus:dev

I think you're right, it looks like we're bootstraping the UI in dev mode when running mvn quarkus:dev, is still pending to see whether the UI is being served form the same quarkus endpoint or through a different port, if the former, we can have both pointing to a relative path, otherwise we need to keep the absolute value.

lordrip · 2025-04-03T10:23:40Z

I'll try to run the project again and try the different combinations, but all in all, although we might not need the .env file for prod, having cors config for dev is a good idea 👍 , in prod is not needed because the UI is served as static files from quarkus.

When running the UI through quinoa, you will be accessing it through a quarkus endpoint, whereas when running the UI in standalone mode you will be accessing it from another server. This is important because depending on where you are running from, the API address will change. The solution is to set a relative route in the `application.properties` file so the services are call relative to the providing host. For local development, a default value of `http://localhost:8080` is provided. fix: wanaku-ai#229

lordrip · 2025-04-03T22:26:01Z

ui/src/custom-fetch.ts

+    const baseUrl = VITE_API_URL || window.location.origin;
+    const url = new URL(baseUrl + contextUrl, baseUrl);


First, we calculate the baseUrl by checking whether the VITE_API_URL env variable was set, otherwise, we fall back to the URL from where the UI is being served.

After that, we pass it to the URL constructor to build the URL considering the baseUrl
https://developer.mozilla.org/en-US/docs/Web/API/URL#usage_notes

@Croway this took care of both running the UI through mvn quarkus:dev and building the CLI locally and running it in PROD mode.

@orpiske when you have the time, please check it again, especially around serving the router from a different port 🙏

Sure thing. I will re-review it today, thanks!

sounds good!

@lordrip shouldn't it be new URL(contextUrl, baseUrl) ?

orpiske · 2025-04-04T08:19:33Z

@lordrip I have just tried the latest code and here's the results:

Port	Page	Result
8080	tools	✅ OK
8080	resources	✅ OK
8080	LLMchat	🔴 failure
10800	tools	✅ OK
10800	resources	✅ OK
10800	LLMChat	🔴 failure

For the LLMChat it still keeps trying to access localhost:8080

ibek · 2025-04-04T08:58:49Z

@orpiske it might be because of this line when it connects as mcp client: https://github.com/wanaku-ai/wanaku/blob/main/ui/src/Pages/LLMChat/LLMChatPage.tsx#L185

orpiske · 2025-04-04T09:22:01Z

@orpiske it might be because of this line when it connects as mcp client: https://github.com/wanaku-ai/wanaku/blob/main/ui/src/Pages/LLMChat/LLMChatPage.tsx#L185

Thanks @ibek!

@lordrip @Croway Please, do you know how we could adjust this so it picks the variable that you have set?

Croway · 2025-04-04T11:37:48Z

@orpiske can you re-execute the tests?

orpiske · 2025-04-04T12:27:50Z

@orpiske can you re-execute the tests?

It's working!!! Thanks!

lordrip requested review from Croway and orpiske April 3, 2025 04:07

orpiske approved these changes Apr 3, 2025

View reviewed changes

lordrip force-pushed the fix/relative-route-for-ui branch from 9a8ee92 to e59c925 Compare April 3, 2025 22:24

lordrip commented Apr 3, 2025

View reviewed changes

lordrip marked this pull request as ready for review April 3, 2025 22:26

lordrip requested a review from orpiske April 3, 2025 22:26

provide relative route for LLM sse

4f3d582

orpiske approved these changes Apr 4, 2025

View reviewed changes

Croway approved these changes Apr 4, 2025

View reviewed changes

orpiske merged commit ec45cf7 into wanaku-ai:main Apr 4, 2025
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(UI): Provide relative route for UI #231

fix(UI): Provide relative route for UI #231

lordrip commented Apr 3, 2025

lordrip commented Apr 3, 2025

lordrip commented Apr 3, 2025

orpiske commented Apr 3, 2025

Croway commented Apr 3, 2025 •

edited

Loading

Croway commented Apr 3, 2025

Croway commented Apr 3, 2025

lordrip commented Apr 3, 2025

lordrip commented Apr 3, 2025

lordrip commented Apr 3, 2025

lordrip Apr 3, 2025

lordrip Apr 3, 2025

lordrip Apr 3, 2025

orpiske Apr 4, 2025

Croway Apr 4, 2025

Croway Apr 4, 2025

orpiske commented Apr 4, 2025

ibek commented Apr 4, 2025

orpiske commented Apr 4, 2025

Croway commented Apr 4, 2025

orpiske commented Apr 4, 2025

		const baseUrl = VITE_API_URL \|\| window.location.origin;
		const url = new URL(baseUrl + contextUrl, baseUrl);

fix(UI): Provide relative route for UI #231

fix(UI): Provide relative route for UI #231

Conversation

lordrip commented Apr 3, 2025

Context

lordrip commented Apr 3, 2025

lordrip commented Apr 3, 2025

orpiske commented Apr 3, 2025

Croway commented Apr 3, 2025 • edited Loading

Croway commented Apr 3, 2025

Croway commented Apr 3, 2025

lordrip commented Apr 3, 2025

lordrip commented Apr 3, 2025

lordrip commented Apr 3, 2025

lordrip Apr 3, 2025

Choose a reason for hiding this comment

lordrip Apr 3, 2025

Choose a reason for hiding this comment

lordrip Apr 3, 2025

Choose a reason for hiding this comment

orpiske Apr 4, 2025

Choose a reason for hiding this comment

Croway Apr 4, 2025

Choose a reason for hiding this comment

Croway Apr 4, 2025

Choose a reason for hiding this comment

orpiske commented Apr 4, 2025

ibek commented Apr 4, 2025

orpiske commented Apr 4, 2025

Croway commented Apr 4, 2025

orpiske commented Apr 4, 2025

Croway commented Apr 3, 2025 •

edited

Loading