SolidJS•12mo ago

Use environment variable in defineConfig

I have an .env.local file

VITE_API_HOST=https://test.com/backend

VITE_API_HOST=https://test.com/backend

Before SolidStart 0.4, to define the proxy to this API host, I defined in vite.config.js like so

import solid from "solid-start/vite";
import { defineConfig, loadEnv } from "vite";

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

    return {
        plugins: [
            solid({ ssr: false }),
        ],
        server: {
            proxy: {
                "/backend": {
                    target: env.VITE_API_HOST,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/backend/, ""),
                    secure: false
                },
            },
        },
    };
});

import solid from "solid-start/vite";
import { defineConfig, loadEnv } from "vite";

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

    return {
        plugins: [
            solid({ ssr: false }),
        ],
        server: {
            proxy: {
                "/backend": {
                    target: env.VITE_API_HOST,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/backend/, ""),
                    secure: false
                },
            },
        },
    };
});

Starting from SolidStart 0.4, the callback is no longer used. I tried the following

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
    start: {
        ssr: false,
    },
    server: {
        proxy: {
            "/backend": {
                target: process.env.VITE_API_HOST,
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/backend/, ""),
                secure: false
            },
        },
    },
});

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
    start: {
        ssr: false,
    },
    server: {
        proxy: {
            "/backend": {
                target: process.env.VITE_API_HOST,
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/backend/, ""),
                secure: false
            },
        },
    },
});

But the server can not recognize the process.env.VITE_API_HOST. How can I use environment variables in this case?

3 Replies

Alex Lohr•12mo ago

Since the env file is not automatically parsed into process.env, you need to do it manually. Unfortunately, defineConfig from start does not have a function argument with the mode. I currently have no idea how to solve this.

anhvu0911OP•12mo ago

For now, I use loadEnv

import { defineConfig } from "@solidjs/start/config";
import { loadEnv } from "vite";

const env = loadEnv("all", process.cwd());

export default defineConfig({
    start: {
        ssr: false,
    },
    server: {
        proxy: {
            "/backend": {
                target: env.VITE_API_HOST,
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/backend/, ""),
                secure: false
            },
        },
    },
});

import { defineConfig } from "@solidjs/start/config";
import { loadEnv } from "vite";

const env = loadEnv("all", process.cwd());

export default defineConfig({
    start: {
        ssr: false,
    },
    server: {
        proxy: {
            "/backend": {
                target: env.VITE_API_HOST,
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/backend/, ""),
                secure: false
            },
        },
    },
});

Alex Lohr•12mo ago

Sure, but you cannot use the mode. If that doesn't bother you, that's fine, but I think we should have a better solution in the future.

Gaming

Programming

Use environment variable in defineConfig