Vike

https://vike.dev
Admin
Vike is a framework that simplifies building web applications with Server-Side Rendering (SSR) and...
Tokens:184,615
Snippets:1,897
Trust Score:7.9
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Hono adapter for Photon

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

Install the Hono adapter package for Photon.

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

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

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

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

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

### Install Compression Middleware

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

Install the universal compression middleware package.

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

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

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

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

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

### Install Netlify CLI

Source: https://vike.dev/netlify

Install the Netlify CLI globally to enable command-line deployments.

```bash
npm install -g netlify-cli
```

```bash
pnpm add -g netlify-cli
```

```bash
bun add --global netlify-cli
```

```bash
yarn global add netlify-cli
```

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

### Install vike-photon

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

Commands to install the vike-photon package using different package managers.

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

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

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

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

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

### Install Fastify Adapter

Source: https://vike.dev/server

Commands to install Fastify and the Vike adapter using various package managers.

```bash
npm install fastify @vikejs/fastify
```

```bash
pnpm add fastify @vikejs/fastify
```

```bash
bun add fastify @vikejs/fastify
```

```bash
yarn add fastify @vikejs/fastify
```

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

### preview()

Source: https://vike.dev/api

Starts a server to preview the production build.

```APIDOC
## preview()

### Description
Starts a server to preview the production build.

### Parameters
- **vikeConfig** (object) - Optional - Vike configuration.
- **viteConfig** (object) - Optional - Vite configuration.

### Returns
- **viteConfig** (ResolvedConfig) - Resolved Vite configuration.
- **viteServer** (object) - Vite's development server.
```

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

### preview()

Source: https://vike.dev/api

Starts the Vike preview server.

```APIDOC
## preview()

### Description
Starts a server to preview the production build.

### Method
JavaScript Function
```

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

### Start preview server

Source: https://vike.dev/api

Initializes a preview 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}`)
```

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

### Configure Fastify +server.js

Source: https://vike.dev/server

Integration example for Fastify.

```javascript
// +server.js
 
import fastify from 'fastify'
import vike, { toFetchHandler } from '@vikejs/fastify'
 
const app = fastify()
await vike(app) // Attaches Vike
 
export default {
  fetch: toFetchHandler(app.routing)
}
```

```typescript
// +server.ts
 
import fastify from 'fastify'
import vike, { toFetchHandler } from '@vikejs/fastify'
import type { Server } from 'vike/types'
 
const app = fastify()
await vike(app) // Attaches Vike
 
export default {
  fetch: toFetchHandler(app.routing)
} satisfies Server
```

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

### Install Express Adapter

Source: https://vike.dev/server

Commands to install Express and the Vike adapter using various package managers.

```bash
npm install express @vikejs/express
```

```bash
pnpm add express @vikejs/express
```

```bash
bun add express @vikejs/express
```

```bash
yarn add express @vikejs/express
```

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

### Configure vike/fetch +server.js

Source: https://vike.dev/server

Integration example for custom server or no framework.

```javascript
// +server.js
 
import vike from 'vike/fetch'
 
export default {
  fetch(request) {
    console.log('Incoming request:', request.url)
    return vike.fetch(request)
  }
}
```

```typescript
// +server.ts
 
import vike from 'vike/fetch'
 
export default {
  fetch(request) {
    console.log('Incoming request:', request.url)
    return vike.fetch(request)
  }
} satisfies Server
```

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

### Configure Elysia +server.js

Source: https://vike.dev/server

Integration example for Elysia.

```javascript
// +server.js
 
import { Elysia } from 'elysia'
import vike from '@vikejs/elysia'
 
const app = new Elysia()
vike(app) // Attaches Vike
 
export default {
  fetch: app.fetch
}
```

```typescript
// +server.ts
 
import { Elysia } from 'elysia'
import vike from '@vikejs/elysia'
import type { Server } from 'vike/types'
 
const app = new Elysia()
vike(app) // Attaches Vike
 
export default {
  fetch: app.fetch
} satisfies Server
```

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

### dev()

Source: https://vike.dev/api

Starts the Vike development server.

```APIDOC
## dev()

### Description
Starts the Vike development server for local development.

### Method
JavaScript Function

### Parameters
- **options** (Object) - Optional - Configuration options for the development server.
```

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

### Alternative + file structure

Source: https://vike.dev/config

Example of file naming conventions for + configurations.

```text
/pages/product/@id/+config.js
/pages/product/@id/Page.jsx
/pages/product/@id/Layout.jsx
/pages/product/@id/+Page.jsx
/pages/product/@id/+Layout.jsx
```

```text
/pages/product/@id/+config.ts
/pages/product/@id/Page.tsx
/pages/product/@id/Layout.tsx
/pages/product/@id/+Page.tsx
/pages/product/@id/+Layout.tsx
```

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

### Install Elysia Adapter

Source: https://vike.dev/server

Commands to install Elysia and the Vike adapter using various package managers.

```bash
npm install elysia @vikejs/elysia
```

```bash
pnpm add elysia @vikejs/elysia
```

```bash
bun add elysia @vikejs/elysia
```

```bash
yarn add elysia @vikejs/elysia
```

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

### Install EdgeOne CLI

Source: https://vike.dev/edgeone-pages

Install the EdgeOne CLI globally to enable command-line deployment.

```bash
npm install -g edgeone
```

```bash
pnpm add -g edgeone
```

```bash
bun add --global edgeone
```

```bash
yarn global add edgeone
```

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

### Install Hono Adapter

Source: https://vike.dev/server

Commands to install Hono and the Vike adapter using various package managers.

```bash
npm install hono @vikejs/hono
```

```bash
pnpm add hono @vikejs/hono
```

```bash
bun add hono @vikejs/hono
```

```bash
yarn add hono @vikejs/hono
```

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

### Install Netlify Vite Plugin

Source: https://vike.dev/netlify

Install the @netlify/vite-plugin package using your preferred package manager.

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

```bash
pnpm add @netlify/vite-plugin
```

```bash
bun add @netlify/vite-plugin
```

```bash
yarn add @netlify/vite-plugin
```

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

### Configure H3 +server.js

Source: https://vike.dev/server

Integration example for H3.

```javascript
// +server.js
 
import { createApp, toWebHandler } from 'h3'
import vike from '@vikejs/h3'
 
const app = createApp()
vike(app) // Attaches Vike
 
export default {
  fetch: toWebHandler(app)
}
```

```typescript
// +server.ts
 
import { createApp, toWebHandler } from 'h3'
import vike from '@vikejs/h3'
import type { Server } from 'vike/types'
 
const app = createApp()
vike(app) // Attaches Vike
 
export default {
  fetch: toWebHandler(app)
} satisfies Server
```

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

### dev()

Source: https://vike.dev/api

Starts the Vike development server programmatically.

```APIDOC
## dev()

### Description
Starts the development server. Returns an object containing the resolved Vite configuration and the Vite development server instance.

### Parameters
- **options** (object) - Optional
  - **vikeConfig** (object) - Optional: Vike configuration
  - **viteConfig** (object) - Optional: Vite configuration

### Returns
- **viteConfig** (ResolvedConfig) - The resolved Vite configuration.
- **viteServer** (ViteDevServer) - The Vite development server instance.
```

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

### Install Standaloner

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

Install the standaloner package using your preferred package manager.

```bash
npm install standaloner
```

```bash
pnpm add standaloner
```

```bash
bun add standaloner
```

```bash
yarn add standaloner
```

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

### Configure Express +server.js

Source: https://vike.dev/server

Integration example for Express.

```javascript
// +server.js
 
import express from 'express'
import vike, { toFetchHandler } from '@vikejs/express'
 
const app = express()
vike(app) // Attaches Vike
 
export default {
  fetch: toFetchHandler(app)
}
```

```typescript
// +server.ts
 
import express from 'express'
import vike, { toFetchHandler } from '@vikejs/express'
import type { Server } from 'vike/types'
 
const app = express()
vike(app) // Attaches Vike
 
export default {
  fetch: toFetchHandler(app)
} satisfies Server
```

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

### Install H3 Adapter

Source: https://vike.dev/server

Commands to install H3 and the Vike adapter using various package managers.

```bash
npm install h3 @vikejs/h3
```

```bash
pnpm add h3 @vikejs/h3
```

```bash
bun add h3 @vikejs/h3
```

```bash
yarn add h3 @vikejs/h3
```

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

### Install EdgeOne Vite adapter

Source: https://vike.dev/edgeone-pages

Install the required adapter package using your preferred package manager.

```bash
npm install @edgeone/vite
```

```bash
pnpm add @edgeone/vite
```

```bash
bun add @edgeone/vite
```

```bash
yarn add @edgeone/vite
```

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

### Example HTML output

Source: https://vike.dev/bodyHtmlEnd

The resulting HTML structure after adding a portal root.

```html
<body>
  {/* ... */}
  <div id="root">{reactHtml}</div>
  <div id="portal-root"></div>
</body>
```

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

### Deploy via CLI

Source: https://vike.dev/edgeone-pages

Execute the deployment command after installing the CLI.

```bash
edgeone pages deploy
```

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

### Example of Unminified Client Entry File

Source: https://vike.dev/debug

An example of how a generated client-side entry file appears when minification is disabled, showing module imports and page configuration.

```javascript
// dist/client/assets/entries/pages_about.DrVcZv1W.js
 
import { j as jsxRuntimeExports } from "../chunks/chunk-BXiwBnjM.js";
import { i as isBrowser, a as assertClientRouting } from "../chunks/chunk-CSn_bGv_.js";
 
/*! /home/rom/code/vike/packages/vike/dist/shared/route/utils.js [vike:pluginModuleBanner] */
if (isBrowser()) {
  assertClientRouting();
}
 
/*! pages/about/+Page.jsx [vike:pluginModuleBanner] */
function Page() {
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: "About" }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Example of using Vike." })
  ] });
}
const import2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: Page
}, Symbol.toStringTag, { value: "Module" }));
 
/*! virtual:vike:pageConfigValuesAll:client:/pages/about [vike:pluginModuleBanner] */
const configValuesSerialized = {
  ["Page"]: {
    type: "standard",
    definedAtData: { "filePathToShowToUser": "/pages/about/+Page.jsx" },
    valueSerialized: {
      type: "plus-file",
      exportValues: import2
    }
  }
};
export {
  configValuesSerialized
};
```

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

### Vue configuration example

Source: https://vike.dev/useConfig

Example of using the h function to define Head tags in Vue components.

```javascript
import { h } from 'vue'
config({
  Head: h('meta', {
    property: 'og:image',
    content: data.product.image
  })
})
```

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

### enableEagerStreaming

Source: https://vike.dev/streaming

Configures Vike to start emitting the HTML template immediately rather than waiting for the UI framework stream to start.

```APIDOC
## enableEagerStreaming

### Description
Setting `pageContext.enableEagerStreaming` to `true` instructs Vike to begin emitting the HTML template to the user immediately, bypassing the default behavior of waiting for the UI framework's stream to start.

### Usage
Return an object from `onRenderHtml` containing the `documentHtml` and a `pageContext` object with `enableEagerStreaming` set to `true`.

### Example
```javascript
async function onRenderHtml(pageContext) {
  const documentHtml = escapeInject`<!DOCTYPE html>...`;
  return {
    documentHtml,
    pageContext: {
      enableEagerStreaming: true
    }
  };
}
```
```

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

### dev()

Source: https://vike.dev/api

Starts the Vike development server programmatically with optional Vite configuration.

```APIDOC
## dev(options)

### Description
Starts the Vike development server. Accepts an optional `viteConfig` object to override or specify Vite settings.

### Parameters
- **viteConfig** (InlineConfig) - Optional - Vite configuration settings.

### Usage
```javascript
import { dev } from 'vike/api'
await dev({
  viteConfig: {
    configFile: './path/to/vite.config.js',
    root: './path/to/app/'
  }
})
```
```

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

### Configure Global Prerendering

Source: https://vike.dev/prerender

Examples of defining pre-render settings within a global configuration file.

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

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

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

### JSON5 syntax example

Source: https://vike.dev/cli

Demonstrates JSON5 syntax, which supports comments and unquoted keys.

```json5
// Some comment
{
   "someProp": "someVal"
}
```

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

### Case sensitive routing examples

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

Demonstrates that filesystem paths are case-sensitive in Vike routing.

```text
FILESYSTEM                     URL
========================       ======
pages/HELLO/+Page.js           /HELLO
```

```text
FILESYSTEM                     URL
========================       ======
pages/HELLO/+Page.ts           /HELLO
```

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

### Apply Compression Middleware

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

Integrate the compression middleware into your server setup.

```javascript
// +server.js
 
import { Hono } from 'hono'
import vike from '@vikejs/hono'
import compress from '@universal-middleware/compress'
 
const app = new Hono()
vike(app) 
// Add universal middlewares here (same for Express.js, Fastify, ...)
vike(app, [compress()])
```

```typescript
// +server.ts
 
import { Hono } from 'hono'
import vike from '@vikejs/hono'
import compress from '@universal-middleware/compress'
 
const app = new Hono()
vike(app) 
// Add universal middlewares here (same for Express.js, Fastify, ...)
vike(app, [compress()])
```

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

### Configure vike-photon

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

Configuration setup for vike-photon in Vike projects using JavaScript or TypeScript.

```javascript
// pages/+config.js
 
import vikePhoton from 'vike-photon/config'
 
export const config = {
  extends: [vikePhoton] 
}
```

```typescript
// pages/+config.ts
 
import type { Config } from 'vike/types'
import vikePhoton from 'vike-photon/config'
 
export const config = {
  extends: [vikePhoton] 
} satisfies Config
```

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

### View build output structure

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

Example showing the file structure of the dist/client/ directory after running the build command.

```text
# The browser-side JavaScript bundle of our page `pages/hello-world/+Page.js`
dist/client/assets/entries/pages_hello-world.b0c3b30b.js
# Our file `public/robots.txt`
dist/client/robots.txt
```

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

### serve(app, options)

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

The serve() function initializes the server application. It accepts an app instance and an options object to configure server behavior, port, and environment-specific settings.

```APIDOC
## serve(app, options)

### Description
Defines a single server entry point capable of targeting multiple environments. It handles environment-specific server attachment styles.

### Parameters
- **app** (Object) - Required - The application instance to serve.
- **options** (Object) - Optional - Configuration object:
  - **port** (number) - Optional - Server port (defaults to 3000, ignored in serverless).
  - **hostname** (string) - Optional - Hostname (defaults to 'localhost').
  - **onReady** (Function) - Optional - Callback triggered when the server is accepting connections.
  - **onCreate** (Function) - Optional - Callback triggered when the server is created, providing the server instance (if applicable).
  - **createServer** (Function) - Optional - Node.js specific: factory function for creating the server (e.g., from node:http).
  - **serverOptions** (Object) - Optional - Node.js specific: options forwarded to createServer().

### Usage Example
```javascript
serve(app, {
  port: 3000,
  onReady() {
    console.log('Server is ready.');
  }
});
```
```

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

### Install vite-plugin-vercel

Source: https://vike.dev/vercel

Install the Vercel plugin for Vite using your preferred package manager.

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

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

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

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

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

### Start production server

Source: https://vike.dev/self-host

Executes the server entry point generated during the build process using a Node.js, Bun, or Deno runtime.

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

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

### Install styled-jsx

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

Commands to install the styled-jsx package using various package managers.

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

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

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

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

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

### Vue teleport injection example

Source: https://vike.dev/bodyHtmlEnd

Example of how vike-vue handles teleport targets automatically.

```html
<div id="teleported">${
  pageContext.ssrContext.teleports?.['#teleported'] ?? ''
}</div>
```

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

### Uninstall vike-photon and install vike

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

Remove the deprecated package and install the latest version of vike.

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

```bash
pnpm remove vike-photon
pnpm add vike@latest
```

```bash
bun remove vike-photon
bun add vike@latest
```

```bash
yarn remove vike-photon
yarn add vike@latest
```

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

### Start development server with dev()

Source: https://vike.dev/api

Initializes the development server and prints access URLs. Requires awaiting the dev function to retrieve the Vite server and configuration instances.

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

```javascript
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()
```

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

### Implement Hono server

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

Create a server entry point using Hono and the Photon apply/serve utilities.

```javascript
// server/index.js
 
import { Hono } from 'hono'
import { apply, serve } from '@photonjs/hono'
 
function startServer() {
  const app = new Hono()
  apply(app)
  return serve(app)
}
 
export default startServer()
```

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

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

### Install Cloudflare dependencies

Source: https://vike.dev/cloudflare

Install the Wrangler CLI and the Cloudflare Vite plugin using your preferred package manager.

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

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

### Initialize createDevMiddleware

Source: https://vike.dev/createDevMiddleware

Demonstrates the basic usage of createDevMiddleware to obtain the development middleware, resolved Vite configuration, and the Vite server instance.

```javascript
import { createDevMiddleware } from 'vike/server'
 
const {
  devMiddleware, // The development middleware
  viteConfig, // Resolved Vite configuration
  viteServer // Vite's development server
} = await createDevMiddleware({
  root: './path/to/app', // (optional, but recommended)
  viteConfig: {
    // Some Vite configuration (optional)
  }
})
```

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

### Advanced Configuration and Page Inheritance

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

Complex configuration examples showing how hooks and config files apply across different directory structures.

```text
###################
## Configuration ##
###################
# 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
```

```text
###################
## Configuration ##
###################
# 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
```

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

### Implement onBeforePrerenderStart hook

Source: https://vike.dev/onBeforePrerenderStart

Provide a list of URLs for pre-rendering by fetching data at build-time.

```javascript
// /pages/movie/+onBeforePrerenderStart.js
// Environment: build-time
 
export { onBeforePrerenderStart }
 
async function onBeforePrerenderStart() {
  const movies = await Movie.findAll()
  const moviePageURLs = movies.map((movie) => '/movie/' + movie.id)
  return moviePageURLs
}
```

```typescript
// /pages/movie/+onBeforePrerenderStart.ts
// Environment: build-time
 
export { onBeforePrerenderStart }
 
async function onBeforePrerenderStart(): Promise<string[]> {
  const movies = await Movie.findAll()
  const moviePageURLs: string[] = movies.map(movie => '/movie/' + movie.id)
  return moviePageURLs
}
```

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

### Configure preview server

Source: https://vike.dev/api

Configures the preview server with optional Vike and Vite settings, and demonstrates accessing the global context.

```javascript
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()
```

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

### Config Inheritance Scope

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

Demonstrates how configuration files apply to specific subdirectories.

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

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

```text
# This +config.js file applies to pages/admin-panel/**/*
pages/admin-panel/+config.js
# This +config.js file applies to pages/(marketing)/**/*
pages/(marketing)/+config.js
```

```text
# This +config.ts file applies to pages/admin-panel/**/*
pages/admin-panel/+config.ts
# This +config.ts file applies to pages/(marketing)/**/*
pages/(marketing)/+config.ts
```

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

### Deploy to Netlify via CLI

Source: https://vike.dev/netlify

Execute the deployment command to push your production build to Netlify.

```bash
netlify deploy --prod
```

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

### Using useHydrated in Solid

Source: https://vike.dev/useHydrated

Example of using the hook in a Solid component.

```javascript
import { useHydrated } from 'vike-solid/useHydrated'
 
function SomeComponent() {
  const hydrated = useHydrated()
  return (
    <button type="button" disabled={!hydrated()} onClick={doSomething}>
      Click me
    </button>
  )
}
```

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

### Example pageContext.json response

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

The JSON structure returned by the pageContext.json request.

```json
$ curl /star-wars/index.pageContext.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"
      }
    ]
  }
}
```

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

### Configure htmlAttributes

Source: https://vike.dev/htmlAttributes

Examples of setting the htmlAttributes configuration in both JavaScript and TypeScript.

```javascript
// pages/+config.js
 
export default {
  // <html class="dark">
  htmlAttributes: { class: 'dark' }
}
```

```typescript
// pages/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
  // <html class="dark">
  htmlAttributes: { class: 'dark' }
} satisfies Config
```

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

### Enable Built-in Server

Source: https://vike.dev/server

Configuration to use Vike's built-in lightweight server.

```javascript
// pages/+config.js
 
export default {
  server: true // Use Vike's built-in server
}
```

```typescript
// pages/+config.ts
 
export default {
  server: true // Use Vike's built-in server
}
```

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

### Header Tuple Format

Source: https://vike.dev/headersResponse

Example of the string tuple format for headers.

```json
[
  ['Content-Type', 'text/html;charset=utf-8'],
  ['Cache-Control', 'no-store, max-age=0']
]
```

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

### build()

Source: https://vike.dev/api

Builds the Vike application for production.

```APIDOC
## build()

### Description
Compiles the Vike application for production deployment.

### Method
JavaScript Function
```

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

### React Component Trace

Source: https://vike.dev/broken-npm-package

Example of a React component trace log.

```text
Check your code at +Page.tsx:26.
    at Page
    at div
    at div
    at Layout (/pages/+Layout.tsx:66:19)
```

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

### Configure the serve() function

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

Use the serve() function to define a unified server entry point that adapts to different runtime environments like Node.js, Cloudflare, and Vercel.

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

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

### Filesystem Routing URL Mapping Example

Source: https://vike.dev/filesystemRoutingRoot

Visual representation of how file paths map to URLs when using filesystemRoutingRoot.

```text
PROJECT FILES                               URL
===============================             ======
/marketing/pages/index/+Page.js             /
/marketing/pages/about/+Page.js             /about
/marketing/pages/jobs/+Page.js              /jobs
```

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

### Configure vike-vue settings

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

Example of configuring vike-vue settings such as toggling SSR.

```javascript
// /pages/+config.js
 
import vikeVue from 'vike-vue/config'
 
export default {
  // ...
 
  // Setting to toggle SSR
  ssr: false, 
 
  extends: [vikeVue]
}
```

```typescript
// /pages/+config.ts
 
import type { Config } from 'vike/types'
import vikeVue from 'vike-vue/config'
 
export default {
  // ...
 
  // Setting to toggle SSR
  ssr: false, 
 
  extends: [vikeVue]
} satisfies Config
```

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

### Define +onError() hook

Source: https://vike.dev/onError

Implementation examples for the +onError() hook in JavaScript and TypeScript.

```javascript
// pages/+onError.js
// Environment: server
 
export const onError = (error, pageContext) => {
  // ...
}
```

```typescript
// pages/+onError.ts
// Environment: server
 
import type { Config } from 'vike/types'
 
export const onError: Config['onError'] = (error, pageContext) => {
  // ...
}
```

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

### HTML Output with Base URL

Source: https://vike.dev/base-url

Example of how assets and links are rendered in HTML when base settings are applied.

```html
<!-- view-source:https://my-website.com/some-base/ -->
 
<html>
  <head>
    <!-- Base URL is 'https://cdn.example.org/my-website-assets/' -->
    <link
      href="https://cdn.example.org/my-website-assets/logo.svg"
      rel="icon"
    >
    <link
      href="https://cdn.example.org/my-website-assets/style.css"
      rel="stylesheet"
      type="text/css"
    >
  </head>
  <body>
    <nav>
      <!-- Base URL is '/some-base/' -->
      <a href="/some-base/">Landing Page</a>
      <a href="/some-base/about">About Page</a>
    </nav>
    <!-- Base URL is 'https://cdn.example.org/my-website-assets/' -->
    <script src="https://cdn.example.org/my-website-assets/script.js" type="module">
  </body>
</html>
```

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

### Replace vite-plugin-vercel with @photonjs/vercel

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

Uninstall the old Vercel plugin and install the Photon-specific version.

```bash
npm uninstall vite-plugin-vercel
npm install @photonjs/vercel
```

```bash
pnpm remove vite-plugin-vercel
pnpm add @photonjs/vercel
```

```bash
bun remove vite-plugin-vercel
bun add @photonjs/vercel
```

```bash
yarn remove vite-plugin-vercel
yarn add @photonjs/vercel
```

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

### Build for production with build()

Source: https://vike.dev/api

Executes the production build process. Optionally accepts configuration objects and provides access to the global context.

```javascript
import { build } from 'vike/api'
 
console.log('Building app...')
await build()
console.log('Build is done')
```

```javascript
await build({
  vikeConfig, // Vike configuration (optional)
  viteConfig // Vite configuration (optional)
})
 
// You can access the globalContext object:
import { getGlobalContext } from 'vike'
const globalContext = await getGlobalContext()
// If you pre-render pages
console.log(globalContext.prerenderContext)
```

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

### Replace vike-cloudflare with @photonjs/cloudflare

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

Uninstall the old Cloudflare plugin and install the Photon-specific version.

```bash
npm uninstall vike-cloudflare
npm install @photonjs/cloudflare
```

```bash
pnpm remove vike-cloudflare
pnpm add @photonjs/cloudflare
```

```bash
bun remove vike-cloudflare
bun add @photonjs/cloudflare
```

```bash
yarn remove vike-cloudflare
yarn add @photonjs/cloudflare
```
Tokens:
Raw