Transpile server code

[brillout]

By default, your server code isn't processed by Vite:

// server/index.js

// This file isn't processed by Vite. Consequently:
//  - When changing this file, you needed to manually restart your server for your changes to take effect.
//  - To use your environment variables defined in your .env files, you need to install dotenv.
//    See: https://vite-plugin-ssr.com/env
//  - To use your path aliases defined in your vite.config.js, you need to tell Node.js about them.
//    See: https://vite-plugin-ssr.com/path-aliases

// Your server, for example an Express.js app
import express from 'express'
const app = express()

// ...

If you want Vite to process your server code then use one of these:

• vavite
  • See vavite + vite-pugin-ssr examples.
• vite-node
• HatTip
  • You can use Bati to scaffold a vike + HatTip app

If you merely want to transpile TypeScript, you can use:

• ts-node
• tsx

Instead of having to use an extra tool, vike should have a new option server: './path/to/server/entry.ts'.

Edit:

• Vite is working on a built-in solution. Vike may not need to implement it, let's see.
• Ideally with a bundled/standalone option, see https://github.com/vikejs/vike/issues/1165 (which includes an example of how Vite can be configured to bundle everything).
• Ideally with a seamless integration with other server entries such as Telefunc's entries.

[samuelstroschein]

For context, this issue has been opened due to https://github.com/brillout/vite-plugin-ssr/discussions/560

[brillout]

Quoting @nitedani.

How about including vavite in vps? As a new vps user, I would except vps to work with nodejs ssr out of the box, including hot-reloading server-side code.

I share the sentiment. Although, instead of including vavite in VPS, I currently have a slight preference for making the boilerplates use vavite. I understand that having to use a plethora of tools to get started isn't ideal – the goal in that regard is to build frameworks on top of VPS that are more opinionated and larger in scope.

That said, I'll have a closer look at vavite's code and if the hacks it uses don't have negative side effects, I'll consider integrating vavite into VPS. I'll have a look at it after I'm done with the V1 design.

[samuelstroschein]

Duplicate of #169 / close #169 in favor of this one ?

[brillout]

@samuelstroschein Yes 👍

[brillout]

The plan long term was to use HatTip.

But, I'm starting to think that, regardless of HatTip, we still need this. Because we don't want to force users to use HatTip.

I've heard that there is some discussions to integrate vite-node into Vite. I'll see if I can find the disucssion.

[brillout]

I'll see if I can find the disucssion.

https://github.com/vitejs/vite/pull/12165#issuecomment-1524022738.

[aheissenberger]

I use vavite and since the last changes in vitejs debugging backend (vise-plugin-ssr, trpc and express) with sourcemaps works with nodejs 18-20 without any node loader like a charm.

[brillout]

Also https://github.com/szymmis/vite-express. But it uses nodemon to watch server files for changes which comes with its own problems, and it doesn't seem to send Vite's full-reload HMR signal.

[brillout]

Also https://github.com/egoist/vite-plugin-mix, and in particular @rhildred's interesting approach of using cloudflare2express with his fork https://github.com/diy-pwa/vite-plugin-mix.

[BanDroid]

any updates about this workaround?

[brillout]

@BanDroid No updates. Contribution welcome to dig into it.

[CertainlyAria]

I tried to run my vike project with vite-node (previously I was running with tsx). I got the following error. I'm not sure whether I should create a new issue 🤔

Error: [[email protected]][Bug] You stumbled upon a bug in Vike's source code. Go to https://github.com/vikejs/vike/issues/new and copy-paste this error; a maintainer will fix the bug (usually under 24 hours).
   at assertIsBrowser (file:///path-to-my-project/node_modules/.pnpm/[email protected][email protected]/node_modules/vike/dist/esm/utils/assertIsBrowser.js:5:5)
   at onLoad (file:///path-to-my-project/node_modules/.pnpm/[email protected][email protected]/node_modules/vike/dist/esm/client/server-routing-runtime/onLoad.js:4:5)
   at file:///path-to-my-project/node_modules/.pnpm/[email protected][email protected]/node_modules/vike/dist/esm/client/server-routing-runtime/utils.js:4:1
   at ViteNodeRunner.interopedImport (file:///path-to-my-project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/client.mjs:363:28)
   at ViteNodeRunner.directRequest (file:///path-to-my-project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/client.mjs:243:24)
   at ViteNodeRunner.cachedRequest (file:///path-to-my-project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/client.mjs:189:14)
   at ViteNodeRunner.dependencyRequest (file:///path-to-my-project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/client.mjs:223:12)
   at /path-to-my-project/src/vike/server:3:31
   at ViteNodeRunner.runModule (file:///path-to-my-project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/client.mjs:342:5)
   at ViteNodeRunner.directRequest (file:///path-to-my-project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/client.mjs:326:5)
   at ViteNodeRunner.cachedRequest (file:///path-to-my-project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/client.mjs:189:14)
   at ViteNodeRunner.executeFile (file:///path-to-my-project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/client.mjs:161:12)
   at CAC.run (file:///path-to-my-project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/cli.mjs:91:5)
 ELIFECYCLE  Command failed with exit code 1.

[brillout]

@CertainlyAria That's unrelated, please create a new issue with a minimal reproduction.

[alessandrojcm]

Vite's experimental runtime api was just released in the latest beta, might give it a try in the next few days.

[brillout]

@alessandrojcm FYI we're also experimenting with it at https://github.com/vikejs/vike/pull/1342. It's looking promising. Exciting.

[brillout]

Vite is refactoring its Vite Runtime API design (which they're renaming Vite Environment API), see https://github.com/vitejs/vite/pull/16089.

Rough release estimate:

@Blu proposed that we release 5.2 with what we currently have in the milestone, as implementing the new revised version will take some time. So we are aiming to release Environment API in 5.3 (removing Runtime API), and then do another cycle of feedback, and revise it for 5.4 (and hopefully there we can keep it experimental but stable). Then on Vite 6 we could make it stable, but keeping all current APIs backward compatible. Vite 7 if possible will remove the mixed server.moduleGraph

So it's going to take a while until we can finish implementing this. (Progress on Vike's side at PR #1513.)

[brillout]

Dani made vike-node.