capri Usage alongside a Meta-Framework

Hi. I would like to use Capri along with vite-plugin-ssr. Capri prompts an error saying "Can't find index.html" due to VPS not having an index file. The same problem happens with SvelteKit, making Capri only useful when used as a meta-framework which is a position where it lacks functionality like APIs or Routing. Capri is currently the only one that has the islands the way I like it and is maintained, that's why I would like to have this being discussed, this is the error I've mentioned before:

Error: Can't find index.html in /Users/peixe/Projects/preact-client-routing
    at getIndexHtml (file:///Users/peixe/Projects/preact-client-routing/node_modules/.pnpm/[email protected][email protected]/node_modules/capri/lib/entry.js:13:15)
    at getEntryScript (file:///Users/peixe/Projects/preact-client-routing/node_modules/.pnpm/[email protected][email protected]/node_modules/capri/lib/entry.js:24:23)
    at getEntryScripts (file:///Users/peixe/Projects/preact-client-routing/node_modules/.pnpm/[email protected][email protected]/node_modules/capri/lib/entry.js:41:17)
    at config (file:///Users/peixe/Projects/preact-client-routing/node_modules/.pnpm/[email protected][email protected]/node_modules/capri/lib/vite-plugin.js:43:25)
    at runConfigHook (file:///Users/peixe/Projects/preact-client-routing/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62375:31)
    at async resolveConfig (file:///Users/peixe/Projects/preact-client-routing/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-ca21228b.js:61876:14)
    at async createServer (file:///Users/peixe/Projects/preact-client-routing/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-ca21228b.js:61153:20)
    at async CAC.<anonymous> (file:///Users/peixe/Projects/preact-client-routing/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/cli.js:734:24)

Feb 27 '23 16:02 phiberber

Thanks for bringing this up! Fun fact: I originally tried to base Capri on vite-plugin-ssr but failed to get it working. If I remember correctly, especially being able to render the same app as both SPA and SSG/MPA was something I was struggling with. On the other hand I still like the idea of using VPS as foundation a lot and it might be worth to reconsider it. I learned a lot about Vite's internals in the course of building Capri, so maybe I should give it another shot.

Feb 28 '23 09:02 fgnass

I have implemented File-Based Routing through Import Globs, I'm thinking of making or using a Vite API plugin to create the APIs.

In the meantime that I did that, I found a bug on Capri which I've patched locally, would you want me to create an issue on every bug I find or would you like for us to chat in Discord or something like that?

I have little to no idea on how to integrate Capri and VPS but I can try to do it in the next hours, I'm not that used to the Capri's source code but I've learned a little from patching it.

Also, why is this repository maintained? Are you using it on personal projects? Is there any sponsors? Is it being used in a company?

Feb 28 '23 09:02 phiberber

I think one GitHub issue per ticket would be best. My employer sponsors the work on Capri, so I can regularly spend some time on maintenance.

Feb 28 '23 11:02 fgnass

So, what is a VPS used for? There are many different applications for VPS hosting, and we'll explore some of the most common uses below.

Mar 06 '23 06:03 infoteras

So, what is a VPS used for? There are many different applications for VPS hosting, and we'll explore some of the most common uses below.

By VPS I mean vite-plugin-ssr. That's how we call it, I know... It's strange to call it that way, but it's kinda exhausting to write vite-plugin-ssr everytime.

I might on the next sunday try implementing Capri with VPS (Although I have already made a really cool framework-like routing system)

What you mean by "we'll explore some of the most common uses below"? That sounds like GPT.

Mar 06 '23 08:03 phiberber

After some digging, ignoring the index html throws makes the development environment run without the islands with no errors at all. Not even lagoons are working, which is not something I'm really surprised about. I need to check a little more into the Capri's internals to see where the Lagoons and pages are being registered so I can debug it. My current bet is that Capri even though doesn't really need the html entry file in the config stage, it uses that entry file to resolve islands, am I right?

Mar 13 '23 00:03 phiberber

Capri does two things with the index.html:

It injects the html fragments that are returned by the render function in the entry script.
It injects the hydration script.

On a sidenote: I recently came across hono.dev and was wondering if I might be a better fit than VPS to add API routes to Capri.

Mar 13 '23 08:03 fgnass

To be honest hono.dev seems like a really good alternative to VPS. I'm not really interested in Streaming currently as my focus is in SSG and not SSR. I'm really into making my own Router and that was a problem with VPS. What would be the entry script when using it along with VPS? I can't run Capri on configResolved because it needs to transform the Vite Config. Would it be possible to call Capri on transformIndexHtml to inject those parts?

Mar 13 '23 09:03 phiberber

I'd need to take a closer look at some VPS internals first, in order to answer your question. BTW, if you want SSG with file-system-based routing, you could also take a look at https://github.com/hannoeru/vite-plugin-pages. Or this demo, which also uses fs routes: https://capri-js.github.io/capri-tanstack-router-react/

Mar 13 '23 12:03 fgnass

I've been currently studying the Vite-plugin-ssr source code and @brillout is really trying to turn it into a way to create Meta-Frameworks through Vike.

I'm going to attempt integrating a prototype of Capri with Vite-plugin-ssr this weekend. Wish me luck!

Jun 17 '23 03:06 phiberber

@phiberber Thanks for the ping.

Meta-Frameworks through Vike.

Examples: https://github.com/brillout/restack and https://github.com/brillout/solide. They both fully wrap Vike. (Vite-plugin-ssr is going to be renamed Vike.)

being able to render the same app as both SPA and SSG/MPA was something I was struggling with.

With the V1 design, frameworks can implement custom configurations such as ssr: boolean. I'll implement an example of doing that (I'll circle back on this in a couple of days).

Fun fact: I originally tried to base Capri on vite-plugin-ssr but failed to get it working. [...] give it another shot.

Let me know when you stumble upon issues, I'm very much looking forward to turn Vike into an open platform.

I'm really into making my own Router and that was a problem with VPS.

Yes, the fact that Vike integrates the routing can be limiting, but so far I believe routing should be controlled by Vike and not by the Vike framework. Let's see, Vike may need to provide a lower-level hook.

Jun 17 '23 07:06 brillout

Have you considered vinxi for building the routes? It looked like you can define your various route configs for spa’s, ssg/ssr, and api’s. This is the github repo.

Feb 08 '24 23:02 woodcox