Quinoa - A Quarkus extension to create Modern UI with no hassle

[giscus[bot]]

Quinoa - A Quarkus extension to create Modern UI with no hassle

Quarkus: Supersonic Subatomic Java

https://quarkus.io/blog/quinoa-modern-ui-with-no-hassle/

[InfoSec812]

How does this different from the Maven Frontend Plugin?

[ia3andy]

The generated application will be the same with Quinoa and the Maven Frontend Plugin (beside the option to enable SPA-routing). The thing is, to get there, there is close to no configuration needed and it makes (IMO) the live-coding really enjoyable :)

[ia3andy]

Most of the Quarkus extensions are there to give an integrated experience and make things easier.
Also, in case like micro-frontends (many services) or when you create multiple frontend apps, Quinoa prevents from duplicating all the maven configuration.

[fblan]

It is a very good idea! Just one remark on windows, to make the extention work I had to had in properties : quarkus.quinoa.package-manager=npm.cmd
Except that the extension work very well! Great job!

[ia3andy]

Would you help on this issue quarkiverse/quarkus-quinoa#84, we have user unable to make it work on Windows, I wonder how in your situation the PATH is working.

[PStoner3]

I like the idea behind this and will check this out. But I'm curious, you mention the micro-frontend aspect (and please forgive my ignorance), how well does this integrate say with Qute templates?

[ia3andy]

For the micro-frontend aspect, I was thinking about Lit, we will provide an example. @phillip-kruger I can't find your Quinoa/Lit demo?
For integration with Qute, there is an ongoing discussion there: quarkiverse/quarkus-quinoa#113 (Renarde is optional).

[phillip-kruger]

The examples are here:

• https://github.com/phillip-kruger/members
• https://github.com/phillip-kruger/booking
• https://github.com/phillip-kruger/club-quarkus

And it goes with this talk https://youtu.be/3qTJuqsqzq8

[forwardmeasure]

Hello all,
This is quite nicely done indeed. I do have a question, however. I need to parameterise my ReactJS application with parameters such as Keycloak URLs, etc. Normally, we'd use .env files, or pass environment variables to npm run start. I am at a bit of a loss as to how to do this with Quinoa. I packaged my app into a Docker container and run it, but saw no place where I could pass these parameters.

My need is to externalise the JS app configuration.

Any help here would be most appreciated.

Kind regards,
Prashanth

[ia3andy]

Hi @forwardmeasure

This section of the guide should answer your need: https://quarkiverse.github.io/quarkiverse-docs/quarkus-quinoa/dev/#override-commands

If you still have problem to configure things, please create an issue on the Quinoa repository https://github.com/quarkiverse/quarkus-quinoa/issues

Cheers,

[InfoSec812]

Hi @forwardmeasure

This section of the guide should answer your need: https://quarkiverse.github.io/quarkiverse-docs/quarkus-quinoa/dev/#override-commands

If you still have problem to configure things, please create an issue on the Quinoa repository https://github.com/quarkiverse/quarkus-quinoa/issues

Cheers,

This is only useful when running in Dev mode honestly. Once you build a container, you will need to get your configuration from the environment somehow. With respect to Quarkus and Quinoa, there is no simple answer. Based on past experience, I would implement an API endpoint from which the React frontend could retrieve the configuration and then override that configuration in the Quarkus application.properties on a per-environment basis. Since the React application is being served up from the Quarkus web server, the API endpoint should always be relative to the React application location.

The newly implemented /config endpoint in the Quarkus code could provide the remaining settings.

That said, for something like Keycloak, I would just let Quarkus handle all of that instead of worrying about implementing anything in React. The Quarkus Keycloak/OIDC module can do all of this for you at the server side.