Use vite-plugin-node along with @vitejs/plugin-react

[subodhpareek18]

Apologies if this is a noob level question. I'm new to both vite and vite-node. I want to build an app with both a backend and a front end. As I understand vite enables you to do the front end part easily but without the backend hmr which this plugin is built for.

However I haven't figured out how to combine both with independent server and client directories each hosting it's own set of files, with the server/index.ts having its own /api end points and falling back to client for the remaining * routes. I've gone through the examples here but couldn't find what I was looking for.

Any help would be appreciated, thanks!

[Falci]

I have the problem.

index.html is not generated when using both plugins: [react(), ...VitePluginNode()]

[axe-me]

i think it's better to keep your frontend and backend separated. At your frontend vite config just proxy the /api to your backend URL. See: https://vitejs.dev/config/#server-proxy

[andersaamodt]

Is there a way to have both in one project with vite-plugin-node? Enabling vite-plugin-node config disables compiling the frontend for me.

[iandoesallthethings]

@andersaamodt I'm having a similar problem with svelte, so seconding this question. Aiming for something like this:

// express/app.ts
import express from 'express'
const app = express()

app.get('/legacy', (req, res) => {
	res.send('Hello World from express!')
})

export const expressApp = app

// vite.config.js
plugins: [
  sveltekit(),
  ...VitePluginNode({ 
    adapter: 'express', 
    appPath: './express/app.ts', 
    exportName: 'expressApp' 
  })
]

The express routes work fine, but it looks like the sveltekit routes are being overwritten even if I change the order of the plugins.

[cainrus]

FYI: #95 (comment)

[nbarpujari-bardavon]

I am using this package in a fullstack setup along with remix.
I had to patch the package to hmr: true (here). Without this patch HMR for react stops working.