Why is server file is not a TS file when the typescript express template is selected ?

[noiseymur]

I want to use typescript in every part of the project, not just inside the app folder. When we create the directory with express template while selecting typescript, server file is a JS file. I wanted to convert it to TS but then the dev command doesn't work, because it needs to be compiled to JS. and idk how to do that with the TS config file. Does anyone have an example ?

[kiliman]

Rename the sever.js to server.ts

Update tsconfig.json
https://www.totaltypescript.com/concepts/option-module-must-be-set-to-nodenext-when-option-moduleresolution-is-set-to-nodenext

{
    "module": "NodeNext",
    "moduleResolution": "Bundler",
}

Install tsx package

npm install tsx

Update package.json

  "scripts": {
    "dev": "remix dev --manual -c \"tsx ./server.ts\"",
    "start": "cross-env NODE_ENV=production tsx ./server.ts",
  },

[noiseymur]

Thanks a lot!

[rajprashanthr]

Only minor problem with this is, moduleResolution is not allowed to have 'Bundler' when module is 'NodeNext'. It forces to keep moduleResolution also as 'NodeNext' which leads to forcing import paths to have file extension in it. If there was a way out to it, it’ll be great

[rajprashanthr]

The latest update to 'remix + express' template from Remix uses vite inside the server.js file.
With this, I didn't change the 'module' & 'moduleResolution' in the tsconfig.json.

• I renamed the server.js to server.ts
• changed the package.json as

  "scripts": {
    "dev": "tsx watch --ignore './vite.config.ts*' ./server.ts",
    "start": "cross-env NODE_ENV=production tsx ./server.ts",`
  },

• imported a test ts file called init.ts in the server.ts (with test endpoint in it) and server hot reloads on change to those

The reason I had to ignore './vite.config.ts*' from 'tsx watch' is,
that when I initially tried without it, a file named vite.config.ts.timestamp-***.mjs was getting created for some internal purpose. Due to this, the server kept restarting in an infinite loop. So, ignoring that file from 'tsx watch' solved it.

It has started to work well for me. I have to see if it continues.

[kiliman]

I created a Vite plugin that lets you use Express for development and production entirely in TypeScript. No special build steps. It's all handled automatically by Vite and Remix.

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