Server build import with particular setup

[alexturpin]

Hey everyone,

Finally adding VPS to my project, and running into issues with the server build import. When I hit a route that the vps middleware should handle, I get:

Error: [@brillout/[email protected]][Wrong Usage] Cannot find server build. (Re-)build your app and try again. If you still get this error, then you may need to manually import the server build, see https://github.com/brillout/vite-plugin-import-build#manual-import

I've read that page and both linked pages but am still a bit unsure on how to best resolve it for my particular setup.

The way my app is setup, I've got a CloudFlare worker in worker.ts (which is just a HatTip server), which is built using esbuild through a Vite plugin. Then, I use Miniflare in the same Vite plugin to run the server and get all the Cloudflare APIs locally.

My Vite plugin that does the esbuild for the server outputs the worker file in config.build.outDir + "/worker.mjs", which was typically dist/worker.mjs. However I notice that when including vps as a Vite plugin, the output becomes dist/client/worker.mjs. I tried making it explicitly both dist/server/worker.mjs and dist/server/index.js but neither seem to get picked up properly by vps.

I've seen that one solution is to manually import it but I'm quite confused as to where I should do that.worker.ts or server.ts (where my HatTip server lives) doesn't seem to make a whole lot of sense as that would basically be a recursive import in a way.

I realize that this setup is pretty specific, but I also know that's one of the strengths of VPS and why I picked it. I'm hoping someone has some suggestions for how I can debug this further. In the meantime I'll see what I can do to create a minimum example that reproduces my problem.

Thank you 🙏

[brillout]

AFAICT it should just work. So that's surprising.

Set the DEBUG flag to true at line 3 of node_modules/@brillout/vite-plugin-import-build/dist/shared/debugLogs.js and let me know what you get.

I tried making it explicitly both dist/server/worker.mjs and dist/server/index.js

Yes: every entry needs it.

but neither seem to get picked up properly by vps.

That's unexpected as well. What error do you get? What's the content of the file dist/server/importBuild.cjs you're importing?

that's one of the strengths of VPS and why I picked it

Most definitely, VPS should be flexible in that regard as well.

[alexturpin]

Thanks for the lightning fast reply, one more reason why this project rocks 🔥

Oh interesting, no importBuild.cjs file is getting generated at all, only worker.mjs (the one I'm building with my esbuild plugin). I hadn't realized that's what needed to be imported, that's likely the culprit... I must be circumventing some Vite thing that generates that with my weird build setup 😅

Definitely sounds like a "me" problem and not VPS, and it sounds like I've got some reading to do on importBuild.cjs. Here's my minimum repro either way, in case you are curious: https://github.com/alexturpin/vps-miniflare/tree/main

[alexturpin]

Oh that's cool didn't know about HatTip/vite!

I want to use Miniflare because it emulates all of the Cloudflare APIs locally, such as KV (kinda like redis), D1 (database), etc. I think that's a big advantage of using Cloudflare, at this point they have APIs for almost everything you could need, from a key value store, queue, database, Cron, etc. all available locally with Miniflare for a seamless DX.

[brillout]

I see. So you actually can't easily reproduce the production environment without Miniflare, correct?

[brillout]

I see. So you actually can't easily reproduce the production environment without Miniflare, correct?

For future readers: that is correct. (We've been PM'ing on Discord.)

We're working on a Miniflare example.

[alexturpin]

I haven't had enough time to play with this this afternoon but will absolutely report back next week when I get it working :) thanks to Rom for all the help!

[brillout]

Looking forward to it. And thanks for the donation!

[alexturpin]

Just to give a small update. The current path I'm attempting is:

1. Remove the cloudflare plugin from vite.config.ts
2. Add the import ../../dist/server/importBuild.cjs to /src/server/worker.ts
3. Apply esbuild directly on /src/server/worker.ts

For now I'm foregoing any HatTip business and just trying to get VPS to run through Miniflare.

So far that hasn't been very successful. With the most basic setup https://github.com/alexturpin/vps-mf, Miniflare balks with Error: Dynamic require of "tty" is not supported which seems to be coming from VPS' picocolors dependency.

[alexturpin]

Yeah killing a few more things from picocolor does get it past those errors.

[alexturpin]

Now I'd be at the point of importing importBuild.cjs but one thing I'm not sure of is... it doesn't seem to be generated in dev right? How should I import it in dev?

[alexturpin]

It is starting to feel more and more like using separate workers would be the best way to make this work canonically with VPS though. Especially seeing as I seem to be the first / only one trying to run VPS through Miniflare.

[brillout]

Now I'd be at the point of importing importBuild.cjs but one thing I'm not sure of is... it doesn't seem to be generated in dev right? How should I import it in dev?

You need importBuild.cjs only for loading the build files at dist/server/. In dev, you don't need importBuild.cjs and instead it's Vite's development server that crawls and dynamically imports the user land files.

So it's either you run $ vite build and import importBuild.cjs, or you instantiate Vite's development server as described here.

It is starting to feel more and more like using separate workers would be the best way to make this work canonically with VPS though.

I believe the question here is whether Vite's development server is able to run in Miniflare? If Miniflare cannot even import tty, then the chances are slim for running Vite in Miniflare.

If Vite can't run in Miniflare and you want Vite's dev DX such as HMR then, yes, you'll have to run Vite separately from Miniflare.

[alexturpin]

Right so I was running Miniflare directly, not through Vite's dev server, as I was understand was one of the suggestions for how to get this working. But indeed it seems like it will be way easier to just run these two things independently, and deploy them as two separate workers.