Use ExpressJs as dev server

[folamy]

@frandiox, I would like to use express server with vitesse-ssr both in production and development. Is that possible?

[frandiox]

@folamy Yess, if you use version 0.12.0, you can use Vite SSR as middleware mode for your express server:

const express = require('express')
const { createSsrServer } = require('vite-ssr/dev')

async function createServer() {
  const app = express()

  // Create vite-ssr server in middleware mode.
  const viteServer = await createSsrServer({
    server: { middlewareMode: 'ssr' },
  })

  // Use vite's connect instance as middleware
  app.use(viteServer.middlewares)

  app.listen(3000)
}

createServer()

[folamy]

Thanks @frandiox, that works just fine! But I discover the CSS scripts is not loaded on page load This is the page after loading

Here is the page on page load (while loading).

Currently, components and elements from frameworks/custom components are not properly rendered on pageload.

Note: There is a module: @css-render/vue3-ssr but I don't know how to apply that to the template! Everything else works fine, except this!

Is there a way to fix it?

[frandiox]

Ah, vite-ssr doesn't really do anything with CSS, so it must be related to this bug in Vite itself: https://github.com/vitejs/vite/issues/2282

There are workarounds for that in user-land but I'm hoping they will fix it soonish in Vite since they want to mark SSR features as production-ready 🤔

[folamy]

Ah, vite-ssr doesn't really do anything with CSS, so it must be related to this bug in Vite itself: https://github.com/vitejs/vite/issues/2282

There are workarounds for that in user-land but I'm hoping they will fix it soonish in Vite since they want to mark SSR features as production-ready 🤔

@frandiox Thanks for the response! Okay, but I want to be sure if this is only a development issue or it also happen in production?

[frandiox]

@folamy development only 👌

[frandiox]

I've added docs for middleware mode here so I guess we can close this 👍

[folamy]

@folamy Yess, if you use version 0.12.0, you can use Vite SSR as middleware mode for your express server:

const express = require('express')
const { createSsrServer } = require('vite-ssr/dev')

async function createServer() {
  const app = express()

  // Create vite-ssr server in middleware mode.
  const viteServer = await createSsrServer({
    server: { middlewareMode: 'ssr' },
  })

  // Use vite's connect instance as middleware
  app.use(viteServer.middlewares)

  app.listen(3000)
}

createServer()

Hello @frandiox , Can I also use this approach with VITEdge?

[frandiox]

@folamy It should be possible yes. Vitedge is not exporting createSsrServer but you can just get it from vite-ssr/dev directly. Make sure you add the vitedge plugin to your config instead of vite-ssr. I haven't really tried it yet, so please report if you find any issue and I'll fix it.

[folamy]

@folamy It should be possible yes. Vitedge is not exporting createSsrServer but you can just get it from vite-ssr/dev directly. Make sure you add the vitedge plugin to your config instead of vite-ssr. I haven't really tried it yet, so please report if you find any issue and I'll fix it.

That means I have to have both vitedge and vite-ssr installed?

[folamy]

@folamy It should be possible yes. Vitedge is not exporting createSsrServer but you can just get it from vite-ssr/dev directly. Make sure you add the vitedge plugin to your config instead of vite-ssr. I haven't really tried it yet, so please report if you find any issue and I'll fix it.

I tried it, but it didn't work!

(this will be run only when your dependencies or config have changed)
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/folamy/Desktop/tryout/functions/props/home.js' imported from /home/folamy/Desktop/tryout/node_modules/vitedge/dev/middleware.js
    at finalizeResolution (internal/modules/esm/resolve.js:285:11)
    at moduleResolve (internal/modules/esm/resolve.js:708:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:819:11)
    at Loader.resolve (internal/modules/esm/loader.js:89:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
    at Loader.import (internal/modules/esm/loader.js:177:28)
    at importModuleDynamically (internal/modules/esm/translators.js:114:35)
    at exports.importModuleDynamicallyCallback (internal/process/esm_loader.js:30:14)
    at handleFunctionRequest (file:///home/folamy/Desktop/tryout/node_modules/vitedge/dev/middleware.js:53:55)
    at file:///home/folamy/Desktop/tryout/node_modules/vitedge/dev/middleware.js:254:20 {
  code: 'ERR_MODULE_NOT_FOUND'
}
Could not get page props for route "home"
FetchError: invalid json response body at http://localhost:3000/props/?propsGetter=%2Fprops%2Fhome&data=%257B%2522fullPath%2522%253A%2522%252F%2522%252C%2522path%2522%253A%2522%252F%2522%252C%2522query%2522%253A%257B%257D%252C%2522hash%2522%253A%2522%2522%252C%2522name%2522%253A%2522home%2522%252C%2522params%2522%253A%257B%257D%252C%2522href%2522%253A%2522%252F%2522%257D&rendering=true reason: Unexpected end of JSON input
    at /home/folamy/Desktop/tryout/node_modules/node-fetch/lib/index.js:272:32
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Object.getRenderContext (file:///home/folamy/Desktop/tryout/node_modules/vitedge/dev/middleware.js:370:20)
    at async handleSsrRequest (/home/folamy/Desktop/tryout/node_modules/vitedge/node_modules/vite-ssr/dev/server.js:88:18) {
  type: 'invalid-json'
}

`

[frandiox]

@folamy Ah, I forgot about something important. Assuming you put this exact code in a server.cjs file at the root of your project, then you need to add the following flags to the command line:

node --loader vitedge/dev/ts-loader.js --experimental-json-modules --experimental-specifier-resolution=node server.cjs

This works for me using the examples/vue project in vitedge repo (using Node v14.17.5). -- Use vitedge/dev/js-loader.js if you are not using typescript.

That means I have to have both vitedge and vite-ssr installed?

vite-ssr is a dependency of vitedge, so it will be installed automatically. Maybe you need to add it to your dev-dependencies if your linter complains.

I will export the createSsrServer from Vitedge and try to think about a workaround for the flags.

[frandiox]

Ok so in the next version the server will be available from vitedge/dev, and it can be run with vitedge dev --ssr --middleware ./my-server.js command (will be released in v0.16.0)

[folamy]

Ok so in the next version the server will be available from vitedge/dev, and it can be run with vitedge dev --ssr --middleware ./my-server.js command (will be released in v0.16.0)

That will be great! I am expectant.

[frandiox]

@folamy Released in 0.16.0!

[folamy]

@folamy Released in 0.16.0!

Thank you so much! Would there be a note to this on the documentation page?

[frandiox]

Yes, it's there: https://vitedge.js.org/usage.html#custom-dev-servers