>;
4 |
5 | import type { MovieDetails } from "../types";
6 | import type { PageContextServer } from "vike/types";
7 |
8 | const data = async (pageContext: PageContextServer) => {
9 | await sleep(300); // Simulate slow network
10 |
11 | const response = await fetch(
12 | `https://brillout.github.io/star-wars/api/films/${pageContext.routeParams!.id}.json`,
13 | );
14 | let movie = (await response.json()) as MovieDetails;
15 |
16 | // We remove data we don't need because the data is passed to the client; we should
17 | // minimize what is sent over the network.
18 | movie = minimize(movie);
19 |
20 | return {
21 | movie,
22 | // The page's
23 | title: movie.title,
24 | };
25 | };
26 |
27 | function minimize(movie: MovieDetails & Record<string, unknown>): MovieDetails {
28 | const { id, title, release_date, director, producer } = movie;
29 | movie = { id, title, release_date, director, producer };
30 | return movie;
31 | }
32 |
33 | function sleep(milliseconds: number) {
34 | return new Promise((r) => setTimeout(r, milliseconds));
35 | }
36 |
--------------------------------------------------------------------------------
/examples/fastify-vike/pages/star-wars/index/+Page.tsx:
--------------------------------------------------------------------------------
1 | export default Page;
2 |
3 | import { useData } from "../../../renderer/useData";
4 | import type { Data } from "./+data";
5 |
6 | function Page() {
7 | const { movies } = useData<Data>();
8 | return (
9 | <>
10 | <h1>Star Wars Movies</h1>
11 | <ol>
12 | {movies.map(({ id, title, release_date }) => (
13 | <li key={id}>
14 | <a href={`/star-wars/${id}`}>{title}</a> ({release_date})
15 | </li>
16 | ))}
17 | </ol>
18 | <p>
19 | Source:{" "}
20 | <a href="https://brillout.github.io/star-wars/">
21 | brillout.github.io/star-wars
22 | </a>
23 | .
24 | </p>
25 | <p>
26 | Data can be fetched by using the <code>data()</code> hook.
27 | </p>
28 | </>
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/examples/fastify-vike/pages/star-wars/index/+data.ts:
--------------------------------------------------------------------------------
1 | // https://vike.dev/data
2 | export { data };
3 | export type Data = Awaited<ReturnType<typeof data>>;
4 |
5 | import type { MovieDetails, Movie } from "../types";
6 | import type { PageContextServer } from "vike/types";
7 |
8 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
9 | const data = async (pageContext: PageContextServer) => {
10 | await sleep(700); // Simulate slow network
11 |
12 | const response = await fetch(
13 | "https://brillout.github.io/star-wars/api/films.json",
14 | );
15 | const moviesData = (await response.json()) as MovieDetails[];
16 |
17 | // We remove data we don't need because the data is passed to the client; we should
18 | // minimize what is sent over the network.
19 | const movies = minimize(moviesData);
20 |
21 | return {
22 | movies,
23 | // The page's <title>
24 | title: `${movies.length} Star Wars Movies`,
25 | };
26 | };
27 |
28 | function minimize(movies: MovieDetails[]): Movie[] {
29 | return movies.map((movie) => {
30 | const { title, release_date, id } = movie;
31 | return { title, release_date, id };
32 | });
33 | }
34 |
35 | function sleep(milliseconds: number) {
36 | return new Promise((r) => setTimeout(r, milliseconds));
37 | }
38 |
--------------------------------------------------------------------------------
/examples/fastify-vike/pages/star-wars/types.ts:
--------------------------------------------------------------------------------
1 | export type Movie = {
2 | id: string;
3 | title: string;
4 | release_date: string;
5 | };
6 | export type MovieDetails = Movie & {
7 | director: string;
8 | producer: string;
9 | };
10 |
--------------------------------------------------------------------------------
/examples/fastify-vike/readme.md:
--------------------------------------------------------------------------------
1 | # Vavite Vike example with Fastify
2 |
3 | Simple example of using [Vike](https://vike.dev/) with Vavite and Fastify that shows how to:
4 |
5 | - Integrate Fastify with Vite's dev server
6 | - Run multiple build steps (for client and server)
7 | - Perform React SSR with Vike
8 |
9 | > [Try on StackBlitz](https://stackblitz.com/github/cyco130/vavite/tree/main/examples/fastify-vike)
10 |
11 | Clone with:
12 |
13 | ```bash
14 | npx degit cyco130/vavite/examples/fastify-vike
15 | ```
16 |
--------------------------------------------------------------------------------
/examples/fastify-vike/renderer/+config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "vike/types";
2 |
3 | // https://vike.dev/config
4 | export default {
5 | // https://vike.dev/clientRouting
6 | clientRouting: true,
7 | // https://vike.dev/meta
8 | meta: {
9 | // Define new setting 'title'
10 | title: {
11 | env: { server: true, client: true },
12 | },
13 | // Define new setting 'description'
14 | description: {
15 | env: { server: true },
16 | },
17 | },
18 | hydrationCanBeAborted: true,
19 | } satisfies Config;
20 |
--------------------------------------------------------------------------------
/examples/fastify-vike/renderer/+onPageTransitionEnd.ts:
--------------------------------------------------------------------------------
1 | // https://vike.dev/onPageTransitionEnd
2 | export { onPageTransitionEnd };
3 |
4 | import type { OnPageTransitionEndAsync } from "vike/types";
5 |
6 | const onPageTransitionEnd: OnPageTransitionEndAsync =
7 | async (): ReturnType<OnPageTransitionEndAsync> => {
8 | console.log("Page transition end");
9 | document.querySelector("body")!.classList.remove("page-is-transitioning");
10 | };
11 |
--------------------------------------------------------------------------------
/examples/fastify-vike/renderer/+onPageTransitionStart.ts:
--------------------------------------------------------------------------------
1 | // https://vike.dev/onPageTransitionStart
2 | export { onPageTransitionStart };
3 |
4 | import type { OnPageTransitionStartAsync } from "vike/types";
5 |
6 | const onPageTransitionStart: OnPageTransitionStartAsync =
7 | async (): ReturnType<OnPageTransitionStartAsync> => {
8 | console.log("Page transition start");
9 | document.querySelector("body")!.classList.add("page-is-transitioning");
10 | };
11 |
--------------------------------------------------------------------------------
/examples/fastify-vike/renderer/+onRenderClient.tsx:
--------------------------------------------------------------------------------
1 | // https://vike.dev/onRenderClient
2 | export { onRenderClient };
3 |
4 | import ReactDOM from "react-dom/client";
5 | import { Layout } from "./Layout";
6 | import { getPageTitle } from "./getPageTitle";
7 | import type { OnRenderClientAsync } from "vike/types";
8 |
9 | let root: ReactDOM.Root;
10 | const onRenderClient: OnRenderClientAsync = async (
11 | pageContext,
12 | ): ReturnType<OnRenderClientAsync> => {
13 | const { Page } = pageContext;
14 |
15 | // This onRenderClient() hook only supports SSR, see https://vike.dev/render-modes for how to modify onRenderClient()
16 | // to support SPA
17 | if (!Page)
18 | throw new Error(
19 | "My onRenderClient() hook expects pageContext.Page to be defined",
20 | );
21 |
22 | const container = document.getElementById("react-root");
23 | if (!container) throw new Error("DOM element #react-root not found");
24 |
25 | const page = (
26 | <Layout pageContext={pageContext}>
27 | <Page />
28 | </Layout>
29 | );
30 | if (pageContext.isHydration) {
31 | root = ReactDOM.hydrateRoot(container, page);
32 | } else {
33 | if (!root) {
34 | root = ReactDOM.createRoot(container);
35 | }
36 | root.render(page);
37 | }
38 | document.title = getPageTitle(pageContext);
39 | };
40 |
--------------------------------------------------------------------------------
/examples/fastify-vike/renderer/+onRenderHtml.tsx:
--------------------------------------------------------------------------------
1 | // https://vike.dev/onRenderHtml
2 | export { onRenderHtml };
3 |
4 | import ReactDOMServer from "react-dom/server";
5 | import { Layout } from "./Layout";
6 | import { escapeInject, dangerouslySkipEscape } from "vike/server";
7 | import logoUrl from "./logo.svg";
8 | import type { OnRenderHtmlAsync } from "vike/types";
9 | import { getPageTitle } from "./getPageTitle";
10 |
11 | const onRenderHtml: OnRenderHtmlAsync = async (
12 | pageContext,
13 | ): ReturnType<OnRenderHtmlAsync> => {
14 | const { Page } = pageContext;
15 |
16 | // This onRenderHtml() hook only supports SSR, see https://vike.dev/render-modes for how to modify
17 | // onRenderHtml() to support SPA
18 | if (!Page)
19 | throw new Error(
20 | "My onRenderHtml() hook expects pageContext.Page to be defined",
21 | );
22 |
23 | // Alternativly, we can use an HTML stream, see https://vike.dev/streaming
24 | const pageHtml = ReactDOMServer.renderToString(
25 | <Layout pageContext={pageContext}>
26 | <Page />
27 | </Layout>,
28 | );
29 |
30 | const title = getPageTitle(pageContext);
31 | const desc =
32 | pageContext.data?.description ||
33 | pageContext.config.description ||
34 | "Demo of using Vike";
35 |
36 | const documentHtml = escapeInject`<!DOCTYPE html>
37 | <html lang="en">
38 | <head>
39 | <meta charset="UTF-8" />
40 | <link rel="icon" href="${logoUrl}" />
41 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
42 | <meta name="description" content="${desc}" />
43 | <title>${title}
44 |
45 |
46 | ${dangerouslySkipEscape(pageHtml)}
47 |
48 |