Share Vike on Cloudflare Pages Demo?

[osseonews]

After alot of tinkering and some help from ChatGpt, I was able to get a working version of Vike on Cloudflare Pages. To help others, I would like to share this as an example, as the current example with Cloudflare Pages is out of date and will not work as expected. How can I do this? I'm sure it's not perfect, but perhaps those are much smarter than me can work with it, to perfect it.

[brillout]

PR welcome 👍

[travis-r6s]

@brillout I'd be happy to create a simple example using vike-react - I'll try and work on it this w/e.

[brillout]

Neat thanks, looking forward to it 👀

Can't wait, it seems like Cloudfalre Workers is starting to get ready for prime time ✨

[osseonews]

hey all,
I updated our repo at https://github.com/osseonews/vike-app-cfp to use Itty Router in the _worker file, and included a sample API route to show how it could work (this API route is called in a React About page/component to make a message interactive). Note: We didn't actually finish this page yet completely, but it works as a demo. Also, included a Miniflare option in the dev environment to use KV, to show how Miniflare could work. I'll probably refactor the entire dev to use Itty Router, as you can use in Node environment, but too lazy now. Also, I think Miniflare is probably just useful for testing Cloudflare storage in dev, for everything else you can just Express or something like Itty. Hope this helps someone. Please remember that I mainly a hobbyist, so not sure if everything is coded correctly, in terms of Vike. With Itty, I am quite familiar with it and use it on all our production sites and have been very happy with it.

[osseonews]

BTW, I would say that one of the great things about KV in Cloudflare, is that it eliminates any need for SSG. If you store your content in KV and do SSR, then that is pretty much is just as good as SSG, at least in my tests. What I've been testing is simply getting KV data in the Worker and passing to page context and then just display on page. No need for anything else.

[brillout]

Indeed, and it seems much more powerful than Vercel's ISR.

[travis-r6s]

@brillout A simple demo of vike-react and Cloudflare Pages here: https://github.com/travis-r6s/vike-react-cf-pages

LMK if there is anything else I should add?

[osseonews]

The middeware file will run in development? (Edit: I mean the Vike specific code in middleware)

[brillout]

@travis-r6s How would you do this then? I think that's the issue @osseonews is referring to.

The fact that renderPage() is hidden from the user also means that the Cloudflare Request object isn't available in pageContext and, therefore, also isn't available to the user's React/Vue components.

Most notably, the cookie/user information isn't available.

The question is: how can we, somehow, add Cloudflare's Request object (and/or cookie/user information) to Vike's pageContext?

My previous comment was suggesting to make renderPage() available to the user, so that the user can add Request stuff to pageContext. But maybe there is another way to solve this 🤔

I guess the bottom line is: how can we pass Request stuff to Vike?

[travis-r6s]

@osseonews No, because in development the Vite dev server handles the Vike requests. So the development request chain goes (simplified a bit):

1. Request from browser to Wrangler dev server /about
2. Wrangler dev server has no handler for the URL (i.e. it doesn't match /api), so it passes it off to the proxy
3. The proxy proxies this request to the Vite dev server http://localhost:3000/about
4. The Vite dev server receives this request, and Vike sees that it is a page, so takes over the rendering.
5. Vike sends back a response
6. The proxy receives this response, and sends it back to the browser

In production, the Vite dev server obviously isn't running (and we don't need it to as we already have all built assets), so the middleware file then passed the isProduction check, and uses Vike's renderPage to handle the request.

If you wanted to, you can run the renderPage in the middleware function even in dev, but I think I had some issues there, so I did it the way I did.

[travis-r6s]

@brillout We should simply be able to just remove the isProduction equivalent check in the middleware, and handle all requests with renderPage. I mention above though that I think I came across some issues doing it this way in dev, so it was simpler to run it the way I did. I can test this out again when I get a second though...

[brillout]

The issue is that Vike's middleware is a catch-all route (to be able to show 404 pages), so it needs to be placed after Vite's middleware. Thus my previous comment about finding a way to distinguish URLs.

I can test this out again when I get a second though...

Neat, looking forward to it 👀. But no rush :)

[jamiehaywood]

I had a look at this, but integrating with Hono. I may be missing something, but how do you get Cloudflare Pages to serve pre-rendered HTML from Vike?

[osseonews]

@jamiehaywood I believe you are asking about customizing the onRenderHtml.tsx file? If so, I believe you need to use the worker.js strategy as I don't see how you can do that with standard functions strategy. You can look at my repo linked to above which uses a worker file for Cloudflare pages. I used itty-router, but the implementation with Hono would basically be the same thing. BTW, I haven't updated my repo yet b/c I've gotten super busy on another project and haven't had time to finish all the Vike code. Hope to do it next month.

[jamiehaywood]

I was referring to serving pre-rendered HTML i.e:

// vite.config.ts
export default defineConfig({
  plugins: [
    react(),
    vike({ prerender: true }),
  ],
})

where pre-render outputs an index.html file inside a folder i.e. /about/index.html. It seems that the worker doesn't serve the pre-rendered HTML (I tested this by adding a comment in the html after building). Is it the case that the function just takes all requests and does SSR?

[travis-r6s]

@jamiehaywood In that case, you wouldn't need a custom worker or to instantiate Vike serverside at all, as you would just run a build, then point Cloudflare pages to your dist folder (Pages will automatically serve your static files as with any other host like Netlify etc.)...