search

capri-js / capri

Build static sites with interactive islands
https://capri.build
MIT License
208 stars 5 forks source link

Usage alongside a Meta-Framework #48

Open phiberber opened 1 year ago

phiberber commented 1 year ago

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/capri@5.2.2_vite@4.1.4/node_modules/capri/lib/entry.js:13:15)
    at getEntryScript (file:///Users/peixe/Projects/preact-client-routing/node_modules/.pnpm/capri@5.2.2_vite@4.1.4/node_modules/capri/lib/entry.js:24:23)
    at getEntryScripts (file:///Users/peixe/Projects/preact-client-routing/node_modules/.pnpm/capri@5.2.2_vite@4.1.4/node_modules/capri/lib/entry.js:41:17)
    at config (file:///Users/peixe/Projects/preact-client-routing/node_modules/.pnpm/capri@5.2.2_vite@4.1.4/node_modules/capri/lib/vite-plugin.js:43:25)
    at runConfigHook (file:///Users/peixe/Projects/preact-client-routing/node_modules/.pnpm/vite@4.1.4/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62375:31)
    at async resolveConfig (file:///Users/peixe/Projects/preact-client-routing/node_modules/.pnpm/vite@4.1.4/node_modules/vite/dist/node/chunks/dep-ca21228b.js:61876:14)
    at async createServer (file:///Users/peixe/Projects/preact-client-routing/node_modules/.pnpm/vite@4.1.4/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/vite@4.1.4/node_modules/vite/dist/node/cli.js:734:24)
fgnass commented 1 year ago

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.

phiberber commented 1 year ago

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?

fgnass commented 1 year ago

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.

infoteras commented 1 year ago

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.

phiberber commented 1 year ago

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.

phiberber commented 1 year ago

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?

fgnass commented 1 year ago

Capri does two things with the index.html:

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

2) 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.

phiberber commented 1 year ago

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?

fgnass commented 1 year ago

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/

phiberber commented 1 year ago

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!

brillout commented 1 year ago

@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.

woodcox commented 9 months ago

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.

lschierer commented 3 weeks ago

I was about to file a ticket asking for Lit support as a framework when I saw this issue, I am fairly sure with either the Vite SSR or the Hono.dev solution that I would effectively get Lit support with/out having to essentially ignore one of the other frameworks that Capri supports being in my config.