Sveltekit framework support #391

fblan · 2023-06-21T15:37:07Z

Describe the bug

Hi,
I have implemented quarkus quinoa with a sveltekit application that is using vite.
In production mode, everything is working perfectly, but I am not able to make it work in dev mode.

If I put properties:

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

I have the following error in console :

Error: Not found: //
at resolve (C:/DEV/snipets/sveltekit-quark/230621-svk3/src/main/webui/node_modules/@sveltejs/kit/src/runtime/server/respond.js:430:13)

and I am redirected to quarkus default index.html.

If don't have %dev.quarkus.quinoa.index-page=/ , I have the following error:

Error: Not found: /index.html                                                                                                                                                                                                       
    at resolve (C:/DEV/snipets/sveltekit-quark/230621-svk3/src/main/webui/node_modules/@sveltejs/kit/src/runtime/server/respond.js:430:13)

As a workaround, I have tried to put sev-server to false but in this case the problem is that sveltekit generate some files in a sveltekit folder in sources during code generation, and these files are deteted by live reload. The compilation is continuously trigered.

I hope I didn't make a mistake, and thanx a lot for your work, this extension is very cool :)

Quinoa version

2.0.5

Quarkus version

3.1.2.Final

Build / Runtime

Vite

Package Manager

None

Steps to reproduce the behavior

clone https://github.com/fblan/test-quark/tree/main
./mvnw package
java -jar target/quarkus-app/quarkus-run.jar
open browser on http://localhost:8080
the application is displayed normally.
click on SVPOSTS and a page is displayed. This page call quarkus rest api. Everything is working perfectly.

start the dev mode:
`
Error: Not found: //
at resolve (C:/DEV/snipets/sveltekit-quark/230621-svk3/src/main/webui/node_modules/@sveltejs/kit/src/runtime/server/respond.js:430:13)

`

Expected behavior

same behavior than in production mode.

The text was updated successfully, but these errors were encountered:

melloware · 2023-06-21T16:44:13Z

Yep definitely something whacky here how SvelteKit works. I will look into it

melloware · 2023-06-21T19:41:57Z

Can you elaborate on sev-server to false? I would like to try this. I think we need to add .svelte-kit to..

private static final Set<String> IGNORE_WATCH = Set.of("node_modules", "build", "target", "dist", "out");

fblan · 2023-06-22T07:17:31Z

Svelte kit use .svelte-kit folder to do some preprocessing.
I finally was able to change ".svelte-kit" it to "out" (thanx for the information) directory, and this modification enable the dev server false to work!
(the link to the repo is : https://github.com/fblan/test-quark/tree/devserver/false )
Perhaps if IGNORE_WATCH was configurable, it would be a nice to have.
I will try to investigate on the dev-server true part this evening.

ia3andy · 2023-06-22T09:15:45Z

Svelte kit use .svelte-kit folder to do some preprocessing. I finally was able to change ".svelte-kit" it to "out" (thanx for the information) directory, and this modification enable the dev server false to work! (the link to the repo is : https://github.com/fblan/test-quark/tree/devserver/false ) Perhaps if IGNORE_WATCH was configurable, it would be a nice to have. I will try to investigate on the dev-server true part this evening.

I think it makes sense to have quarkus.quinoa.classic-dev.ignore-dirs. I've thought about classic-dev opposed to dev-server, but if you have a better idea go for it. Having a specific namespace is important as it will allow new possible options in the future without breaking the api.

@fblan Ready for another great contribution :)?

ia3andy · 2023-06-22T09:17:08Z

Not sure why the dev-server mode isn't working, is it due to svelte?

melloware · 2023-06-22T09:21:05Z

@ia3andy it looks like this SVK does some crazy stuff with dynamically generating the initial JS file that it loads on /. I have never seen anything like it. I think we definitely need to try and make this work out of the box.

I personally think we should ignore all "." Directories as I realized ".next" also gets generated when using NextJS

ia3andy · 2023-06-22T09:24:41Z

@ia3andy it looks like this SVK does some crazy stuff with dynamically generating the initial JS file that it loads on /. I have never seen anything like it. I think we definitely need to try and make this work out of the box.

I personally think we should ignore all "." Directories as I realized ".next" also gets generated when using NextJS

Yeah, ok that makes sense we can give it a try .* and act if there are issues in the future 👍

melloware · 2023-06-22T13:18:46Z

@fblan need some help here. Can you paste here your EXACT Quinoa settings? I still can't get this to work in either Dev mode or Production mode?

I am using an out of the box Svelte Kit hello world app.

fblan · 2023-06-22T15:03:54Z

To have it working in production mode:
if sveltekit you have to change sveltekit configuration:
you must install static adapter:
in webui folder:
npm i -D @sveltejs/adapter-static,

then in svelte.config.js:

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapter({
            fallback: 'index.html' // may differ from host to host
        })
	}
};

export default config;

and in package.json you have to add the start script:
"start": "vite dev"

With this, the production mode should work.
If it is not the case don't hesitate!

melloware · 2023-06-22T15:07:55Z

Sorry what about your Quinoa props?

quarkus.quinoa.dev-server=false
quarkus.quinoa.build-dir=.svelte-kit/output
quarkus.quinoa.index-page=/
#quarkus.quinoa.enable-spa-routing=false

???

fblan · 2023-06-22T15:16:18Z

sorry I miss read:

quarkus.quinoa.package-manager-install=true
quarkus.quinoa.package-manager-install.node-version=18.16.0
quarkus.quinoa.build-dir=build
quarkus.quinoa.enable-spa-routing=true
quarkus.quinoa.dev-server=false
quarkus.quinoa.index-page=index.html

fblan · 2023-06-22T16:46:13Z

It is strange, I have tried with quinoa 2.0.5 and dev-server=false works well, but when I try with last snapshot version it is not working anymore. I will try to see why.

melloware · 2023-06-22T17:07:17Z

I am investigating

melloware · 2023-06-22T17:38:13Z

OK submitted a PR that adds Svelte instructions I was able to test them myself and boil them down to minimal changes.

However if you use Svelte's alternative using Vite it works out of the box with Quinoa including Hot Swapping dev mode!

See: https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit

fblan · 2023-06-23T13:50:49Z

First of all, thanx a lot for the integration of sveltekit : 👍

I have another question : I have tried to make quinoa work with sveltekit in devserver mode.
I faced 3 problems:

vite wait in root url in dev mode while it wait on index.html in normal mode
sveltekit use weird internals link in dev mode for parameterized pages like /src/generated/[param]/+page.ts and these link are not accepted by vertx.
on quarkus restart in dev mode, it is not able to connect anymore to vite server (connection refused).

I was able to overcome the two first issues:

First issue:

setting dev index-page to '/':
%dev.quarkus.quinoa.index-page=/
by correcting one class in QuinoaDevProxyHandler function handle line 60, replacing

- final String resourcePath = path.endsWith("/") ? path + config.indexPage : path;
+ final String resourcePath = path.endsWith("/") && !"/".equals(config.indexPage) ? path + config.indexPage : path;

Second issue:
and by adding in jvm parameters when I start quarkus:
-Dvertx.disableURIValidation=true

But I am struggling for now with the third issue.
I think the correction of QuinoaDevProxyhandler should not hurt (but I am not totally sure :) )

What do you think?

melloware · 2023-06-23T13:52:33Z

Feel free to submit a PR!

melloware · 2023-06-23T13:54:35Z

Also if you want to try it here is a Svelte example that works out of the box including Dev mode.

vite-svelte.zip

fblan · 2023-06-23T14:50:17Z

I will have look, thanx again.
I will do a PR on monday.

Thanx a lot for your help :)

ia3andy · 2023-06-26T07:29:23Z

@fblan

First of all, thanx a lot for the integration of sveltekit : 👍

I have another question : I have tried to make quinoa work with sveltekit in devserver mode. I faced 3 problems:

vite wait in root url in dev mode while it wait on index.html in normal mode

sveltekit use weird internals link in dev mode for parameterized pages like /src/generated/[param]/+page.ts and these link are not accepted by vertx.

on quarkus restart in dev mode, it is not able to connect anymore to vite server (connection refused).

I was able to overcome the two first issues:

First issue:

setting dev index-page to '/':
%dev.quarkus.quinoa.index-page=/

by correcting one class in QuinoaDevProxyHandler function handle line 60, replacing
- final String resourcePath = path.endsWith("/") ? path + config.indexPage : path;
+ final String resourcePath = path.endsWith("/") && !"/".equals(config.indexPage) ? path + config.indexPage : path;

This seems like a good fix to add.

Second issue: and by adding in jvm parameters when I start quarkus: -Dvertx.disableURIValidation=true

I think we should request to create a configuration in Quarkus Vertx for this. So you may configure something like this:

%dev.quarkus.vertx.disable-uri-validation=true

But I am struggling for now with the third issue. I think the correction of QuinoaDevProxyhandler should not hurt (but I am not totally sure :) )

What do you think?

For the connection refused, have you tried the latest version (I added a fix recently for "connection refused")

melloware self-assigned this Jun 22, 2023

melloware added the bug Something isn't working label Jun 22, 2023

melloware added this to the 2.0.6 milestone Jun 22, 2023

melloware added a commit to melloware/quarkus-quinoa that referenced this issue Jun 22, 2023

Fix quarkiverse#391: Update ignored dirs and Svelte instructions

e5d1064

melloware mentioned this issue Jun 22, 2023

Fix #391: Update ignored dirs and Svelte instructions #393

Merged

melloware added a commit to melloware/quarkus-quinoa that referenced this issue Jun 22, 2023

Fix quarkiverse#391: Update ignored dirs and Svelte instructions

a8005fd

melloware changed the title ~~Quarkus dev mode quinoa + sveltekit not working~~ Sveltekit support Jun 23, 2023

melloware changed the title ~~Sveltekit support~~ Sveltekit framework support Jun 23, 2023

melloware added enhancement New feature or request and removed bug Something isn't working labels Jun 23, 2023

fblan mentioned this issue Jun 26, 2023

make indexPage value to empty string when configured with value "/" #401

Merged

2 tasks

melloware added a commit to melloware/quarkus-quinoa that referenced this issue Jun 26, 2023

Fix quarkiverse#391: Update ignored dirs and Svelte instructions

c2a17e7

melloware closed this as completed in #393 Jun 26, 2023

melloware added a commit that referenced this issue Jun 26, 2023

Fix #391: Update ignored dirs and Svelte instructions (#393)

bda59d5

melloware reopened this Jun 26, 2023

melloware closed this as completed in #401 Jun 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sveltekit framework support #391

Sveltekit framework support #391

fblan commented Jun 21, 2023 •

edited by melloware

Loading

melloware commented Jun 21, 2023

melloware commented Jun 21, 2023

fblan commented Jun 22, 2023 •

edited

Loading

ia3andy commented Jun 22, 2023

ia3andy commented Jun 22, 2023

melloware commented Jun 22, 2023

ia3andy commented Jun 22, 2023 •

edited

Loading

melloware commented Jun 22, 2023 •

edited

Loading

fblan commented Jun 22, 2023 •

edited by melloware

Loading

melloware commented Jun 22, 2023

fblan commented Jun 22, 2023 •

edited by melloware

Loading

fblan commented Jun 22, 2023

melloware commented Jun 22, 2023

melloware commented Jun 22, 2023

fblan commented Jun 23, 2023 •

edited by ia3andy

Loading

melloware commented Jun 23, 2023

melloware commented Jun 23, 2023

fblan commented Jun 23, 2023 •

edited

Loading

ia3andy commented Jun 26, 2023

Sveltekit framework support #391

Sveltekit framework support #391

Comments

fblan commented Jun 21, 2023 • edited by melloware Loading

Describe the bug

Quinoa version

Quarkus version

Build / Runtime

Package Manager

Steps to reproduce the behavior

Expected behavior

melloware commented Jun 21, 2023

melloware commented Jun 21, 2023

fblan commented Jun 22, 2023 • edited Loading

ia3andy commented Jun 22, 2023

ia3andy commented Jun 22, 2023

melloware commented Jun 22, 2023

ia3andy commented Jun 22, 2023 • edited Loading

melloware commented Jun 22, 2023 • edited Loading

fblan commented Jun 22, 2023 • edited by melloware Loading

melloware commented Jun 22, 2023

fblan commented Jun 22, 2023 • edited by melloware Loading

fblan commented Jun 22, 2023

melloware commented Jun 22, 2023

melloware commented Jun 22, 2023

fblan commented Jun 23, 2023 • edited by ia3andy Loading

melloware commented Jun 23, 2023

melloware commented Jun 23, 2023

fblan commented Jun 23, 2023 • edited Loading

ia3andy commented Jun 26, 2023

fblan commented Jun 21, 2023 •

edited by melloware

Loading

fblan commented Jun 22, 2023 •

edited

Loading

ia3andy commented Jun 22, 2023 •

edited

Loading

melloware commented Jun 22, 2023 •

edited

Loading

fblan commented Jun 22, 2023 •

edited by melloware

Loading

fblan commented Jun 22, 2023 •

edited by melloware

Loading

fblan commented Jun 23, 2023 •

edited by ia3andy

Loading

fblan commented Jun 23, 2023 •

edited

Loading