### Install and Run Example

Source: https://github.com/vikejs/vike/blob/main/examples/path-aliases/README.md

Commands to clone the Vike path aliases example repository, install dependencies, and start the development server.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/path-aliases/
npm install
npm run dev
```

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

### Install and Run Vike React Full Example

Source: https://github.com/vikejs/vike/blob/main/examples/react-full/README.md

Clone the Vike repository, navigate to the react-full example directory, install dependencies, and start the development server.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/react-full/
npm install
npm run dev
```

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

### Install and Run Vike Telefunc Example

Source: https://github.com/vikejs/vike/blob/main/examples/telefunc/README.md

Clone the Vike repository, navigate to the Telefunc example directory, install dependencies, and start the development server.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/telefunc/
npm install
npm run dev
```

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

### Install and Run Vike Render Modes Example

Source: https://github.com/vikejs/vike/blob/main/examples/render-modes/README.md

Clone the Vike repository, navigate to the render-modes example directory, install dependencies, and start the development server.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/render-modes/
npm install
npm run dev
```

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

### Install and Run Vike Base URL Example

Source: https://github.com/vikejs/vike/blob/main/examples/base-url-server/README.md

Clone the Vike repository, navigate to the base-url-server example directory, install dependencies, and start the development server.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/base-url-server/
npm install
npm run start
```

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

### Install and Run Vike HTML Fragments Example

Source: https://github.com/vikejs/vike/blob/main/examples/html-fragments/README.md

Clone the Vike repository, navigate to the HTML fragments example directory, install dependencies, and start the development server.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/html-fragments/
npm install
npm run dev
```

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

### Install and Run Vike i18n Example

Source: https://github.com/vikejs/vike/blob/main/examples/i18n/README.md

Clone the Vike repository, navigate to the i18n example directory, install dependencies, and start the development server.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/i18n/
npm install
npm run dev
```

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

### Run the custom preloading example

Source: https://github.com/vikejs/vike/blob/main/examples/custom-preload/README.md

Commands to clone the Vike repository, navigate to the custom preload example directory, install dependencies, and start the development server.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/custom-preload/
npm install
npm run dev
```

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

### Clone and run the Vike React minimal example

Source: https://github.com/vikejs/vike/blob/main/examples/react-minimal/README.md

Use these commands to download the repository, install dependencies, and start the development server.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/react-minimal/
npm install
npm run dev
```

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

### Run minimal Vue example

Source: https://github.com/vikejs/vike/blob/main/examples/vue-minimal/README.md

Commands to clone the repository, navigate to the Vue minimal example directory, install dependencies, and start the development server.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/vue-minimal/
npm install
npm run dev
```

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

### Clone and run the Vike domain-driven example

Source: https://github.com/vikejs/vike/blob/main/examples/file-structure-domain-driven/README.md

Commands to initialize the example project locally. Ensure Node.js is installed before running these commands.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/file-structure-domain-driven/
npm install
npm run dev
```

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

### Run the Vue Full Example

Source: https://github.com/vikejs/vike/blob/main/examples/vue-full/README.md

Commands to clone the repository and start the development server for the full Vue integration example.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/vue-full/
npm install
npm run dev
```

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

### Run the Vike authentication example

Source: https://github.com/vikejs/vike/blob/main/examples/auth/README.md

Commands to clone the repository and start the development server for the authentication example.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/auth/
npm install
npm run dev
```

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

### Hono Server Setup

Source: https://github.com/vikejs/vike/blob/main/docs/pages/vike-photon/+Page.mdx

Install Hono and the Photon Hono adapter. Then, create a `server/index.ts` file to apply Vike middleware and start the server.

```shell
npm i hono @photonjs/hono
```

```typescript
// server/index.ts

import { Hono } from 'hono'
import { apply, serve } from '@photonjs/hono'

function startServer() {
  const app = new Hono()
  apply(app)
  return serve(app)
}

export default startServer()
```

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

### Clone and Install Vike Cloudflare Example

Source: https://github.com/vikejs/vike/blob/main/examples/cloudflare-workers-vue/README.md

Initializes the project environment by cloning the repository and installing dependencies.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/cloudflare-workers-vue/
npm install
```

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

### Clone and Run Vike React Streaming Example

Source: https://github.com/vikejs/vike/blob/main/examples/react-streaming/README.md

Clone the Vike repository, navigate to the react-streaming example directory, install dependencies, and start the development server.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/react-streaming/
npm install
npm run dev
```

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

### Elysia Server Setup

Source: https://github.com/vikejs/vike/blob/main/docs/pages/vike-photon/+Page.mdx

Install Elysia and the Photon Elysia adapter. Set up `server/index.ts` to apply Vike middleware and start the server.

```shell
npm i elysia @photonjs/elysia
```

```typescript
// server/index.ts

import { Elysia } from 'elysia'
import { apply, photon } from '@photonjs/elysia'

function startServer() {
  const app = new Elysia()
  apply(app)
  return serve(app)
}

export default startServer()
```

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

### H3 Server Setup

Source: https://github.com/vikejs/vike/blob/main/docs/pages/vike-photon/+Page.mdx

Install H3 and the Photon H3 adapter. Create `server/index.ts` to apply Vike middleware and start the server.

```shell
npm i h3 @photonjs/h3
```

```typescript
// server/index.ts

import { createApp } from 'h3'
import { apply, serve } from '@photonjs/h3'

function startServer() {
  const app = createApp()
  apply(app)
  return serve(app)
}

export default startServer()
```

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

### Run Vike Example Development Server

Source: https://github.com/vikejs/vike/blob/main/CONTRIBUTING.md

Navigate to an example directory and start its development server to test modifications. Remember to clear Vite's client cache after changing Vike's source code.

```shell
cd examples/react-full/ # or another example
pnpm run dev
```

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

### Clone and Run the Base URL CDN Example

Source: https://github.com/vikejs/vike/blob/main/examples/base-url-cdn/README.md

Commands to clone the Vike repository and start the base-url-cdn example project.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/base-url-cdn/
npm install
npm run start
```

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

### Express.js Server Setup

Source: https://github.com/vikejs/vike/blob/main/docs/pages/vike-photon/+Page.mdx

Install Express.js and the Photon Express adapter. Create a `server/index.ts` file to integrate Vike.

```shell
npm i express @photonjs/express
```

```typescript
// server/index.ts

import express from 'express'
import { apply, serve } from '@photonjs/express'

function startServer() {
  const app = express()
  apply(app)
  return serve(app)
}

export default startServer()
```

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

### Fastify Server Setup

Source: https://github.com/vikejs/vike/blob/main/docs/pages/vike-photon/+Page.mdx

Install Fastify, `fastify-raw-body`, and the Photon Fastify adapter. Configure `server/index.ts` with necessary plugins and Vike integration.

```shell
npm i fastify fastify-raw-body @photonjs/fastify
```

```typescript
// server/index.ts

import fastify from 'fastify'
import rawBody from 'fastify-raw-body'
import { apply, serve } from '@photonjs/fastify'

async function startServer() {
  const app = fastify({
    // ⚠️ Mandatory for HMR support
    forceCloseConnections: true
  })
  // ⚠️ Mandatory for Vike's SSR middleware
  await app.register(rawBody)
  await apply(app)
  return serve(app)
}

export default startServer()
```

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

### Install and run the application

Source: https://github.com/vikejs/vike/blob/main/docs/pages/start/+Page.mdx

Commands to install project dependencies and launch the development server.

```shell
# Install dependencies:
npm install
# Start your app:
npm run dev
```

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

### Hattip Server Setup

Source: https://github.com/vikejs/vike/blob/main/docs/pages/vike-photon/+Page.mdx

Install `@hattip/router` and the Photon Hattip adapter. Configure `server/index.ts` to apply Vike middleware and serve the router.

```shell
npm i @hattip/router @photonjs/hattip
```

```typescript
// server/index.ts

import { createRouter } from '@hattip/router'
import { apply, serve } from '@photonjs/hattip' // [!code ++]

function startServer() {
  const router = createRouter()
  apply(router) // [!code ++]
  return serve(router) // [!code ++]
}

export default startServer() // [!code ++]
```

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

### Clone and Run Base URL Example

Source: https://github.com/vikejs/vike/blob/main/examples/base-url/README.md

Commands to initialize the base URL example project locally.

```bash
git clone git@github.com:vikejs/vike
cd vike/examples/base-url/
npm install
npm run dev
# Or
# npm run preview
```

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

### Client-Side Authentication Setup

Source: https://github.com/vikejs/vike/blob/main/docs/pages/onCreateGlobalContext/+Page.mdx

Example of retrieving user authentication status from cookies and storing it in the global context on the client.

```typescript
// pages/+onCreateGlobalContext.client.ts
// Environment: client

import type { GlobalContextClient } from 'vike/types'

export async function onCreateGlobalContext(globalContext: GlobalContextClient) {
  globalContext.loggedInUser = retrieveUserFromCookie()
}

declare global {
  namespace Vike {
    interface GlobalContextClient {
      loggedInUser: ReturnType<typeof retrieveUserFromCookie>
    }
  }
}
```

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

### Install Fastify Adapter

Source: https://github.com/vikejs/vike/blob/main/docs/pages/server/+Page.mdx

Install the Fastify server adapter for Vike.

```shell
npm i fastify @vikejs/fastify
```

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

### Install standaloner

Source: https://github.com/vikejs/vike/blob/main/docs/pages/migration/server/+Page.mdx

Install the standaloner package to replace photon.standalone.

```shell
npm i standaloner
```

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

### Start Preview Server with preview()

Source: https://github.com/vikejs/vike/blob/main/docs/pages/api/+Page.mdx

Starts a server to preview the production build, useful for verifying the build output.

```ts
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}`)
```

```ts
const {
  viteConfig, // Resolved Vite configuration
  viteServer // Vite's development server
} = await preview({
  vikeConfig, // Vike configuration (optional)
  viteConfig // Vite configuration (optional)
})

// You can access the globalContext object:
import { getGlobalContext } from 'vike'
const globalContext = await getGlobalContext()
```

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

### Install compression middleware

Source: https://github.com/vikejs/vike/blob/main/docs/pages/migration/server/+Page.mdx

Install the universal compression middleware to replace photon.compress.

```shell
npm i @universal-middleware/compress
```

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

### Install vike-photon package

Source: https://github.com/vikejs/vike/blob/main/docs/pages/vike-photon/+Page.mdx

Install the vike-photon package using npm.

```shell
npm i vike-photon
```

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

### Install Netlify CLI

Source: https://github.com/vikejs/vike/blob/main/docs/pages/netlify/+Page.mdx

Install the Netlify CLI globally to manage deployments.

```shell
npm install -g netlify-cli
```

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

### Install Express Adapter

Source: https://github.com/vikejs/vike/blob/main/docs/pages/server/+Page.mdx

Install the Express server adapter for Vike.

```shell
npm i express @vikejs/express
```

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

### Install Dependencies

Source: https://github.com/vikejs/vike/blob/main/examples/cloudflare-workers-react/README.md

Install project dependencies using npm.

```bash
npm install
```

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

### Install Elysia Adapter

Source: https://github.com/vikejs/vike/blob/main/docs/pages/server/+Page.mdx

Install the Elysia server adapter for Vike.

```shell
npm i elysia @vikejs/elysia
```

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

### Start Vike App Server

Source: https://github.com/vikejs/vike/blob/main/docs/pages/self-host/+Page.mdx

Execute this command to start your Vike application on a production server after building. This command can be used with Node.js, Bun, or Deno.

```shell
$ node ./dist/server/index.mjs # or Bun/Deno
```

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

### Install Netlify Vite Adapter

Source: https://github.com/vikejs/vike/blob/main/docs/pages/netlify/+Page.mdx

Install the Netlify Vite adapter using npm.

```shell
npm install @netlify/vite-plugin
```

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

### Install styled-jsx

Source: https://github.com/vikejs/vike/blob/main/docs/pages/styled-jsx/+Page.mdx

Install the styled-jsx package using npm.

```shell
npm install styled-jsx
```

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

### Install Hono Adapter

Source: https://github.com/vikejs/vike/blob/main/docs/pages/server/+Page.mdx

Install the Hono server adapter for Vike.

```shell
npm i hono @vikejs/hono
```

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

### Install H3 Adapter

Source: https://github.com/vikejs/vike/blob/main/docs/pages/server/+Page.mdx

Install the H3 server adapter for Vike.

```shell
npm i h3 @vikejs/h3
```

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

### Page Configuration Example

Source: https://github.com/vikejs/vike/blob/main/docs/pages/prerender/+Page.mdx

Example of configuring pre-rendering settings within a page's config file. Demonstrates that global settings like 'parallel' cannot be defined here, while page-specific settings like 'prerender: false' are allowed.

```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
```

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

### Use Case: Store Initialization (SSR)

Source: https://github.com/vikejs/vike/blob/main/docs/pages/onCreatePageContext/+Page.mdx

Example of initializing a store on the server-side during SSR.

```APIDOC
## Use case: store

### Description
Initializing a store on the server-side during Server-Side Rendering (SSR).

### Method
`onCreatePageContext(pageContext: PageContextServer)`

### Endpoint
`pages/+onCreatePageContext.ssr.ts`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```ts
// pages/+onCreatePageContext.ssr.ts
// Environment: server

import { Store } from 'awesome-store'
import type { PageContextServer } from 'vike/types'

// Note how we use `.ssr.js` instead of `.server.js` — this hook only runs during SSR,
// not during client-side navigation (`pageContext.json` requests).

export async function onCreatePageContext(pageContext: PageContextServer) {
  pageContext.store = new Store()
}

declare global {
  namespace Vike {
    interface PageContextServer {
      store: Store
    }
  }
}
```

### Response
#### Success Response (200)
`pageContext` with the `store` property initialized.

#### Response Example
```json
{
  "store": "Store Instance"
}
```
```

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

### Global Configuration Example

Source: https://github.com/vikejs/vike/blob/main/docs/pages/prerender/+Page.mdx

Example of configuring pre-rendering settings within the global config file. Shows how both global settings like 'parallel' and page-specific toggles like 'prerender: false' can be defined here.

```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
```

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

### URL Parsing Example

Source: https://github.com/vikejs/vike/blob/main/docs/pages/pageContext/+Page.mdx

An example demonstrating how a URL is parsed into the urlParsed object structure.

```javascript
https://example.com/some-base-url/hello/s%C3%A9bastien?fruit=%C3%A2pple&fruit=orânge#%C3%A2ge
```

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

### Install Vike Monorepo

Source: https://github.com/vikejs/vike/blob/main/CONTRIBUTING.md

Clone the Vike repository and install dependencies at the monorepo root. This is the first step for both developing source code and documentation.

```shell
git clone git@github.com:vikejs/vike
cd vike/ # Go to the monorepo root
pnpm install
```

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

### dev() - Start Development Server

Source: https://github.com/vikejs/vike/blob/main/docs/pages/api/+Page.mdx

Starts the Vike development server. It returns the Vite development server instance and the resolved Vite configuration. You can optionally provide Vike and Vite configurations.

```APIDOC
## `dev()`

Start the development server:

```ts
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}`)
```

Return & options:

```ts
const { 
  viteConfig, // Resolved Vite configuration
  viteServer // Vite's development server
} = await dev({
  vikeConfig, // Vike configuration (optional)
  viteConfig // Vite configuration (optional)
})

// You can access the globalContext object:
import { getGlobalContext } from 'vike'
const globalContext = await getGlobalContext()
```

See:
- #option-vikeconfig
- #option-viteconfig
- #access-globalcontext

Vite types:
- The type of `viteConfig` is [`ResolvedConfig`](https://vite.dev/guide/api-javascript.html#resolvedconfig)
- Vite's development server: [`const viteServer = createServer()`](https://vite.dev/guide/api-javascript.html#createserver)
```

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

### Vue Component Setup in Vike

Source: https://github.com/vikejs/vike/blob/main/test/vike-vue/pages/markdown/+Page.md

Demonstrates how to import and use Vue components within a Vike.js project's script setup.

```vue
<script setup>
import Counter from '../../components/Counter.vue'
</script>
```

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

### Update Vike Vue Pinia Example

Source: https://github.com/vikejs/vike/blob/main/test/vike-vue-pinia/README.md

Follow these steps to update the Vike Vue Pinia example. Ensure the 'vike' dependency is pinned and add a specific test configuration for CI jobs.

```bash
Copy directory
Pin "vike" dependency in package.json
Update README.md
Add .test-e2e.json with { "ci": { "job": "Extensions" } }
```

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

### Global Config File Example

Source: https://github.com/vikejs/vike/blob/main/docs/pages/warning/global-config/+Page.mdx

This global config file applies to all pages. Global settings can be defined here.

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

// This is a global config file: it applies to all pages.

import type { Config } from 'vike/types'

export default {
  // ✅ Defining a global setting in a global +config.ts
  baseServer: '/blog/'
} satisfies Config

```

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

### React Active Link Component Example

Source: https://github.com/vikejs/vike/blob/main/docs/pages/active-links/+Page.mdx

This is a React component example for creating active links. It uses `usePageContext` to get the current URL and applies a CSS class for active states. Refer to the linked repository for the full implementation.

```jsx
import { usePageContext } from 'vike-react/usePageContext'
import { Link } from './Link'

export { ActiveLink }

function ActiveLink(props: {
  href: string,
  children: React.ReactNode
}) {
  const pageContext = usePageContext()
  const isActive = pageContext.urlPathname === props.href
  return (
    <Link className={isActive ? 'is-active' : ''} {...props} />
  )
}
```

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

### Retrieve Server-Side Data via HTTP GET

Source: https://github.com/vikejs/vike/blob/main/docs/pages/pageContext-json/+Page.mdx

This is an example of an HTTP request made by Vike to retrieve server-side fetched `pageContext` properties during client-side navigation.

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

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

### Express.js Server Integration with Vike

Source: https://github.com/vikejs/vike/blob/main/docs/pages/blog/vike-server/+Page.mdx

Integrates Vike with an Express.js application. Use `apply` to install Vike middleware and `serve` to attach the server to Node.js. This setup enables HMR and Vite's build utilities for server code.

```typescript
import express from 'express'
import { apply } from 'vike-server/express'
import { serve } from 'vike-server/express/serve'

function startServer() {
  const app = express()
  apply(app)
  return serve(app, { port: 3000 })
}

export default startServer()
```

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

### H3 Server Integration with Vike

Source: https://github.com/vikejs/vike/blob/main/docs/pages/blog/vike-server/+Page.mdx

Integrates Vike with an H3 application. Use `apply` to install Vike middleware and `serve` to attach the server to various environments. This setup benefits from Vite's server code transpilation and HMR capabilities.

```typescript
import { createApp } from 'h3'
import { apply } from 'vike-server/h3'
import { serve } from 'vike-server/h3/serve'

function startServer() {
  const app = createApp()
  apply(app)
  return serve(app, { port: 3000 })
}

export default startServer()
```

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

### Filesystem Routing Example

Source: https://github.com/vikejs/vike/blob/main/docs/pages/filesystem-routing/+Page.mdx

Illustrates how Vike maps filesystem paths to URLs. Directories like `pages/` and `src/` are ignored by default.

```yaml
FILESYSTEM                                                    URL
========================================================      ========
pages/index/+Page.ts                                          /
src/(marketing)/pages/jobs/+Page.ts                           /jobs
pages/pages/src/(some-dir)/about/renderer/index/+Page.ts      /about
```

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

### Start Development Server with dev()

Source: https://github.com/vikejs/vike/blob/main/docs/pages/api/+Page.mdx

Initializes the Vike development server and provides access to the Vite server instance and configuration.

```ts
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}`)
```

```ts
const {
  viteConfig, // Resolved Vite configuration
  viteServer // Vite's development server
} = await dev({
  vikeConfig, // Vike configuration (optional)
  viteConfig // Vite configuration (optional)
})

// You can access the globalContext object:
import { getGlobalContext } from 'vike'
const globalContext = await getGlobalContext()
```

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

### Configure Vike Server with serve()

Source: https://github.com/vikejs/vike/blob/main/docs/pages/vike-photon/+Page.mdx

Use `serve()` to define a single server entry point that targets multiple environments like Node.js and Cloudflare. Configure options like port, hostname, and lifecycle callbacks. Node.js specific options like `createServer` and `serverOptions` are also available.

```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 ...
})
```

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

### Install Compression Middleware

Source: https://github.com/vikejs/vike/blob/main/docs/pages/server/+Page.mdx

Install the compress middleware package using npm.

```shell
npm i @universal-middleware/compress
```

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

### preview() - Preview Production Build

Source: https://github.com/vikejs/vike/blob/main/docs/pages/api/+Page.mdx

Starts a server to preview the production build. It returns the Vite development server instance and the resolved Vite configuration. You can optionally provide Vike and Vite configurations.

```APIDOC
## `preview()`

Start a server to preview the production build:

```ts
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}`)
```

Return & options:

```ts
const { 
  viteConfig, // Resolved Vite configuration
  viteServer // Vite's development server
} = await preview({
  vikeConfig, // Vike configuration (optional)
  viteConfig // Vite configuration (optional)
})

// You can access the globalContext object:
import { getGlobalContext } from 'vike'
const globalContext = await getGlobalContext()
```

See:
- #option-vikeconfig
- #option-viteconfig
- #access-globalcontext

Vite types:
- The type of `viteConfig` is [`ResolvedConfig`](https://vite.dev/guide/api-javascript.html#resolvedconfig)
- Vite's preview server: [`const viteServer = preview()`](https://vite.dev/guide/api-javascript.html#preview)
```

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

### Filesystem Routing Examples

Source: https://github.com/vikejs/vike/blob/main/docs/pages/routing/+Page.mdx

Illustrates how Vike maps file paths to URLs using Filesystem Routing. Directories like `pages/` and `index/` are skipped. Parameterized routes use `@` notation.

```yaml
FILESYSTEM                     URL
====================           ======
pages/index/+Page.js           /
pages/about/+Page.js           /about
pages/jobs/+Page.js            /jobs
```

```yaml
FILESYSTEM                     URL
========================       =======================
pages/movie/@id/+Page.js       /movie/1, /movie/2, ...
```

```yaml
FILESYSTEM                             URL
================================       ==================
pages/(marketing)/index/+Page.js       /
pages/(marketing)/about/+Page.js       /about
pages/admin-panel/index/+Page.js       /admin-panel
pages/admin-panel/users/+Page.js       /admin-panel/users
```

```yaml
pages/(marketing)/+Layout.js # The layout for all marketing pages
pages/(marketing)/index/+Page.js
pages/(marketing)/about/+Page.js

pages/admin-panel/+Layout.js # The layout for all admin pages
pages/admin-panel/index/+Page.js
pages/admin-panel/users/+Page.js
```

```yaml
# Domain: marketing
(marketing)/pages/+Layout.js
(marketing)/pages/index/+Page.js
(marketing)/pages/about/+Page.js
(marketing)/components/ContactUs.js

# Domain: admin panel
admin-panel/pages/+Layout.js
admin-panel/pages/index/+Page.js
admin-panel/pages/users/+Page.js
admin-panel/components/Charts.js
admin-panel/database/fetchUsers.js
```

```yaml
FILESYSTEM                     URL
========================       ======
src/pages/index/+Page.js       /
src/pages/about/+Page.js       /about
```

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

### Install Cloudflare Vite Plugin

Source: https://github.com/vikejs/vike/blob/main/docs/pages/cloudflare/+Page.mdx

Install the necessary packages for Cloudflare integration with Vite.

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

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

### Register Server Entry with Universal Deploy Store

Source: https://github.com/vikejs/vike/blob/main/docs/pages/blog/universal-deploy/+Page.mdx

Demonstrates how framework authors use `@universal-deploy/store` to register server entries, including their ID, route, and HTTP method.

```javascript
import { addEntry } from '@universal-deploy/store'

addEntry({
  id: './src/server/api.ts',
  route: '/api/*',
  method: 'GET',
})

```

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

### Initialize Vike project with Bati

Source: https://github.com/vikejs/vike/blob/main/test/universal-deploy/README.md

Command to scaffold a new Vike project with React, Express, and Telefunc support.

```sh
pnpm create bati --react --express --telefunc
```

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

### Install vite-plugin-vercel

Source: https://github.com/vikejs/vike/blob/main/docs/pages/vercel/+Page.mdx

Install the Vercel plugin for Vite. This is the first step to integrate Vike with Vercel.

```shell
npm install vite-plugin-vercel
```

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

### Start Development Server

Source: https://github.com/vikejs/vike/blob/main/examples/cloudflare-workers-react/README.md

Run Vite's development server for faster development cycles. This bypasses the worker for local development.

```bash
npm run dev
```

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

### Install pnpm

Source: https://github.com/vikejs/vike/blob/main/CONTRIBUTING.md

Install pnpm globally using npm. This is a system requirement for developing Vike.

```shell
npm install -g pnpm
```

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

### Initialize Client-Side Store

Source: https://github.com/vikejs/vike/blob/main/docs/pages/onCreateGlobalContext/+Page.mdx

Demonstrates initializing a state management store on the client-side and attaching it to the global context.

```typescript
// pages/+onCreateGlobalContext.client.ts
// Environment: client

import { Store } from 'some-state-management-library'
import type { GlobalContextClient } from 'vike/types'

export async function onCreateGlobalContext(globalContext: GlobalContextClient) {
  globalContext.store = new Store()
}

declare global {
  namespace Vike {
    interface GlobalContextClient {
      store: Store
    }
  }
}
```

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

### Parsed URL Object Example

Source: https://github.com/vikejs/vike/blob/main/docs/pages/pageContext/+Page.mdx

Illustrates the structure of the parsed URL object with example values.

```javascript
{
  // Without Base URL, decodes escaped characters
  pathname: '/hello/sébastien',
  // With Base URL, doesn't decode escaped characters
  pathnameOriginal: '/some-base-url/hello/s%C3%A9bastien',
  search: { fruit: 'orânge' },
  searchAll: { fruit: ['âpple', 'orânge'] },
  searchOriginal: '?fruit=%C3%A2pple&fruit=orânge',
  hash: 'âge',
  hashOriginal: '#%C3%A2ge'
  // Without Base URL, doesn't decode escaped characters
  href: 'https://example.com/hello/s%C3%A9bastien?fruit=%C3%A2pple&fruit=orânge#%C3%A2ge',
  origin: 'https://example.com',
  protocol: 'https://',
  hostname: 'example.com', // 'localhost' if http://localhost:3000
  port: null // 3000 if http://localhost:3000
}
```

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

### Global Configuration Example (Base URL)

Source: https://github.com/vikejs/vike/blob/main/docs/pages/config/+Page.mdx

Global configurations, like the Base URL setting, apply to the entire application and cannot be scoped to a subset of pages. Defining them for a single page results in a warning.

```yaml
# Defining +baseAssets for a single page doesn't make sense — Vike logs a warning
# since this +baseAssets.js file applies to all pages, not just this one.
/pages/about/+baseAssets.js
/pages/about/+Page.js
# No config inheritance — the +baseAssets.js file above also applies to this page.
/pages/index/+Page.js
```

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

### Uninstall vike-photon and install latest vike

Source: https://github.com/vikejs/vike/blob/main/docs/pages/migration/server/+Page.mdx

Remove the deprecated package and ensure the latest version of vike is installed.

```shell
npm uninstall vike-photon
npm install vike@latest
```

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

### serve() Function Configuration

Source: https://github.com/vikejs/vike/blob/main/docs/pages/vike-photon/+Page.mdx

The `serve()` function allows defining a single server entry point that can target multiple environments like Node.js and Cloudflare. It accepts configuration options for port, hostname, and lifecycle callbacks.

```APIDOC
## `serve()`

The `serve()` function enables you to define a single server entry while being able to target multiple environments (e.g. Node.js and Cloudflare have different server attachment styles).

### Parameters

#### Request Body

- **app** (any) - Required - The server application instance.
- **options** (object) - Optional - Configuration options for the server.
  - **port** (number) - Optional - Server port, defaults to 3000. Ignored in serverless environments.
  - **hostname** (string) - Optional - Server hostname, defaults to 'localhost'.
  - **onReady** (function) - Optional - Callback function called once the server is accepting connections.
  - **onCreate** (function) - Optional - Callback function called once the server is created. Receives the server instance.
  - **createServer** (function) - Optional - [Node.js only] A function to create the server (e.g., `http.createServer`, `https.createServer`).
  - **serverOptions** (object) - Optional - [Node.js only] Options forwarded to `createServer()`.

### Request Example

```js
serve(app, {
  port: 3000,
  hostname: 'localhost',
  onReady() {
    console.log('Server is ready.')
  },
  onCreate(server) {
    // server instance details depend on the runtime
  },
  createServer: require('node:http').createServer,
  serverOptions: {
    key: fs.readFileSync('/path/to/key.pem'),
    cert: fs.readFileSync('/path/to/cert.pem')
  }
})
```

### Response

This function does not return a value directly but configures and starts the server.
```

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

### Example `pageContext.json` Response

Source: https://github.com/vikejs/vike/blob/main/docs/pages/pageContext-json/+Page.mdx

This is an example of the JSON response from a `/star-wars/index.pageContext.json` request, containing data fetched by the `data()` hook.

```json
{
  "data": {
    "movies": [
      {
        "title": "A New Hope",
        "release_date": "1977-05-25"
      },
      {
        "title": "The Empire Strikes Back",
        "release_date": "1980-05-17"
      },
      {
        "title": "Return of the Jedi",
        "release_date": "1983-05-25"
      }
    ]
  }
}
```

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

### Update Fastify server entry

Source: https://github.com/vikejs/vike/blob/main/docs/pages/migration/vike-photon/+Page.mdx

Install the Fastify photon adapter and update imports in the server entry file.

```shell
npm i @photonjs/fastify
```

```ts
// server/index.ts

import fastify from 'fastify'
// @docpress-uncomment import { apply } from 'vike-server/fastify' // [!code --]
// @docpress-uncomment import { serve } from 'vike-server/fastify/serve' // [!code --]
import { apply, serve } from '@photonjs/fastify' // [!code ++]

// ...
```

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

### Log Output Examples

Source: https://github.com/vikejs/vike/blob/main/docs/pages/hooksTimeout/+Page.mdx

Examples of warning and error messages logged by Vike when hooks exceed time limits.

```bash
# Vike first logs a warning (still awaiting your hook)
[vike][Warning] The data() hook defined by /pages/movies/+data.js is slow: it's taking more than 4 seconds
```

```bash
# Then Vike logs an error (and renders your error page)
[vike][Error] The data() hook defined by /pages/movies/+data.js timed out: it didn't finish after 30 seconds
```

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

### Develop Vike Documentation

Source: https://github.com/vikejs/vike/blob/main/CONTRIBUTING.md

After building Vike's source code, navigate to the `docs/` directory and run the development server to work on the documentation.

```shell
cd docs/ # From the monorepo root
pnpm run dev
```

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

### Traceable File References in Photon

Source: https://github.com/vikejs/vike/blob/main/docs/pages/vike-photon/+Page.mdx

Demonstrates how to structure file references to ensure they are statically analyzable by the Photon bundler.

```javascript
// ❌ Photon cannot trace the file reference:
fs.readFile('hello.' + someCondition ? 'js' : 'wasm')

// ✅ Photon can trace this:
someCondition ? fs.readFile('hello.js') : fs.readFile('hello.wasm')
```

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

### Install Standalone Plugin for Vite

Source: https://github.com/vikejs/vike/blob/main/docs/pages/server/+Page.mdx

Install the `standaloner` package to include all necessary files in your build output directory for deployment.

```shell
npm i standaloner
```

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

### Install EdgeOne Vite Adapter

Source: https://github.com/vikejs/vike/blob/main/docs/pages/edgeone-pages/+Page.mdx

Install the EdgeOne Vite adapter using npm. This is a prerequisite for integrating Vike with EdgeOne Pages.

```shell
npm install @edgeone/vite
```