How to import app files in express server file?

[jansedlon]

Hello,

I have a question about importing server files into express server file. The current build process is a two step process. First vite build is generated and the esbuild generates the express server build.

there's currently no way to import files from ~/... because there's no resolution to these files. It all works fine during development but when production build is made, the imported file should reference some file in the build/server directory but that doesn't happen

Example

Let's say that i have a logger file in ~/app/utils/logger.server.ts and i want to import that in server/index.ts. Is there a way to do that? Then there's this vicious cycle of importing more files because logger.server.ts imports env.server.ts, etc.. First issue is that esbuild doesn't recognize imports with tsconfig paths and then it cannot import .ts files. If I include these files in the build-server.ts entrypoints, it basically duplicates the files.

Thanks a lot!

[kentcdodds]

This is not possible due to the build. It's recommended to do as much as possible within the app.

Alternatively, you could switch to a monorepo, then make a package for the shared code. I do this with the Epic Workshop app: https://github.com/epicweb-dev/epicshop

[kiliman]

By the way, my new Vite+Express plugin will let you create your Express app directly from entry.server.tsx, which allows you to use TypeScript, import from your app modules, and support HMR directly.

In addition, it adds support for Unofficial Middleware (currently in preview).

https://github.com/kiliman/remix-express-vite-plugin

[kentcdodds]

Hey! That's awesome! I'm definitely interested in seeing an example of this with the Epic Stack if anyone wants to put something together.

I'm not 100% certain I want to utilize the middleware feature as it's based on an RFC which hasn't had any attention from the team since 2023. Very possible things could have changed in their minds up to now. But yeah, building the express server alongside the rest of the app sounds awesome and I'm definitely interested in seeing a Pull Request if anyone's interested!

[kiliman]

True, but it helps to get real-world use for feedback.

But with that said, the middleware feature is optional. The Vite+Express plugin can be used without it.

[kentcdodds]

I 100% am glad you made it and hope people use it. I just don't feel comfortable recommending it by building it into the stack until:

1. I'm confident it's consistent with the direction of Remix
2. I've used it myself and I'm confident I like it myself.

But yeah, I definitely want to see what the vite+express plugin looks like in the epic stack.

[kiliman]

Totally! It's definitely in a "pre-release" stage.

As for direction, I'm building this mainly because I'd like it for my own applications, and I've seen many people request it. If I can continue doing it in userland, that's fine. I was just waiting for Single Fetch to land.

I should have the plugin example done later today.

[kiliman]

🔥 Here's the preliminary version of my Vite+Express plugin inside Epic Stack

Mainly just copied the contents of server/index.ts to app/express.server.ts and wrapped it inside createExpressApp({ configure }). Then in app/entry.server.tsx, I exported the created app so my expressDevServer plugin can handle it.

To run the app in dev mode, just run npx vite. You can even make changes to your Express app and Vite will HMR.

// app/entry.server.tsx
export { app } from './express.server.ts'

// app/express.server.ts
export const app = createExpressApp({
  configure: app => {
    const getHost = (req: { get: (key: string) => string | undefined }) =>
      req.get('X-Forwarded-Host') ?? req.get('host') ?? ''

    // fly is our proxy
    app.set('trust proxy', true)

    app.use((req, res, next) => {
      const proto = req.get('X-Forwarded-Proto')
      const host = getHost(req)
      if (proto === 'http') {
        res.set('X-Forwarded-Proto', 'https')
        res.redirect(`https://${host}${req.originalUrl}`)
        return
      }
      next()
    })
    // ...
  }
}

[kiliman]

I was also able to get MSW working. I'm still testing though. This stack is actually a pretty good stress test.

[DennisKraaijeveld]

How is this going? Ran into a surprise when setting up Inngest with the Epic Stack. Saw them speaking at Epic Web Conf and its a really cool service! But it does need to be served using Express so I am pretty interested in this plugin you made

[DennisKraaijeveld]

Went back and forth with this. Initially thought this was the way to go, after consideration I thought I made a huge mistake and I simply could call the express.json() middleware for a Remix route (Inngest), but even then Inngest wouldn't work due to some configuration with their Express and Remix package, so went back to using the plugin. Few things:

• Pretty much all is working. From local dev, deployment to Fly and all the tests.
• The playwright mock utils where broken and there is something weird going on there. Finally got it working by fixing some of the paths, but it's not as straightforward anymore like it was.
• Lost source-map-support since the index.js is not being used anymore. Not sure where to put this now.
• Memory leaks using MSW Mock Server. File changes like tests/mocks/utils.ts are not causing a complete server restart anymore and it looks like its setting up extra connections.
• Adding server.listen (msw) to the express.server is also causing issues:

2024-06-03T17:43:23.075 app[2866e31c766318] ams [info] Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'msw' imported from /myapp/build/server/index.js

I think we only need MSW during tests and development? But removing it from the Express server will cause issues as well since it is used by the CI

These are the things which should be tackled before I'd recommend other users, who might need app files import in the Express server, migrate to the plugin. Unfortunately I really can't fix this issues, but I tried my best haha..

@kiliman My two cents. Hopefully you can make good use of it whenever you feel like finishing the Epic Stack example

@

[kiliman]

Thanks for putting it through its paces.

I'm still learning the best way to get Vite plugins to work, so different use cases may need changes.

Do you have a repo showing what you've tried? What worked and what didn't?

That would at least give me a starting point to investigate.

Thanks!

[DennisKraaijeveld]

Sure! I will do that at the end of this week, as I have been working on a private branch so I can't share it right now. But i'll make sure you get an exact replica of the things I have done and tried. Putting as much comments and info at places to help you get up to speed