Serve static assets from src folder during development in a custom server setup?

[Blankeos]

Problem: For instance in Hono custom server + Vike as a middleware, static assets inside src don't seem to get served during development...

1. Let's say I have images inside:
   src/assets/images/*.jpg

2. I then import them via
   import Img from '@/assets/images/nice.jpg'; for example.

• ❌ When in development. My images don't get shown because the url is pointing to src/assets/images/nice.jpg, it goes to /404 in Vike.
• ✅ When in build and run for prod. My images are shown correctly because the url is pointing to assets/images/nice.jpg
• ✅ When in development and ran without custom server (@hono/vite-plugin-devserver in vite.config.js), it works as well.

Not sure what I have to do, do I manually enable the src/**/* folder static serving during development? Currently, it only serves static for prod:

if (privateConfig.NODE_ENV === "production") {
  app.use(
    "/*",
    serveStatic({
      root: `./dist/client/`,
    })
  );
}

(I will add a minimal reproduction example soon)

[brillout]

This seems to be a bug, maybe a Vite one. A minimal reproduction would be best indeed.

[Blankeos]

False alarm. Not a bug. It's literally just this in the `vite.config.js.

TL;DR; When running a custom server setup with @hono/vite-dev- make sure to exclude png, jpg, webp (static assets) in the devServer plugin.

Reproduction here: https://github.com/Blankeos/mre-image-import-vike-bug

1) For Hono's case this is super easy:

// Hono
import devServer from "@hono/vite-dev-server";

// Vike
import vikeSolid from "vike-solid/vite";
import vike from "vike/plugin";

// Vite
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    devServer({
      entry: "server.ts",

      exclude: [
        /^\/@.+$/,
        /.*\.(ts|tsx|vue)($|\?)/,
        /.*\.(s?css|less)($|\?)/,
        /^\/favicon\.ico$/,
        /.*\.(svg|png|webp)($|\?)/, // ⬅ Make sure to add webp or jpg here!!!!
        /^\/(public|assets|static)\/.+/,
        /^\/node_modules\/.*/,
      ],
    }),
    vike({}),
    vikeSolid(),
  ],
  // ...
});

2) For Manually running vite as a middleware (no vite plugin):

There's actually no need to exclude anymore! Vite does it all for you.

So I'm thinking this is just shenanigans by the @hono/vite-dev-server plugin

[brillout]

FYI we're working on a Vike extension vike-hono which will streamline the integration.

[Blankeos]

Cool.

By the way, just throwing it on the wall, but I think we should have a page in the docs that overviews all the npm packages related to VIke. I think newcomers can just skim through this and easily see what's possible or what pieces of Vike are fragmented across different npm packages.

Something similar to this but with enhanced UI of course: https://www.farmfe.org/docs/plugins/official-plugins/overview or https://trpc.io/docs/community/awesome-trpc

e.g.

Framework Extensions

• vike
• vike-solid

Backend Integrations

• vike-hono
• etc.

[brillout]

It actually already exists (https://vike.dev/extensions) but it was a bit hidden; I've just added it to the menu (734bd72).