S
SolidJS•4d ago
chasingtheflow

How to set up a vite dev proxy with Start and Vinxi?

I am trying to figure out how to migrate a dev proxy for api requests in solidstart. I have a working config just for a normal solidjs app which looks like the following in vite.config.ts 
import { defineConfig, loadEnv } from "vite";
import solidPlugin from "vite-plugin-solid";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return {
    plugins: [solidPlugin()],
    server: {
      port: 3000,
      proxy: {
        "/api": {
          target: env.SN_URL,
          changeOrigin: true,
          configure: (proxy, options) => {
            proxy.on("proxyReq", (proxyReq) => {
              const username = env.SN_UN;
              const password = env.SN_PW;
              const authString = Buffer.from(
                `${username}:${password}`,
              ).toString("base64");
              proxyReq.setHeader("Authorization", `Basic ${authString}`);
            });
          },
        },
      },
    },
    build: {
      target: "esnext",
    },
  };
});
import { defineConfig, loadEnv } from "vite";
import solidPlugin from "vite-plugin-solid";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return {
    plugins: [solidPlugin()],
    server: {
      port: 3000,
      proxy: {
        "/api": {
          target: env.SN_URL,
          changeOrigin: true,
          configure: (proxy, options) => {
            proxy.on("proxyReq", (proxyReq) => {
              const username = env.SN_UN;
              const password = env.SN_PW;
              const authString = Buffer.from(
                `${username}:${password}`,
              ).toString("base64");
              proxyReq.setHeader("Authorization", `Basic ${authString}`);
            });
          },
        },
      },
    },
    build: {
      target: "esnext",
    },
  };
});
and I'm trying to figure out how to modify the app.config.ts file provided by Start to do something similar. Right now my starter file looks like this: 
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  vite: {
    ssr: { external: ["drizzle-orm"] },
  },
});
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  vite: {
    ssr: { external: ["drizzle-orm"] },
  },
});
2 Replies
oke
oke•4d ago
I believe you can just copy your entire Vite config to the vite key in your app.config.ts
chasingtheflow
chasingtheflowOP•4d ago
yeah, the aspect that confused me was the existence of mode and the function accepting an object instead of a function. But yes in general it seems that entire server section needs to go in and I need to get the env through another method. thank you!

Did you find this page helpful?