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.

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

• Vike react e...

• Vite react e...

Installation

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

Then edit your Server.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.

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>