Dev.to

Remix Vite migration pains

I've been trying to migrate our project Starchart from Classic Remix Compiler to Remix Vite. Upgrade Classic Remix Compiler to Remix Vite #843 uday-rana posted on Feb 20, 2025 WIP References Remix Vite: Migrating How to Fix CJS/ESM Bugs in Remix View on GitHub I started a few weeks ago and then gave up because it was too hard. Our custom server is written in TypeScript and I could not figure out how to get it to build and play nice with the Vite build. All of the official examples write the custom server in JavaScript. Recently I had another go at it and thanks to mihaiandrei97's example setup, which I found the link to in a GitHub discussion, I did manage to get the server to successfully build and unit tests to pass, but the server would fail during end-to-end tests every now and then, even when changing completely unrelated things like the order of our npm scripts in package.json. I also tried the Remix Express Vite plugin and couldn't get it to work either - the server just wouldn't start even though the background services did. I noticed the plugin docs said the createServer property accepts an async function as a callback but the types don't allow it. I filed an issue on the repo to get more info. createExpressApp.createServer does not accept async function as argument #44 uday-rana posted on Apr 08, 2025 Hello, I want to perform some async operations before starting my server: createServer: async (app: Application) => { const port = process.env.PORT || 8080; await services.init() return app.listen(port); }, Based on the README, createExpressApp.createServer should accept async functions as arguments createServer?: async (app: Application) => Server But according to the type definition it doesn't: export type CreateServerFunction = (app: Application) => Server; And instead when trying to pass an async function, I get the error Type '(app: Application) => Promise' is not assignable to type 'CreateServerFunction'. Type 'Promise' is missing the following properties from type 'Server': listen, close, address, getConnections, and 21 more. Are async functions not supported or is the type wrong? View on GitHub So with that ruled out the only solutions I could think of were to either run the server with tsx as mentioned in Remix's blog or to convert our custom server to JavaScript, like their examples. While I wait to hear back from the others on what they think the better approach is, I'm going to switch gears and work on the other issue for this sprint, which is looking into passkey encryption for users' API keys in our other project chatcraft.org. Encrypt users' API keys with passkeys #872 uday-rana posted on Apr 06, 2025 Earlier this week @humphd suggested encrypting users' API keys with passkeys using age-encryption, which will eventually let us store them in the backend. View on GitHub

Apr 8, 2025 - 23:44

I've been trying to migrate our project Starchart from Classic Remix Compiler to Remix Vite.

Upgrade Classic Remix Compiler to Remix Vite #843

uday-rana posted on Feb 20, 2025

WIP

References

Remix Vite: Migrating How to Fix CJS/ESM Bugs in Remix

View on GitHub

I started a few weeks ago and then gave up because it was too hard. Our custom server is written in TypeScript and I could not figure out how to get it to build and play nice with the Vite build. All of the official examples write the custom server in JavaScript.

Recently I had another go at it and thanks to mihaiandrei97's example setup, which I found the link to in a GitHub discussion, I did manage to get the server to successfully build and unit tests to pass, but the server would fail during end-to-end tests every now and then, even when changing completely unrelated things like the order of our npm scripts in package.json.

I also tried the Remix Express Vite plugin and couldn't get it to work either - the server just wouldn't start even though the background services did. I noticed the plugin docs said the createServer property accepts an async function as a callback but the types don't allow it. I filed an issue on the repo to get more info.

createExpressApp.createServer does not accept async function as argument #44

uday-rana posted on Apr 08, 2025

Hello,

I want to perform some async operations before starting my server:

createServer: async (app: Application) => {
    const port = process.env.PORT || 8080;

    await services.init()
    return app.listen(port);
  },

Based on the README, createExpressApp.createServer should accept async functions as arguments

createServer?: async (app: Application) => Server

But according to the type definition it doesn't:

export type CreateServerFunction = (app: Application) => Server;

And instead when trying to pass an async function, I get the error

Type '(app: Application) => Promise>' is not assignable to type 'CreateServerFunction'.
  Type 'Promise>' is missing the following properties from type 'Server': listen, close, address, getConnections, and 21 more.

Are async functions not supported or is the type wrong?

View on GitHub

So with that ruled out the only solutions I could think of were to either run the server with tsx as mentioned in Remix's blog or to convert our custom server to JavaScript, like their examples.

While I wait to hear back from the others on what they think the better approach is, I'm going to switch gears and work on the other issue for this sprint, which is looking into passkey encryption for users' API keys in our other project chatcraft.org.

Encrypt users' API keys with passkeys #872

uday-rana posted on Apr 06, 2025

Earlier this week @humphd suggested encrypting users' API keys with passkeys using age-encryption, which will eventually let us store them in the backend.

View on GitHub