Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions docs/guide/api-environment-frameworks.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ Beachten Sie, dass auch wenn `FetchableDevEnvironment` als Klasse implementiert

## Standardwert `RunnableDevEnvironment`

Ausgehend von einem Vite-Server, der im Middleware-Modus konfiguriert ist, wie in der [SSR-Einrichtungsanleitung] (/guide/ssr#setting-up-the-dev-server) beschrieben, implementieren wir die SSR-Middleware mithilfe der Umgebungs-API. Die Fehlerbehandlung wird weggelassen.
Ausgehend von einem Vite-Server, der im Middleware-Modus konfiguriert ist, wie in der [SSR-Einrichtungsanleitung] (/guide/ssr#setting-up-the-dev-server) beschrieben, implementieren wir die SSR-Middleware mithilfe der Umgebungs-API. Beachten Sie, dass der Name nicht `ssr` lauten muss, weshalb wir den Namen `server` für dieses Beispiel gewählt haben. Die Fehlerbehandlung wird weggelassen.

```js
import fs from 'node:fs'
Expand All @@ -93,7 +93,7 @@ import { createServer } from 'vite'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

const server = await createServer({
const viteServer = await createServer({
server: { middlewareMode: true },
appType: 'custom',
environments: {
Expand All @@ -105,7 +105,7 @@ const server = await createServer({

// You might need to cast this to RunnableDevEnvironment in TypeScript or
// use isRunnableDevEnvironment to guard the access to the runner
const environment = server.environments.node
const serverEnvironment = viteServer.environments.server

app.use('*', async (req, res, next) => {
const url = req.originalUrl
Expand All @@ -117,12 +117,14 @@ app.use('*', async (req, res, next) => {
// 2. Apply Vite HTML transforms. This injects the Vite HMR client,
// and also applies HTML transforms from Vite plugins, e.g. global
// preambles from @vitejs/plugin-react
template = await server.transformIndexHtml(url, template)
template = await viteServer.transformIndexHtml(url, template)

// 3. Load the server entry. import(url) automatically transforms
// ESM source code to be usable in Node.js! There is no bundling
// required, and provides full HMR support.
const { render } = await environment.runner.import('/src/entry-server.js')
const { render } = await environment.runner.import(
'/src/entry-server.js'
)

// 4. render the app HTML. This assumes entry-server.js's exported
// `render` function calls appropriate framework SSR APIs,
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/api-environment-instances.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ During dev, the available environments in a dev server can be accessed using `se
// create the server, or get it from the configureServer hook
const server = await createServer(/* options */)

const environment = server.environments.client
environment.transformRequest(url)
const clientEnvironment = server.environments.client
clientEnvironment.transformRequest(url)
console.log(server.environments.ssr.moduleGraph)
```

Expand Down
4 changes: 2 additions & 2 deletions docs/guide/api-environment.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ Für eine einfache SPA/MPA werden keine neuen APIs rund um Umgebungen in der Kon

Wenn wir zu einer typischen serverseitig gerenderten (SSR) App wechseln, haben wir zwei Umgebungen:

- client: Führt die App im Browser aus.
- „server“: Führt die App in Node (oder anderen Server-Laufzeiten) aus, die Seiten rendert, bevor sie an den Browser gesendet werden.
- `client`: Führt die App im Browser aus.
- `ssr`: Führt die App in Node (oder anderen Server-Laufzeiten) aus, die Seiten rendert, bevor sie an den Browser gesendet werden.

In der Entwicklung führt Vite den Servercode im gleichen Node-Prozess wie der Vite-Entwicklungsserver aus, wodurch eine gute Annäherung an die Produktionsumgebung erreicht wird. Es ist jedoch auch möglich, dass Server in anderen JS-Laufzeitumgebungen ausgeführt werden, wie z. B. [Cloudflares Workerd](https://github.com/cloudflare/workerd), die andere Einschränkungen haben. Moderne Apps können auch in mehr als zwei Umgebungen ausgeführt werden, z. B. in einem Browser, einem Node-Server und einem Edge-Server. Vite 5 ermöglichte es vorher nicht, diese Umgebungen korrekt darzustellen.

Expand Down