### Install vike-photon with bun

Source: https://vike.dev/vike-photon

Install vike-photon using bun.

```bash
bun add vike-photon
```

--------------------------------

### React Markdown Installation Example

Source: https://vike.dev/markdown

Example file paths for integrating Markdown with React using Vite plugins.

```text
/examples/react-full/vite.config.ts
/examples/react-full/pages/markdown/+Page.mdx
```

--------------------------------

### Install vike-photon with yarn

Source: https://vike.dev/vike-photon

Install vike-photon using yarn.

```bash
yarn add vike-photon
```

--------------------------------

### Install vike-photon with npm

Source: https://vike.dev/vike-photon

Install vike-photon using npm.

```bash
npm install vike-photon
```

--------------------------------

### Vue Markdown Installation Example

Source: https://vike.dev/markdown

Example file paths for integrating Markdown with Vue using Vite plugins.

```text
/examples/vue-full/vite.config.ts
/examples/vue-full/pages/markdown/+Page.md
```

--------------------------------

### Install vike-photon with pnpm

Source: https://vike.dev/vike-photon

Install vike-photon using pnpm.

```bash
pnpm add vike-photon
```

--------------------------------

### Install Photon Hono adapter (bun)

Source: https://vike.dev/migration/vike-photon

Install the @photonjs/hono package using bun.

```bash
bun add @photonjs/hono
```

--------------------------------

### Grommet Integration Example

Source: https://vike.dev/grommet

This example demonstrates how to integrate Vike with Grommet, which relies on styled-components, by collecting page styles during SSR. It references the styled-components documentation and an example GitHub repository.

```markdown
When using Grommet, which is based on styled-components, you need to collect the page's styles upon SSR:
  * styled-components docs > Server Side Rendering
  * Integration > CSS-in-JS


See also: styled-components.
Example:
  * 2024.04 GitHub > `AurelienLourot/vike-react-styled-components-grommet`
```

--------------------------------

### Fastify Examples

Source: https://vike.dev/fastify

Examples of using Vike with Fastify.

```markdown
* 2025.01 GitHub > `whyte50/vike-example-fastify`
* 2024.01 GitHub > `royalswe/vike-fastify-boilerplate`
```

--------------------------------

### Install vike-react using `extends` in JavaScript

Source: https://vike.dev/extends

Example of installing the `vike-react` extension by extending its configuration in a JavaScript `+config.js` file.

```javascript
// /pages/+config.js

import vikeReact from 'vike-react/config'

export default {
  // Install `vike-react`. (Technically speaking: inherit the configuration `vikeReact`.)
  extends: vikeReact
}
```

--------------------------------

### Install Photon Hono adapter (npm)

Source: https://vike.dev/migration/vike-photon

Install the @photonjs/hono package using npm.

```bash
npm install @photonjs/hono
```

--------------------------------

### Global Config File Example (JavaScript)

Source: https://vike.dev/prerender

Example of configuring prerender settings in the global config file using JavaScript.

```javascript
// 👉 Global config file (i.e. applies to all pages)
// pages/+config.js

export default {
  // ✅ Global settings can be define here
  prerender: { parallel: false },
  // ✅ Can also be define here (toggle globally)
  prerender: false
}
```

--------------------------------

### Vike and AWS Lambda with SST and Hono Example

Source: https://vike.dev/aws

Real-world example of using Vike and AWS Lambda with SST and Hono.

```bash
2025.03 GitHub > `sbaidon/rent-vs-buy` - Real world example
```

--------------------------------

### Install Photon Hono adapter (yarn)

Source: https://vike.dev/migration/vike-photon

Install the @photonjs/hono package using yarn.

```bash
yarn add @photonjs/hono
```

--------------------------------

### Example of using Vike with Tauri

Source: https://vike.dev/tauri

Example of using Vike with Tauri.

```markdown
* 2023.04 GitHub > `brillout/lume`
```

--------------------------------

### Official React integration examples

Source: https://vike.dev/react

Examples of React integration with Vike.

```bash
/packages/create-vike-core/boilerplate-react-ts
```

```bash
/examples/react-minimal
```

```bash
vike-react source code
```

```bash
/examples/render-modes
```

--------------------------------

### JavaScript Example

Source: https://vike.dev/filesystemRoutingRoot

Example of setting `filesystemRoutingRoot` to '/' in a JavaScript config file.

```javascript
// /marketing/+config.js

export default {
  filesystemRoutingRoot: '/'
}
```

--------------------------------

### Install Photon Hono adapter (pnpm)

Source: https://vike.dev/migration/vike-photon

Install the @photonjs/hono package using pnpm.

```bash
pnpm add @photonjs/hono
```

--------------------------------

### Solid ClientOnly Example

Source: https://vike.dev/ClientOnly

Example of using the ClientOnly component in a Solid application.

```jsx
import { ClientOnly } from 'vike-solid/ClientOnly'
 
function Page() {
  return (
    <ClientOnly fallback={<p>Loading...</p>}>
      <SomeComponent />
    </ClientOnly>
  )
}
```

--------------------------------

### Global Config File Example (TypeScript)

Source: https://vike.dev/prerender

Example of configuring prerender settings in the global config file using TypeScript.

```typescript
// 👉 Global config file (i.e. applies to all pages)
// pages/+config.ts

import type { Config } from 'vike/types'

export default {
  // ✅ Global settings can be define here
  prerender: { parallel: false },
  // ✅ Can also be define here (toggle globally)
  prerender: false
} satisfies Config
```

--------------------------------

### TypeScript Example

Source: https://vike.dev/filesystemRoutingRoot

Example of setting `filesystemRoutingRoot` to '/' in a TypeScript config file.

```typescript
// /marketing/+config.ts

import type { Config } from 'vike/types'

export default {
  filesystemRoutingRoot: '/'
} satisfies Config
```

--------------------------------

### Install @universal-middleware/compress

Source: https://vike.dev/server

Install the compress middleware for response compression using npm, pnpm, bun, or yarn.

```bash
npm install @universal-middleware/compress
```

```bash
pnpm add @universal-middleware/compress
```

```bash
bun add @universal-middleware/compress
```

```bash
yarn add @universal-middleware/compress
```

--------------------------------

### Community React integration examples

Source: https://vike.dev/react

Community-contributed examples of React integration with Vike.

```bash
GitHub > luisfuturist/vike-island-example
```

--------------------------------

### Page Config File Example (JavaScript)

Source: https://vike.dev/prerender

Example of configuring prerender settings in a page's config file using JavaScript.

```javascript
// 👉 Page config file
// pages/movies/@id/+config.js

export default {
  // ❌ Global settings cannot be defined here
  prerender: { parallel: false },
  // ✅ Can be define here (toggle per page)
  prerender: false
}
```

--------------------------------

### Install standaloner

Source: https://vike.dev/server

Install the standaloner package using npm, pnpm, bun, or yarn.

```bash
npm install standaloner
```

```bash
pnpm add standaloner
```

```bash
bun add standaloner
```

```bash
yarn add standaloner
```

--------------------------------

### HTML Redirect Example

Source: https://vike.dev/prerender

Example of an HTML file generated for a redirect when `redirects` is enabled.

```html
<!-- HTML redirecting user to /some/path -->
<html>
<head>
  <!-- Tell browser to redirect user -->
  <meta http-equiv="refresh" content="0;url=/some/path">
</head>
<body></body>
</html>
```

--------------------------------

### Install Hono with Photon

Source: https://vike.dev/vike-photon

Commands to install the Hono framework and the Photon Hono integration package using different package managers.

```bash
npm install hono @photonjs/hono
```

```bash
pnpm add hono @photonjs/hono
```

```bash
bun add hono @photonjs/hono
```

```bash
yarn add hono @photonjs/hono
```

--------------------------------

### Page Config File Example (TypeScript)

Source: https://vike.dev/prerender

Example of configuring prerender settings in a page's config file using TypeScript.

```typescript
// 👉 Page config file
// pages/movies/@id/+config.ts

import type { Config } from 'vike/types'

export default {
  // ❌ Global settings cannot be defined here
  prerender: { parallel: false },
  // ✅ Can be define here (toggle per page)
  prerender: false
} satisfies Config
```

--------------------------------

### Page Component Example (JavaScript)

Source: https://vike.dev/route

Example of a page component that can handle dynamic routes like `/product/12345`.

```javascript
// /pages/product/+Page.jsx

export default Page

/* This page can have URLs such as:
   /product/12345
   /product/macbook-pro
   /product/iPhone42
   ...
*/
function Page() {
  return (
    <>
      <h1>Product Information</h1>
      {/* ... */}
    </>
  )
}
```

--------------------------------

### File Structure Examples (TypeScript)

Source: https://vike.dev/filesystem-routing

Examples of how different configuration and page files are mapped based on their location in the filesystem, using TypeScript.

```typescript
# This +config.ts file applies everywhere (i.e. /**/* — including the root directory)
pages/+config.ts
# This +onRenderClient.ts hook applies everywhere (i.e. /**/* — including the root directory)
renderer/+onRenderClient.ts
# This +onRenderHtml.ts hook applies only to admin-panel/**/*
admin-panel/renderer/+onRenderHtml.ts
# This +onRenderHtml.ts hook applies only to (marketing)/**/*
(marketing)/pages/+onRenderHtml.ts

###################
###### Pages ######
###################
# This page is configured by:
# - pages/+config.ts
# - renderer/+onRenderClient.ts
# - (marketing)/pages/+onRenderHtml.ts
(marketing)/pages/index/+Page.ts
# This page is configured by:
# - pages/+config.ts
# - renderer/+onRenderClient.ts
# - admin-panel/renderer/+onRenderHtml.ts
admin-panel/pages/index/+Page.ts
```

--------------------------------

### Start a server to preview the production build

Source: https://vike.dev/api

This snippet shows how to use the `preview()` function to start a development server for the production build.

```javascript
import { preview } from 'vike/api'

console.log('Starting preview server...')

const { viteConfig, viteServer } = await preview()
viteServer.printUrls()
viteServer.bindCLIShortcuts({ print: true })

const { port } = viteConfig.preview
console.log(`Preview server is ready at http://localhost:${port}`)
```

--------------------------------

### Install vike-react using `extends` in TypeScript

Source: https://vike.dev/extends

Example of installing the `vike-react` extension by extending its configuration in a TypeScript `+config.ts` file.

```typescript
// /pages/+config.ts

import type { Config } from 'vike/types'
import vikeReact from 'vike-react/config'

export default {
  // Install `vike-react`. (Technically speaking: inherit the configuration `vikeReact`.)
  extends: vikeReact
} satisfies Config
```

--------------------------------

### Preview command

Source: https://vike.dev/static-hosts

You can try out your production build locally using `$ vike preview`. (You can also use a local static host, for example `$ serve dist/client/`).

```bash
$ vike preview
```

```bash
$ serve dist/client/
```

--------------------------------

### Express.js Server Setup (TypeScript)

Source: https://vike.dev/renderPage

Example of setting up an Express.js server for Vike SSR in TypeScript.

```typescript
// server/index.ts

// In this example we use Express.js but we could use any other server framework
import express from 'express'
import { renderPage, createDevMiddleware } from 'vike/server'
import type { Request, Response } from 'express'

const isProduction = process.env.NODE_ENV === 'production'
const root = `${__dirname}/..`

startServer()

async function startServer() {
  // Create an Express.js server
  const app = express()

  // Dev/prod middleware
  if (!isProduction) {
    const { devMiddleware } = await createDevMiddleware({ root })
    app.use(devMiddleware)
  } else {
    // In production, we need to serve our static assets ourselves.
    // (In dev, Vite's middleware serves our static assets.)
    app.use(express.static(`${root}/${outDir}/client`))
  }

  // ...
  // Other middlewares (authentication, REST/GraphQL/RPC middleware, ...)
  // ...

  // SSR middleware.
  // Note: it should always be the last middleware, because it's a catch-all
  // middleware that supersedes any middleware placed after it.
  app.get('*', async (req: Request, res: Response) => {
    const pageContextInit = {
      // Required: the URL of the page
      urlOriginal: req.originalUrl,

      // Optional: the HTTP Headers
      headersOriginal: req.headers,

      // Optional: information about the logged-in user (when using an
      // Express.js authentication middleware that defines `req.user`).
      user: req.user

      // ... we can provide any additional information about the request here ...
    }

    const pageContext = await renderPage(pageContextInit)

    const { body, statusCode, headers } = pageContext.httpResponse
    headers.forEach(([name, value]) => res.setHeader(name, value))
    res.status(statusCode).send(body)
  })

  const port = 3000
  app.listen(port)
  console.log(`Server running at http://localhost:${port}`)
}

```

--------------------------------

### Serve Function Configuration

Source: https://vike.dev/vike-photon

Detailed example of configuring the `serve()` function with various options for different environments, including port, hostname, lifecycle hooks, and Node.js specific settings like `createServer` and `serverOptions`.

```javascript
serve(app, {
  // Server port, defaults to 3000. It's ignored in Cloudflare and Vercel Edge (there
  // isn't any server in serverless deployment).
  port: 3000,

  hostname: 'localhost', // default value

  // Called once the server is accepting connections
  onReady() {
    console.log('Server is ready.')
  },

  // Called once the server is created
  onCreate(server) {
    // `server` type depends on your runtime:
    //   Node.js:  Server ('node:http') by default. It's an HTTPS or HTTP2 server
    //             if the `createServer` option was provided (see below).
    //   Deno:     return of Deno.Serve (experimental support)
    //   Bun:      return of Bun.Serve  (experimental support)

    // `server` is `undefined` in Cloudflare and Vercel Edge (there
    // isn't any server in serverless deployment)
  },


  // ⚠️  The following two options are available only when running on Node.js

  // [Node.js] Can be one of:
  //     import { createServer } from 'node:http'
  //     import { createServer } from 'node:https'
  //     import { createSecureServer as createServer } from 'node:http2'
  createServer,

  // [Node.js] Options forwarded to `createServer()`
  serverOptions: {
    // For example SSL/TLS key and certificate for HTTPS
    key: fs.readFileSync('/etc/letsencrypt/live/example.com/privkey.pem'),
    cert: fs.readFileSync('/etc/letsencrypt/live/example.com/fullchain.pem'),
    // ... other createServer() options ...
  },


  // 👉 Other options are passed down as-is to the target environment

  // For example, you can define all @hono/node-serve options here, such as:
  fetch,
  overrideGlobalObjects: false,

  // ... any options of your target environment ...
})
```

--------------------------------

### Express.js Server Setup (JavaScript)

Source: https://vike.dev/renderPage

Example of setting up an Express.js server for Vike SSR in JavaScript.

```javascript
// server/index.js

// In this example we use Express.js but we could use any other server framework
import express from 'express'
import { renderPage, createDevMiddleware } from 'vike/server'

const isProduction = process.env.NODE_ENV === 'production'
const root = `${__dirname}/..`

startServer()

async function startServer() {
  // Create an Express.js server
  const app = express()

  // Dev/prod middleware
  if (!isProduction) {
    const { devMiddleware } = await createDevMiddleware({ root })
    app.use(devMiddleware)
  } else {
    // In production, we need to serve our static assets ourselves.
    // (In dev, Vite's middleware serves our static assets.)
    app.use(express.static(`${root}/${outDir}/client`))
  }

  // ...
  // Other middlewares (authentication, REST/GraphQL/RPC middleware, ...)
  // ...

  // SSR middleware.
  // Note: it should always be the last middleware, because it's a catch-all
  // middleware that supersedes any middleware placed after it.
  app.get('*', async (req, res) => {
    const pageContextInit = {
      // Required: the URL of the page
      urlOriginal: req.originalUrl,

      // Optional: the HTTP Headers
      headersOriginal: req.headers,

      // Optional: information about the logged-in user (when using an
      // Express.js authentication middleware that defines `req.user`).
      user: req.user

      // ... we can provide any additional information about the request here ...
    }

    const pageContext = await renderPage(pageContextInit)

    const { body, statusCode, headers } = pageContext.httpResponse
    headers.forEach(([name, value]) => res.setHeader(name, value))
    res.status(statusCode).send(body)
  })

  const port = 3000
  app.listen(port)
  console.log(`Server running at http://localhost:${port}`)
}

```

--------------------------------

### Start the development server

Source: https://vike.dev/api

Programmatically start the Vike development server and access its configuration and server instance.

```javascript
import { dev } from 'vike/api' 

console.log('Starting development server...')

const { viteServer, viteConfig } = await dev()
await viteServer.listen()
viteServer.printUrls()
viteServer.bindCLIShortcuts({ print: true })

const { port } = viteConfig.server
console.log(`Development server is ready at http://localhost:${port}`)
```

--------------------------------

### Config inheritance example

Source: https://vike.dev/config

Example demonstrating how to apply configurations to different levels of pages using file paths.

```plaintext
pages/(marketing)/index/+Page.jsx    # URL: /
pages/(marketing)/about/+Page.jsx    # URL: /about
```

--------------------------------

### Retrieve data fetched on the server-side

Source: https://vike.dev/pageContext.json

Example of an HTTP GET request to retrieve server-side fetched data.

```bash
# Retrieve data fetched on the server-side
HTTP GET /product/42/index.pageContext.json
```

--------------------------------

### Config Inheritance Example (JavaScript)

Source: https://vike.dev/filesystem-routing

Demonstrates config inheritance in JavaScript, showing how +config.js files apply to nested routes.

```javascript
pages/index/+config.js
# The +config.js above doesn't apply to pages/about/
pages/about/+Page.js
```

--------------------------------

### Providing parameterized route URLs (JavaScript)

Source: https://vike.dev/onBeforePrerenderStart

Example of how to define a parameterized route in JavaScript.

```javascript
// /pages/movie/+route.js

export default '/movie/@movieId'
```

--------------------------------

### HTTPS Configuration

Source: https://vike.dev/vike-photon

Example of how to configure HTTPS in development by passing `createServer` and HTTPS certificates to `serve()`.

```javascript
import { createServer } from 'node:https'
/* Or with HTTP2:
import { createSecureServer as createServer } from 'node:http2'
*/

serve(app, {
  createServer,

  // [Node.js] Options forwarded to `createServer()`
  serverOptions: {
    // For example SSL/TLS key and certificate for HTTPS
    key: fs.readFileSync('/etc/letsencrypt/live/example.com/privkey.pem'),
    cert: fs.readFileSync('/etc/letsencrypt/live/example.com/fullchain.pem')
    // ... other createServer() options ...
  }
})
```

```typescript
import { createServer } from 'node:https'
/* Or with HTTP2:
import { createSecureServer as createServer } from 'node:http2'
*/

serve(app, {
  createServer,

  // [Node.js] Options forwarded to `createServer()`
  serverOptions: {
    // For example SSL/TLS key and certificate for HTTPS
    key: fs.readFileSync('/etc/letsencrypt/live/example.com/privkey.pem'),
    cert: fs.readFileSync('/etc/letsencrypt/live/example.com/fullchain.pem')
    // ... other createServer() options ...
  },
})
```

--------------------------------

### +server.js with prod.static options

Source: https://vike.dev/migration/server

Example of configuring static file serving in +server.js.

```javascript
// +server.js
 
export default {
  // ...
  prod: {
    // Serve static files automatically
    static: true, // Default value
    // Can be disabled:
    static: false, 
    // Or serve from a custom folder:
    static: './public'
  }
}
```

--------------------------------

### Example configuration for hooksTimeout

Source: https://vike.dev/hooksTimeout

Example of how to configure `hooksTimeout` in `+config.js`.

```javascript
// +config.js

export default {
  hooksTimeout: {
    data: {
      // Increase warning timeout to 5 seconds
      warning: 5 * 1000,
      // Increase error timeout to one minute
      error: 60 * 1000
    }
  }
}
```

--------------------------------

### JavaScript

Source: https://vike.dev/onPageTransitionStart

Example of `onPageTransitionStart()` hook in JavaScript.

```javascript
// /pages/+onPageTransitionStart.js
// Environment: client
 
export async function onPageTransitionStart(pageContext) {
  console.log('Page transition start')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)
  document.body.classList.add('page-transition')
}
```

--------------------------------

### Internationalization example

Source: https://vike.dev/onBeforeRoute

Example of using `onBeforeRoute()` for internationalization in TypeScript.

```typescript
// Environment: server & client

export { onBeforeRoute }

import type { PageContext } from 'vike/types'

function onBeforeRoute(pageContext: PageContext) {
  const { urlWithoutLocale, locale } = extractLocale(pageContext.urlPathname)
  return {
    pageContext: {
      locale,
      urlLogical: urlWithoutLocale
    }
  }
}
```

--------------------------------

### server/index.js

Source: https://vike.dev/migration/server

Example of a server entry file using Hono and Vike.

```javascript
// server/index.js
// +server.js ////
import { Hono } from 'hono'
import { apply, serve } from '@photonjs/hono'
import vike from '@vikejs/hono' 
 
const app = new Hono()
apply(app) 
vike(app) 
 
export default serve(app) 
export default {
  fetch: app.fetch 
}
```

--------------------------------

### Internationalization example

Source: https://vike.dev/onBeforeRoute

Example of using `onBeforeRoute()` for internationalization in JavaScript.

```javascript
// Environment: server & client

export { onBeforeRoute }

function onBeforeRoute(pageContext) {
  const { urlWithoutLocale, locale } = extractLocale(pageContext.urlPathname)
  return {
    pageContext: {
      locale,
      urlLogical: urlWithoutLocale
    }
  }
}
```

--------------------------------

### TypeScript

Source: https://vike.dev/onPageTransitionStart

Example of `onPageTransitionStart()` hook in TypeScript.

```typescript
// /pages/+onPageTransitionStart.ts
// Environment: client
 
import type { PageContextClient } from 'vike/types' 

export async function onPageTransitionStart(pageContext: Partial<PageContextClient>) {
  console.log('Page transition start')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)
  document.body.classList.add('page-transition')
}
```

--------------------------------

### Example configuration for hooksTimeout (TypeScript)

Source: https://vike.dev/hooksTimeout

Example of how to configure `hooksTimeout` in `+config.ts`.

```typescript
// +config.ts

import type { Config } from 'vike/types'

export default {
  hooksTimeout: {
    data: {
      // Increase warning timeout to 5 seconds
      warning: 5 * 1000,
      // Increase error timeout to one minute
      error: 60 * 1000
    }
  }
} satisfies Config
```

--------------------------------

### Manual Integration Examples

Source: https://vike.dev/angular

Examples of manually integrating Angular with Vike.

```github
2023.12 GitHub > `nitedani/vite-plugin-angular` > `examples/`
```

--------------------------------

### Install styled-jsx

Source: https://vike.dev/styled-jsx

Install styled-jsx using npm, pnpm, bun, or yarn.

```bash
npm install styled-jsx
```

```bash
pnpm add styled-jsx
```

```bash
bun add styled-jsx
```

```bash
yarn add styled-jsx
```

--------------------------------

### File Structure Examples (JavaScript)

Source: https://vike.dev/filesystem-routing

Examples of how different configuration and page files are mapped based on their location in the filesystem, including root-level and specific directory configurations.

```javascript
# This +config.js file applies everywhere (i.e. /**/* — including the root directory)
pages/+config.js
# This +onRenderClient.js hook applies everywhere (i.e. /**/* — including the root directory)
renderer/+onRenderClient.js
# This +onRenderHtml.js hook applies only to admin-panel/**/*
admin-panel/renderer/+onRenderHtml.js
# This +onRenderHtml.js hook applies only to (marketing)/**/*
(marketing)/pages/+onRenderHtml.js

###################
###### Pages ######
###################
# This page is configured by:
# - pages/+config.js
# - renderer/+onRenderClient.js
# - (marketing)/pages/+onRenderHtml.js
(marketing)/pages/index/+Page.js
# This page is configured by:
# - pages/+config.js
# - renderer/+onRenderClient.js
# - admin-panel/renderer/+onRenderHtml.js
admin-panel/pages/index/+Page.js
```

--------------------------------

### Glob example in TypeScript

Source: https://vike.dev/route-string

Example of a glob route string in TypeScript.

```typescript
// /pages/product/+route.ts

export default '/product/*'

```

--------------------------------

### Manual integration

Source: https://vike.dev/naive-ui

Example of manually integrating Naive UI.

```markdown
## Manual integration
Example of manually integrating Naive UI:
  * 2024.08 GitHub > `Jearce/vike-vue-naive-ui` - Using `vike-vue`
```

--------------------------------

### Glob example in JavaScript

Source: https://vike.dev/route-string

Example of a glob route string in JavaScript.

```javascript
// /pages/product/+route.js

export default '/product/*'

```

--------------------------------

### TypeScript Implementation

Source: https://vike.dev/onPrerenderStart

Example of the `onPrerenderStart` hook in TypeScript, including type definitions.

```typescript
export { onPrerenderStart } 
 
import type { PrerenderContext, PageContextServer } from 'vike/types' 
 
async function onPrerenderStart(prerenderContext: PrerenderContext) {
  // new page contexts
  const pageContexts: PageContextServer[] = []
 
  // for each original page context:
  prerenderContext.pageContexts.forEach((pageContext) => {
    // for each locale, push a new page context to pageContexts
    // ...
  })
 
  return {
    prerenderContext: {
      pageContexts
    }
  }
}
```

--------------------------------

### someClientCode.client.js

Source: https://vike.dev/file-env

Example of a .client.js file to ensure code only runs on the client-side.

```javascript
// /utils/someClientCode.client.js
 
// This code only works in the browser; we use .client.js to assert that this file is
// never loaded on the server-side.
 
window.onclick = () => {
  // ...
}
```

--------------------------------

### Hono with Vike

Source: https://vike.dev/blog/universal-deploy

Example of using Hono with Vike for server-side logic.

```javascript
// +server.js

import { Hono } from 'hono'
import vike from '@vikejs/hono'

const app = new Hono()
vike(app) // Attaches Vike

export default {
  fetch: app.fetch
}
```

```typescript
// +server.ts

import { Hono } from 'hono'
import vike from '@vikejs/hono'
import type { Server } from 'vike/types'

const app = new Hono()
vike(app) // Attaches Vike

export default {
  fetch: app.fetch
} satisfies Server
```

--------------------------------

### React ClientOnly Example

Source: https://vike.dev/ClientOnly

Example of using the ClientOnly component in a React application.

```jsx
import { ClientOnly } from 'vike-react/ClientOnly'
 
function Page() {
  return (
    <ClientOnly fallback={<p>Loading...</p>}>
      <SomeComponent />
    </ClientOnly>
  )
}
```

--------------------------------

### JavaScript Implementation

Source: https://vike.dev/onPrerenderStart

Example of the `onPrerenderStart` hook in JavaScript, demonstrating how to modify `pageContexts`.

```javascript
export { onPrerenderStart } 
 
async function onPrerenderStart(prerenderContext) {
  // new page contexts
  const pageContexts = []
 
  // for each original page context:
  prerenderContext.pageContexts.forEach((pageContext) => {
    // for each locale, push a new page context to pageContexts
    // ...
  })
  return {
    prerenderContext: {
      pageContexts
    }
  }
}
```

--------------------------------

### Custom SQL setting - JavaScript

Source: https://vike.dev/onBeforeRender

Example of a custom SQL setting file in JavaScript.

```javascript
// /pages/user/+sql.js
export default { modelName: 'User', select: ['firstName', 'lastName'] }
```

```javascript
// /pages/product/+sql.js
export default { modelName: 'Product', select: ['name', 'price'] }
```

--------------------------------

### Catch-all route example in TypeScript

Source: https://vike.dev/route-string

Example of a catch-all route string in TypeScript.

```typescript
// /pages/catch-all/+route.ts

// Route all URLs to a single page
export default '*'

```

--------------------------------

### Providing parameterized route URLs (TypeScript)

Source: https://vike.dev/onBeforePrerenderStart

Example of how to define a parameterized route in TypeScript.

```typescript
// /pages/movie/+route.ts

export default '/movie/@movieId'
```

--------------------------------

### Catch-all route example in JavaScript

Source: https://vike.dev/route-string

Example of a catch-all route string in JavaScript.

```javascript
// /pages/catch-all/+route.js

// Route all URLs to a single page
export default '*'

```

--------------------------------

### Install vite-plugin-vercel

Source: https://vike.dev/vercel

Install the vite-plugin-vercel package using npm, pnpm, bun, or yarn.

```bash
npm install vite-plugin-vercel
```

```bash
pnpm add vite-plugin-vercel
```

```bash
bun add vite-plugin-vercel
```

```bash
yarn add vite-plugin-vercel
```

--------------------------------

### pages/+config.js with photon options

Source: https://vike.dev/migration/server

Example of replacing photon options with new configuration in pages/+config.js.

```javascript
// pages/+config.js
 
export default {
  photon: {
    // ...
  } 
}
```

--------------------------------

### Configure Custom Server in +config.js

Source: https://vike.dev/vike-photon

Example of how to configure Photon to use a custom server by specifying the server file path in `pages/+config.js`.

```javascript
// pages/+config.js

import vikePhoton from 'vike-photon/config'

export default {
  extends: [vikePhoton],
  photon: {
    server: 'server/index.js'
  } 
}
```

```typescript
// pages/+config.ts

import type { Config } from 'vike/types'
import vikePhoton from 'vike-photon/config'

export default {
  extends: [vikePhoton],
  photon: {
    server: 'server/index.ts'
  }
} satisfies Config
```

--------------------------------

### Internal warning example

Source: https://vike.dev/warning/internals

Example of the warning message indicating the use of a Vike internal.

```text
Using internal pageContext._someInternalProp — https://vike.dev/warning/internals
```

--------------------------------

### Catch-all Page component example in TypeScript

Source: https://vike.dev/route-string

Example of a catch-all Page component in TypeScript.

```typescript
// /pages/catch-all/+Page.ts

// The single page of our app.
export { Page }

// ...

```

--------------------------------

### Integrating deployment script into package.json

Source: https://vike.dev/build-your-own-framework

Example of adding a 'deploy' script to package.json for a custom framework.

```json
{
  "scripts": {
    "dev": "my-framework",
    "build": "my-framework build",
    "preview": "my-framework preview",
    "deploy": "my-framework deploy"
  }
}
```

--------------------------------

### Catch-all Page component example in JavaScript

Source: https://vike.dev/route-string

Example of a catch-all Page component in JavaScript.

```javascript
// /pages/catch-all/+Page.js

// The single page of our app.
export { Page }

// ...

```

--------------------------------

### Important note on `useConfig()` timing

Source: https://vike.dev/head-tags

This example highlights a crucial point: `useConfig()` must be called before any `await` operations, such as `await fetch()`, to ensure it functions correctly.

```javascript
async function data() {
  const response = await fetch('https://star-wars.brillout.com/api/films.json')
  // ❌ Doesn't work: useConfig() must be called before `await fetch()`
  const config = useConfig()
}
```

--------------------------------

### TypeScript Configuration Examples

Source: https://vike.dev/injectScriptsAt

Examples of how to use the `injectScriptsAt` setting in a TypeScript `+config.ts` file.

```typescript
// +config.ts

import type { Config } from 'vike/types'

export default {
  // Inject scripts at the beginning of the HTML
  injectScriptsAt: 'HTML_BEGIN',
  // Inject scripts at the end of the HTML
  injectScriptsAt: 'HTML_END',
  // Inject scripts at the beginning of the HTML stream
  injectScriptsAt: 'STREAM',
  // Let Vike decide
  injectScriptsAt: null
} satisfies Config
```

--------------------------------

### JavaScript Configuration Examples

Source: https://vike.dev/injectScriptsAt

Examples of how to use the `injectScriptsAt` setting in a JavaScript `+config.js` file.

```javascript
// +config.js

export default {
  // Inject scripts at the beginning of the HTML
  injectScriptsAt: 'HTML_BEGIN',
  // Inject scripts at the end of the HTML
  injectScriptsAt: 'HTML_END',
  // Inject scripts at the beginning of the HTML stream
  injectScriptsAt: 'STREAM',
  // Let Vike decide
  injectScriptsAt: null
}
```

--------------------------------

### Config Inheritance Example (TypeScript)

Source: https://vike.dev/filesystem-routing

Demonstrates config inheritance in TypeScript, showing how +config.ts files apply to nested routes.

```typescript
pages/index/+config.ts
# The +config.ts above doesn't apply to pages/about/
pages/about/+Page.ts
```

--------------------------------

### Vue ClientOnly Example (TypeScript)

Source: https://vike.dev/ClientOnly

Example of using the ClientOnly component in a Vue application with TypeScript.

```html
<template>
  <ClientOnly>
    <SomeComponent />
    <template #fallback>
      <p>Loading...</p>
    </template>
  </ClientOnly>
</template>
 
<script setup lang="ts">
import { ClientOnly } from 'vike-vue/ClientOnly'
</script>
```

--------------------------------

### Custom SQL setting - TypeScript

Source: https://vike.dev/onBeforeRender

Example of a custom SQL setting file in TypeScript.

```typescript
// /pages/user/+sql.ts
export default { modelName: 'User', select: ['firstName', 'lastName'] }
```

```typescript
// /pages/product/+sql.ts
export default { modelName: 'Product', select: ['name', 'price'] }
```

--------------------------------

### Vue ClientOnly Example (JavaScript)

Source: https://vike.dev/ClientOnly

Example of using the ClientOnly component in a Vue application with JavaScript.

```html
<template>
  <ClientOnly>
    <SomeComponent />
    <template #fallback>
      <p>Loading...</p>
    </template>
  </ClientOnly>
</template>
 
<script setup>
import { ClientOnly } from 'vike-vue/ClientOnly'
</script>
```

--------------------------------

### Client-side Loading Example

Source: https://vike.dev/MDXEditor

Demonstrates how to ensure MDXEditor is loaded only on the client-side.

```javascript
import React from 'react';
import { useClientEffect } from 'vike-react';

function MDXEditorComponent() {
  useClientEffect(() => {
    // Load MDXEditor here, ensuring it only runs on the client
    import('mdx-editor-react').then(({ MDXEditor }) => {
      // Initialize or use MDXEditor component
      console.log('MDXEditor loaded on client');
    });
  });

  return <div>MDX Editor Placeholder</div>;
}

export default MDXEditorComponent;
```

--------------------------------

### Install Storybook

Source: https://vike.dev/storybook

Install Storybook in an existing Vike app using npm, pnpm, Bun, or Yarn.

```bash
npx storybook@latest init
```

```bash
pnpm dlx storybook@latest init
```

```bash
bun x storybook@latest init
```

```bash
yarn dlx storybook@latest init
```

--------------------------------

### Install Wrangler and Cloudflare Vite Plugin

Source: https://vike.dev/cloudflare

Commands to install the necessary packages for Cloudflare integration with Vike.

```bash
npm install wrangler @cloudflare/vite-plugin
```

```bash
pnpm add wrangler @cloudflare/vite-plugin
```

```bash
bun add wrangler @cloudflare/vite-plugin
```

```bash
yarn add wrangler @cloudflare/vite-plugin
```

--------------------------------

### credentials.server.js

Source: https://vike.dev/file-env

Example of a .server.js file to prevent secret information from being leaked to the client-side.

```javascript
// /server/database/credentials.server.js
 
// This file should *never* be imported by client-side code.
// We use .server.js to guarantee that.
export default {
  password: 'WLa!9HW?E10a'
}
```