Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to have server: done in vite setup of vinxi #385

Open
nikitavoloboev opened this issue Oct 1, 2024 · 3 comments
Open

How to have server: done in vite setup of vinxi #385

nikitavoloboev opened this issue Oct 1, 2024 · 3 comments

Comments

@nikitavoloboev
Copy link

nikitavoloboev commented Oct 1, 2024

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:

CleanShot 2024-10-01 at 12 43 42@2x

not sure what I can do.

@nikitavoloboev
Copy link
Author

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:

image

@nikitavoloboev
Copy link
Author

nikitavoloboev commented Oct 1, 2024

@kabforks
Copy link

kabforks commented Nov 8, 2024

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.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants