This project shows an example of how to use Vike with Cloudflare Pages, utilising SSR with Cloudflare Pages Functions.
This example project was sponsored by StanfordTax
This is a demo project to showcase using Vike - a Vite SSR plugin - and the Cloudflare Pages hosting platform. These two together provide a fully SSR and/or SPA capable website, hosted on the edge, along with an edge-hosted API to handle data for your site.
TODO: Give more of an overview, on:
- tech used
- what the platforms are, how they are used
- what you can do with them, how you would use them
- the different tech used for these demos, or what the demos are
- layout of code
If you are viewing this on the example project website, then you will see a list of contents on the left hand side.
This page explains how styling is setup and used in this particular project.
Examples to show how you may fetch data for your page, or mutate data.
This example uses Vike's hooks to fetch data server-side, then add it to the page context. This method embeds the data in the rendered HTML, so there is no client side API request needed once the client side codes loads.
This example uses a simple REST API hosted by Cloudflare Functions, and uses React Query to handle fetching the data.
This example uses TRPC to handle fetching and mutating data. It hosts the TRPC server on Cloudflare Functions, and uses React Query to fetch data clientside.
This example uses Pothos and GraphQL Yoga to create a GraphQL schema and server on a Cloudflare Function, then uses URQL to handle fetching and mutating data clientside.
These examples make use of Cloudflare Pages Functions to create various API's. You can use these functions to power your server side API - likely consumed by your client side app, but it could also be a public API.
This is a simple example, that just returns JSON from the Cloudflare Function. It is used by the corresponding data fetching example.
This example uses Pothos and GraphQL Yoga to create a GraphQL schema and server, and uses Yoga to render a GraphQL playground. You can use the playground to query the data, and view the corresponding data fetching page example to see an end-to-end example in action.
A collection of other examples that do not fit into the other categories - these may be platform specific.
This is an example of a development-only page. This means that this specific page can only be viewed in development (i.e. when NODE_ENV=development) - this is particularly useful for pages in your app that may be for dev use only, for example an internal tool that uploads mock data to a local API.
This is an example of a page that contains lazy-loaded components. This may be useful when a specific page component imports a large package, and you don't want it to be included in the main app bundle.
This is a simple example of an uncaught error happening in your app, and it being captured by Sentry. It handles sending the error with any context to Sentry, and showing a dialog to capture any extra information from the current user.