quarkiverse / quarkus-quinoa

Quinoa is a Quarkus extension which eases the development, the build and serving of single page apps (built with NodeJS: React, Angular, …) alongside Quarkus . It is possible to use it with a Quarkus backend in a single project
Apache License 2.0
85 stars 41 forks source link

SolidJS: update docs for configuration #711

Closed apatrida closed 4 months ago

apatrida commented 4 months ago

Describe the bug

Even using a sample quinoa-app, and doing something similar in a new app, all requests just end up redirecting to the Quarkus development UI, because there is no index.html in the /META-INF/resources directory. This is coded in Quarkus with no configuration option to disable it, and Quinoa does not override it.

It is also not clear if custom express middleware is needed as shown in the quinoa-codestart sample:

https://github.com/quarkiverse/quarkus-quinoa/blob/main/runtime/src/main/codestarts/quarkus/quinoa-codestart/base/src/main/webui/vite.config.js#L9

Create app with:

quarkus create app quinoa-app -x=io.quarkiverse.quinoa:quarkus-quinoa

And this only works on http://localhost:8080/quinoa.html and even if setting the SPA configuration to true still redirects to dev UI at http://localhost:8080/

quarkus.quinoa.enable-spa-routing=true

It just isn't clear how to get index.html working with something like Solid.js or even your sample working from index.html (other than quinoa.html)

And again, this create app has all the custom express handling which is not mentioned in the docs at all. Is it needed? not needed?

Regardless, can't get http://localhost:8080/ to work for the hosted webui

Quinoa version

2.4.1

Quarkus version

3.12.1

Build / Runtime

Vite

Package Manager

PNPM

Steps to reproduce the behavior

see above

Expected behavior

http://localhost:8080/ goes to the webui and not the quarkus dev ui

apatrida commented 4 months ago

Is this needed?

%dev.quarkus.quinoa.dev-server.index-page=/
apatrida commented 4 months ago

Ok, yes.

So, for Solid.js you need to set

%dev.quarkus.quinoa.dev-server.index-page=/

For it to override the index html redirect to /q/dev-ui

If you do not set the REST path for an /api such as:

quarkus.rest.path=/api

then you SHOULD set the following to avoid 404 in /api/whatever from going to the SPA

quarkus.quinoa.ignored-path-prefixes=/api

And if you want Quarkus to hit the 404 page, then don't set SPA mode, otherwise set SPA mode for the other paths in your app. Here I need to test more with a router, as currently I just created an empty solidjs app so far.

Might also need /q in the ignored path prefixes if SPA mode is on, to allow dev UI to show through.

melloware commented 4 months ago

Hmm we should update the docs for solid but I know others are using solid without issue like this user: https://github.com/quarkiverse/quarkus-quinoa/issues/705

melloware commented 4 months ago

Oh that is you!

Make sure you check the docs about SPA.

melloware commented 4 months ago

See: https://docs.quarkiverse.io/quarkus-quinoa/dev/advanced-guides.html#spa-routing

melloware commented 4 months ago

But a PR would be great to update the docs we have other framework specific instructions we should add a Solid section here: https://docs.quarkiverse.io/quarkus-quinoa/dev/web-frameworks.html#_required_configuration

apatrida commented 4 months ago

@melloware sure thing. Yet, the docs don't even mention this setting:

%dev.quarkus.quinoa.dev-server.index-page=/

Nor do the docs explain why the sample app has the express plugin in the vite config and which frameworks need it, or if only for "vite w/no framework". Since that is the sample application the product creates, and it is for no frameworks, it might confuse those using frameworks.

melloware commented 4 months ago

Isn't that documented right here: https://docs.quarkiverse.io/quarkus-quinoa/dev/config-reference.html#quarkus-quinoa_quarkus-quinoa-dev-server-index-page

Also i think the issue you are having is the CodeStart is just to show you how it works. You don't need anything in that package.json you would rip the whole web-ui out for your own project and its dependencies. Like from a Solid Start example.

For example I am using Farm in a React app with Quinoa here: https://github.com/melloware/quarkus-primereact

Take a look at my /webui/package.json it looks nothign like the codestart because i ripped out that starter project for my own entire web app.

melloware commented 4 months ago

Can you try this? Just unzip and run mvn quarkus:dev and hit localhost:8080.

This is a Solid app running under Quinoa: quarkus-solidjs.zip

apatrida commented 4 months ago

Set this value if the index page is different for the dev-server

what does "different" mean? it is the same for dev-server as production. But you have to set this setting because Quarkus thinks that if you do not have an index.html in the resources directory then you must want to go to the /q/ pages always. This has nothing to do with "if the index page is different for the dev-server".

This is a setting that must always be set for all frameworks, no? Other than the work around in the sample non-framework Vite app which tries to do this via an express plugin, but I don't think that works either.

If you go to http://localhost:8080 does it ever go to the SPA app for you? I would think not because of:

https://github.com/quarkusio/quarkus/blob/b8fbbed1bc265aec292ebc42a340622b237912be/extensions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/DevUIProcessor.java#L252

and related:

https://github.com/quarkusio/quarkus/blob/b8fbbed1bc265aec292ebc42a340622b237912be/extensions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/DevUIProcessor.java#L244

So isn't this setting REQUIRED in dev mode? maybe it should always be set to / in dev mode by Quinoa to override this redirect of dev UI pages.

melloware commented 4 months ago

Did you try my Solid app above? It needs no custom props and works out of the box?

apatrida commented 4 months ago

That solid-start app seems to behave better than the solid.js w/vite app that I was trying.

I upgraded to latest Quarkus 3.12.1, changed quarkus-resteasy-* to quarkus-rest for the renamming they did. Latest Quinoa of 2.4.1

I removed the SPA routing class work-around from that after upgrading as it seems to work fine without it.

That solid-start is very outdated, so will try with current as well, but need to replace the code as it has significant differences. But assuming it will work ok.

And correct, no custom props, works (the dev server must return better information than solidjs w/vite by itself was returning to block the /q/dev-ui redirect from index.html).

I'll try solid-start 1.0.2 which is current and report back.

apatrida commented 4 months ago

Ok, solid-start 1.0.2 works fine without custom props, only SolidJS vite template doesn't.

I'm fine with that, I prefer solid-start.

BUT, there is one change needed for Solid-Start since 1.0.x or so, is that build outputs to .output and not to dist directory.

So this setting needed for current solid-start:

quarkus.quinoa.build-dir=.output
apatrida commented 4 months ago

I'll post zip here in a moment, with modern Gradle, current everything, solid-start 1.0.2 build.

apatrida commented 4 months ago

Here it is: quarkus-quinoa-solidstart.zip

That is current quarkus, current quinoa, current Kotlin, current solid-start, current Gradle

thanks for your patience and help!

apatrida commented 4 months ago

Links in that example to test:

Solid-Start app:

API:

DEV-UI:

melloware commented 4 months ago

Nice! Yeah the reason you have to use Solid Start its its a UI only library where Solid itself won't work because its serving its own pages and renderer. Quinoa only supports client side libraries and Solid i believe wants to be the HTTP server and render its pages.

melloware commented 4 months ago

See my PR: https://github.com/quarkiverse/quarkus-quinoa/pull/712

Vinxi for Solid Start will need no custom configuration after that change

apatrida commented 4 months ago

@melloware

Vinxi for Solid Start will need no custom configuration after that change

is .output not output for the build dir. when running pnpm build or vinxi build It also creates .vinxi temporary directory as it stages the build.

Screenshot 2024-07-09 at 5 33 54 PM

dev mode is more silent, creates nothing that I know of.

melloware commented 4 months ago

Hmm ok let me look. .output is a weird choice by them.

melloware commented 4 months ago

Ok fixed in master