Using a Custom Server
Has anyone attempted implementing a custom server for their T3/NextJS project? I have a project currently built on CRA/Express written in JS that I would love to port over to the T3 stack.
However, we will still need support for things such as session based auth (using some middleware like express-session) and web sockets. Both of these requirements seem to lend themselves to using a custom server in a NextJS app. Ideally, we would be able to use Fasitfy, if so.
Curious to hear any thoughts/suggestions.
25 Replies
i don't know much about the next.js custom server here so this might be missing the point, but what is your motivation for not just using a normal fastify backend?
https://trpc.io/docs/fastify
Usage with Fastify | tRPC
Example app
Thanks for the quick reply, @cje! That’s actually the direction we are taking with the project at the moment (still in the proof-of-concept stage), but ideally not having to maintain a monorepo would be awesome. Not having to “reinstall” the server package in the client every time we make a change in the server would be a huge time saver. At the moment, that seems to almost defeat the purpose of using tRPC in the first place, as GraphQL codegen would almost require as many steps and arguably provide more scalability.
I suppose it really boils down to overhead, really. I really dig the elegance of having frontend and backend code in the same NextJS project folder. I so wish that some of these more “complex” requirements would just “work” in vanilla NextJS. But I do understand the limitations and the “why”.
You can get the same real-time typescript magic in a monorepo with for example tRPC living in a Fastify backend and any number of consumers. I’m on my phone right now but iirc there’s some good example projects in the trpc docs
Dope, I will check the example projects again and see if they are configured any differently than ours. Thanks again for the help!
Any luck with setting up a custom server with the t3 stack? I haven't managed to get it working myself
@moloch what part of setting up the custom server are you struggling with?
I seem unable to compile the prodServer is a way that makes both next build and my ts transpiler happy. Either I'm able to run
next build or i'm able to run my transpiler (currently NODE_ENV=production ts-node --project tsconfig.json src/server/prodServer.ts).
the env.mjs is a major hiccup for meOne example of a custom server I’ve seen in this community that I really liked was in this repo: https://github.com/Bartek532/rssmarkable/blob/main/server.ts
GitHub
rssmarkable/server.ts at main · Bartek532/rssmarkable
Open source app for syncing RSS feeds to reMarkable tablet 🔄 - rssmarkable/server.ts at main · Bartek532/rssmarkable
@moloch are you trying to run build and the transpiler at the same time?
no one after another
Thanks a lot I will give this repo a scan
Still struggling with the error that seems to haunt me:
require() of ES Module /dist/src/env.mjs not supported.Are you getting that error when running with ts-node?
Getting that error when running the compiled server.js file after compiling with
tsc --project tsconfig.server.json && tsc-alias -p tsconfig.server.jsonHmm, is typescript compiling the server as commonjs?
final output of the server is .js but the env file stays .mjs
in my tsconfig.server.json do have the module mode set to commonjs
Another thing you could try is something like this: https://stackoverflow.com/questions/65784124/nodejs-import-stuff-from-mjs-file-into-js-file-or-how-to-use-require-in-mjs-fi
Stack Overflow
Nodejs - import stuff from mjs file into js file OR how to use requ...
I am new to JS and Node. From what I been reading it seems like ES6 import is not supported in Node so I am forced to use experiment mode (renaming my file to mjs)
This works for the most part unle...
ESM and CommonJS is always a headache in my experience. I’m pretty sure you’re gonna have to find a way to “require” the env.mjs into your output commonjs server file.
totally a headache! and thanks for all the help 🙂 I'm also noticing that rssmarkable was based on a version of t3 where they still defined the env as .ts files, the more recent versions using .mjs .
Ah, good eye. I’m not sure why the switch was made from .ts to .mjs, but do you think it would be worth rewriting it to be .ts? I’m still trying to find an elegant way of importing mjs files into commonjs.
Definitely looking into it, although I assume there's a (good?) reason the project decided to make the switch
Most likely, yes. I’m checking GitHub for the specific release that made the switch.
Yo @moloch sorry to bug you again– did you say that your server.ts runs fine when transpiling it with ts-node, but breaks when running the compiled server.js file?
No I hit cjs / mjs errors with both
Is your next config file a .js or .mjs file?
currently an .mjs file
wow ok I think I managed to get it working by converting my env to a .ts. One immediate downside is that I cannot directly include it in my next.config.mjs but I think that is just for early detection of invalid / missing .env params
actually it appears that env validation is not working now, but I can live without it for the time being
That’s good to know, thank you for the update! If you’re able to get everything working together, definitely keep the community updated. Having that knowledge would be super useful.
Absolutely will do, and thanks for all your help as well!