How to have server: done in vite setup of vinxi

[nikitavoloboev]

I want to move this vite config to vinxi:

import { resolve } from "node:path"
import { defineConfig } from "vite"
import tsconfigPaths from "vite-tsconfig-paths"
import basicSsl from "@vitejs/plugin-basic-ssl"
import { readFileSync } from "node:fs"
import react from "@vitejs/plugin-react"
import { nodePolyfills } from "vite-plugin-node-polyfills"

const local = process.env.LOCAL === "true"

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		// https://github.com/vitejs/vite/discussions/2785 (buffer needed to make ton apis work https://t.me/tonapitech/5193)
		nodePolyfills({
			include: ["path", "stream", "util"],
			exclude: ["http"],
			globals: {
				Buffer: true,
				global: true,
				process: true,
			},
			overrides: {
				fs: "memfs",
			},
			protocolImports: true,
		}),
		// Allows using React dev server along with building a React application with Vite.
		// https://npmjs.com/package/@vitejs/plugin-react-swc
		react(),
		// Allows using the compilerOptions.paths property in tsconfig.json.
		// https://www.npmjs.com/package/vite-tsconfig-paths
		tsconfigPaths(),
		// Allows using self-signed certificates to run the dev server using HTTPS.
		// In case, you have a trusted SSL certificate with a key, you could use the server.https
		// option not to proceed to the untrusted SSL certificate warning.
		// https://www.npmjs.com/package/@vitejs/plugin-basic-ssl
		// basicSsl({
		// 	certDir: resolve("certificates"),
		// 	domains: ["tma.internal"],
		// }),
		...(local !== true
			? [
					basicSsl({
						certDir: resolve("certificates"),
						domains: ["tma.internal"],
					}),
			  ]
			: []),
	],
	server: {
		host: "tma.internal",
		// Uncomment the next lines in case, you would like to run Vite dev server using HTTPS and in
		// case, you have trusted key and certificate. You retrieve your certificate and key
		// using mkcert.
		// Learn more: https://docs.telegram-mini-apps.com/platform/getting-app-link#mkcert
		// https: {
		// 	cert: readFileSync(resolve("certificates/tma.internal.pem")),
		// 	key: readFileSync(resolve("certificates/tma.internal-key.pem")),
		// },
		https:
			local === true
				? {
						cert: readFileSync(resolve("certificates/tma.internal.pem")),
						key: readFileSync(resolve("certificates/tma.internal-key.pem")),
				  }
				: undefined,
	},
	publicDir: "./public",
})

I thought below would work in vinxi:

import { defineConfig } from "@tanstack/start/config"
import tsConfigPaths from "vite-tsconfig-paths"
import { resolve } from "node:path"
import basicSsl from "@vitejs/plugin-basic-ssl"
import { readFileSync } from "node:fs"
import react from "@vitejs/plugin-react"
import { nodePolyfills } from "vite-plugin-node-polyfills"

const local = process.env.LOCAL === "true"

export default defineConfig({
  vite: {
    plugins: () => [
      nodePolyfills({
        include: ["path", "stream", "util"],
        exclude: ["http"],
        globals: {
          Buffer: true,
          global: true,
          process: true,
        },
        overrides: {
          fs: "memfs",
        },
        protocolImports: true,
      }),
      react(),
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
      ...(local !== true
        ? [
            basicSsl({
              certDir: resolve("certificates"),
              domains: ["tma.internal"],
            }),
          ]
        : []),
    ],
    server: {
      host: "tma.internal",
      https:
        local === true
          ? {
              cert: readFileSync(resolve("certificates/tma.internal.pem")),
              key: readFileSync(resolve("certificates/tma.internal-key.pem")),
            }
          : undefined,
    },
    publicDir: "./public",
  },
})

but it's complaining about:

not sure what I can do.

[nikitavoloboev]

Someone on Discord said to do this:

import { defineConfig } from "@tanstack/start/config"
import tsConfigPaths from "vite-tsconfig-paths"
import { resolve } from "node:path"
import basicSsl from "@vitejs/plugin-basic-ssl"
import { readFileSync } from "node:fs"
import react from "@vitejs/plugin-react"
import { nodePolyfills } from "vite-plugin-node-polyfills"

const local = process.env.LOCAL === "true"

export default defineConfig({
  vite: {
    plugins: () => [
      nodePolyfills({
        include: ["path", "stream", "util"],
        exclude: ["http"],
        globals: {
          Buffer: true,
          global: true,
          process: true,
        },
        overrides: {
          fs: "memfs",
        },
        protocolImports: true,
      }),
      react(),
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
      ...(local !== true
        ? [
            basicSsl({
              certDir: resolve("certificates"),
              domains: ["tma.internal"],
            }),
          ]
        : []),
    ],
  },
  server: {
    host: "tma.internal",
    https:
      local === true
        ? {
            cert: readFileSync(resolve("certificates/tma.internal.pem")),
            key: readFileSync(resolve("certificates/tma.internal-key.pem")),
          }
        : undefined,
  },
  publicDir: "./public",
})

and that works but now I get a different error:

[nikitavoloboev]

my repo for reference: https://github.com/nikitavoloboev/new-telegram-app

and vinxi config: https://github.com/nikitavoloboev/new-telegram-app/blob/main/app.config.ts

[kabforks]

I have the exact same setup as you, and I can't get this to work either. I'm also trying to launch a basic vite-app with custom certificates, running on a custom port.

The https-part in createApp() refers to the Nitro-server, it seems. So mixing vinxi-config and the vite-config isn't as easy as the docs can make you believe.