How to use the Kaoto npm package?

[Ortofta]

Hi!
I would like to embed Kaoto in a Quarkus app, preferably using the npm package available here But I don't really understand how it works. :)
Does it expose the "full" Kaoto UI somehow, or is it supposed to be used as building blocks for setting up a custom UI from scratch? Is there any documentation or examples on how to use it somewhere, that I haven't found?

Also, building Kaoto (specifically building the component catalog by running yarn workspace @kaoto/camel-catalog run build) on Windows doesn't seem to work. Is it supported, or does it only build on macOS / Linux?

[lordrip]

Hi @Ortofta, it depends on what you want to achieve. Can you provide more information about your goal so we can better advise?

Also, building Kaoto (specifically building the component catalog by running yarn workspace @kaoto/camel-catalog run build) on Windows doesn't seem to work. Is it supported, or does it only build on macOS / Linux?

It should work, but since we don't have a Windows build in CI, something might have fallen through the cracks, please feel free to file a bug for that with some logs if available.

[Ortofta]

Paths on different platforms are always fun - let me know if you need anything more regarding that. :)

I haven't thought everything through super carefully so it might not make total sense - but the concept I'm imagining at the moment is to build something on top of (or possibly as a separate application) Camel Quarkus where a user can design a route / integration using a visual editor like Kaoto. Then I would like to add a button that would deploy the designed route to a Camel instance (itself, most likely, if the UI is added on top of a Camel instance).

That may not make sense for Kaoto in general - I assume the aim for Kaoto is to provide the visual editing, and then having the user download the generated source code and deploy manually?

Anyway - I'm more then happy to collaborate if there's anything in this that is of interest or aligns with what you are planning.

[lordrip]

Sorry for the late reply, I've been a bit busy on this side of the screen :)

That may not make sense for Kaoto in general

I think depending on how the process looks like, it would make sense, I'll get into why in the next section.

I assume the aim for Kaoto is to provide the visual editing, and then having the user download the generated source code and deploy manually?

That is the first milestone for Kaoto: being a good visual editor for Camel Routes to increase productivity. The next step would be to provide help executing the routes.

There are other things we want to do first, (here you can have a rough idea about what are we gonna work on, and here you can see issues looking for volunteers) but after that, executing routes or researching other platforms to run Kaoto I think would be the next thing.

So far the only topic that I could think of that may not exactly match Kaoto's roadmap would be to deploy on top of an existing application, and I write this very loosely, chances are that it makes total sense. That being said, depending on how your application expects to receive the routes, we can always do the work on an intermediate layer, so you can use it for your app and Kaoto could use it if not for the same purpose, at least use the same target API.

I think that could be a win-win, on one hand, you can use an existing UI, and on the other, the improvements are done upstream so we can leverage them in other runtimes / platforms as well 😃

Please let me know what you think.

[apupier]

Executing/deploying routes is delegated to other existing tools (Maven Quarkus/Spring Boot/Kubernetests/OpenShift plugins, Camel Jbang, Camel K). It depends on your context. There is nothing specific to kaoto for the execution as Kaoto is able to design a classical Camel Yaml route which can then be used in the runtime of your choice.
it means that you can reuse the tooling of your choice for the execution. Either very standard Maven integration in whatever IDE of your choice, or your specific integration or the VS Code Extension pack for Apache Camel.

[Ortofta]

Thank you @lordrip and @apupier for your replies.

There are other things we want to do first, (here you can have a rough idea about what are we gonna work on, and here you can see issues looking for volunteers) but after that, executing routes or researching other platforms to run Kaoto I think would be the next thing.

I will look at your roadmap and starter issues - are there any in particular that is good for a noob looking to get familiar with how Kaoto is built? I'm not super familiar with React (I'm a Java dev at heart, and we mostly use Lit components in the product I'm working on day to day).

Executing/deploying routes is delegated to other existing tools (Maven Quarkus/Spring Boot/Kubernetests/OpenShift plugins, Camel Jbang, Camel K). It depends on your context. There is nothing specific to kaoto for the execution as Kaoto is able to design a classical Camel Yaml route which can then be used in the runtime of your choice.

Of course - I understand that the running of routes itself is not a concern for Kaoto. I'm looking for a way to "hide" the details of the deployment of the route from the user. In my case I would most likely be using Camel Quarkus - so I would try to deploy to either a running instance of Camel Quarkus or potentially spinning up a new instance. I'm thinking it should be possible to make it runtime agnostic, but I haven't thought through all the details yet - I'm in some sort of planning PoC mode at the moment. :)

[lordrip]

We use the "Good first issue" tag :)

[lordrip]

Hi @Ortofta, please feel free to let me know if you have ideas around how would you like to deploy the routes, provided you have a working UI :)

[lordrip]

Hi @Ortofta, it's a very interesting POC. Here's a couple of ideas about using Kaoto UI for it:

1. Use the App component and decorate it with an additional Run button which will fetch the route from localStorage and make the POST request with the content. This could be the easiest way, but probably the less flexible.
2. Another option is to use the RouteVisualization component in combination with the code and codeChange properties. The advantage of this is that it would be more flexible about what type of UI you want to create.

In both approaches, you will need to install the @kaoto/kaoto package from the npm registry. I think using Quinoa could help in building the UI application if your project will be backend centric.

[Ortofta]

Thank you, @lordrip . I hadn't heard of Quinoa before - I'll take a look at that for sure. I have previously used the Maven frontend-plugin to run npm and WebPack or Vite to package the web parts when building UI on top of Quarkus. But Quinoa might be even easier. :)

I'll try and play around with the options you suggested. Does Kaoto store the routes in localStorage while they are being edited?

In the future I would like to store the route YAML code in a database to allow them to be restored and restarted if the app restarts. Is there any way to load an existing route into Kaoto for editing? Pasting the YAML into the source code editor works - but is it possible to pass the YAML code in as a parameter to some component?

[lordrip]

Anytime!

Does Kaoto store the routes in localStorage while they are being edited?

Yes, it does, you can check the sourceCode key in the localStorage object.

Is there any way to load an existing route into Kaoto for editing?

Yes, if you use the RouteVisualization component, you'll notice there's a code property to fill it up with the YAML code. With the first approach that I mentioned, it's also possible, but it involves more steps, as you will need access to the SourceCode and Entities react contexts.

[Ortofta]

@lordrip - I have one more (potentially very stupid) question. :)

I tried using the @kaoto/kaoto npm package in a simple React app - but when I try to import anything from that package I get a lot of errors. It's probably me being stupid and doing something very simple very wrong - but do you have an example where the package is used that I could look at?

The errors I get are like this - but for several different components:

ERROR in ./node_modules/@kaoto/kaoto/lib/esm/public-api.js 2:0-37 Module not found: Error: Can't resolve './components/Catalog' in '/home/markus/Documents/camel-experiment/kaoto-ui-poc/node_modules/@kaoto/kaoto/lib/esm' Did you mean 'index.js'? BREAKING CHANGE: The request './components/Catalog' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

Any ideas what I'm doing wrong?

[lordrip]

mmm, that's strange, what tool are you using for bundling? We use the npm package in the VS Code extension: https://github.com/KaotoIO/vscode-kaoto/blob/1cb614d8126388b36c611f2db0552452257286f7/package.json#L35

Also, what node.js version do you have?

[Ortofta]

I basically just did npx create-react-app kaoto-ui-poc, npm install @kaoto/kaoto and added some Kaoto import statement to the App.js script. Then when running npm start everything fell apart. :)

At the end it says webpack compiled with 11 errors and 1 warning - so I assume it's using WebPack. I just left everything as whatever was generated by the npx command.

These are the versions I was using for this experiment:
➜ kaoto-ui-poc git:(develop) ✗ node --version v20.16.0 ➜ kaoto-ui-poc git:(develop) ✗ npm --version 10.8.1

I did try some variants of import statements as well as require instead - but I was never able to get it to work. But it may very well be me who is doing something wrong.

I'll have a look at the VS Code extension later and see if I can figure something out.

[lordrip]

mmm, yeah, I think some configuration around webpack needs to be done, especially around ESM. We use vite in Kaoto, maybe you could try with that instead?

yarn create vite my-vue-app --template react-ts

[Ortofta]

Ah - thanks! I got it to using your suggestion.
This is why I try to stay away from the JavaScript world as much as possible - to me it's just a jungle of different build systems, package managers and frameworks. I guess I'm getting old... 😆

[lordrip]

hehe, that's the reality so far 😅