nksaraf / vinxi

The Full Stack JavaScript SDK
https://vinxi.vercel.app
MIT License
1.86k stars 75 forks source link

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

Open nikitavoloboev opened 3 hours ago

nikitavoloboev commented 3 hours ago

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 commented 3 hours ago

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 commented 3 hours ago

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