---
url: /tutorials/vike.md
description: Use Vike with Ts.ED.
---

# Vike

> Like Next.js/Nuxt but as a do-one-thing-do-it-well Vite plugin.

Use **any UI framework** (React, Vue, Svelte, Solid, ...) and **any tool** you want (any frontend library, web
technology, deploy environment, Vite plugin, ...).

With `vike`, you integrate tools manually and keep `architectural control`.

::: tip Note
Vike replaces the `vite-plugin-ssr` package. Ts.ED provides `@tsed/vite-ssr-plugin` and `@tsed/vike` packages.
All new features will only be included in the `@tsed/vike` package.

To migrate `@tsed/vite-ssr-plugin`, simply replace `@tsed/vite-ssr-plugin` by `@tsed/vike` in your code and install `vike` dependency instead of `vite-plugin-ssr`.
:::

::: tip
You can also read this article over Ts.ED + Vite-plugin-ssr on Medium:
<https://romainlenzotti.medium.com/use-vite-and-ts-ed-to-build-your-website-84fb4c0d8079>
:::

## Features

* Use `@Vite` decorator to generate a page using `vite`
* Render a page using any UI framework (React, Vue, Svelte, Solid, ...)

## Quick start

## Installation

```bash
npm install vike @tsed/vike vite@4 --save
```

Then edit your `Server.ts`:

```ts
import {join} from "node:path";
import {Configuration, Inject} from "@tsed/di";
import {PlatformApplication} from "@tsed/common";
import "@tsed/platform-express"; // /!\ keep this import
import "@tsed/vike"; // add this
import "@tsed/ajv";
import "@tsed/swagger";
import {config} from "./config";
import * as rest from "./controllers/rest";
import * as pages from "./controllers/pages";

@Configuration({
  vite: {
    root: "../path/to/app/project"
  }
})
export class Server {}
```

We recommend you to start your project with
the [starter project](https://github.com/tsedio/tsed-vite-react-movies-demo).

The starter project is a monorepo (Nx) with 2 projects:

* `packages/server`: the backend project
  * `packages/server/controllers/pages`: the controllers pages directory
  * `packages/server/controllers/rest`: the controllers REST directory
* `packages/app`: the frontend project
  * `packages/app/pages`: the pages directory
  * `packages/app/renderer`: the app shell directory (header, footer, layout, etc...)

- `packages/server/controllers/pages`: the controllers pages directory
- `packages/server/controllers/rest`: the controllers REST directory
- `packages/app/pages`: the pages directory
- `packages/app/renderer`: the app shell directory (header, footer, layout, etc...)

```

## Author

<GithubContributors :users="['Romakita']"/>

## Maintainers <Badge text="Help wanted" />

<GithubContributors :users="['Romakita']"/>

<div class="flex items-center justify-center p-5">
<Button href="/contributing.html" class="rounded-medium">
 Become maintainer
</Button>
</div>
```