#Vite for backend with express and typescript

1 messages · Page 1 of 1 (latest)

obsidian ridge
#

I am trying to follow the backend-integration in the docs but with typescript instead of js. Not sure where I'm going wrong.

I'm looking to serve code using a express server. I would like the dev server to be able to serve html and ts files on endpoints and also be able to build for production so it can run with something like node main.js without any other dependencies installed like node_modules. The built files in dist should be entirely self contained.

Besides this

(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.

I couldn't find any other messages in the terminal. Not sure why this exists even though the input in rollupOptions is specified.

MWE.

Thank you for any help that you can provide.

Vite

Next Generation Frontend Tooling

#

Here are the changed files from the vanilla-ts example.

vite.config.ts

import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
    build: {
        manifest: true,
        rollupOptions: {
            input: resolve(__dirname, '/src/server/index.ts'),
        },
    },
})

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <!-- if development -->
    <script type="module" src="http://localhost:5173/@vite/client"></script>
    <script type="module" src="http://localhost:5173/src/server/main.ts"></script>
  </body>
</html>

index.ts

import 'vite/modulepreload-polyfill';
import express, { Request, Response } from 'express';
import { createServer } from 'node:http';

const app = express();
const port = 8080;
const server = createServer(app);

app.get('/', (_req: Request, res: Response) => {
  // res.sendFile("./index.html");
  res.send('test');
});

server.listen(port, () => {
  console.log(`Snake game server listening on port ${port}`);
});

package.json

{
  "name": "vite-typescript-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@types/express": "^4.17.21",
    "cors": "^2.8.5",
    "express": "^4.19.2",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}
stray parcel
desert needle
#

I think one of us misunderstands what "backend integration" means. Specifically, it looks like you're rollup input is the server index. Whereas I think it's meant to be the client code. The documentation you linked to basically means you're hosting a static HTML file, and have a backend server that is hosting other compiled assets for the client. The server (express) itself, is not the thing expected to be served to the front end HTML file. Essentially, that example is showing how to bypass Vite's default behavior of using index.html as the root entry point, and then how to optionally wire up everything Vite would do automatically if it were allowed to transform the html file.

#

Also, your rollup input is an absolute path starting with /src, which I'm betting is not correct. I see that the documentation uses an example path that is absolute. And yours probably should be to, but unless you have /src at the root of your filesystem, you're missing a step for resolving a local ./src path into the actual absolute path.

#

Also, <script type="module" src="http://localhost:5173/src/server/main.ts"> and input: '/src/server/index.ts', don't appear to point to the same thing.

#

Neither of which should be the express server, as mentioned above.

obsidian ridge
obsidian ridge
obsidian ridge
desert needle
#

Can you describe exactly the pattern you want?

obsidian ridge
#

I am trying to use express to serve an html file that references a .ts file in it's script tag.

I am trying to use vite to both process the referenced .ts file in the served html as well as
run the file that has express in it.

Vite build would also need to build the entire thing as well.