Local custom env variables are not being picked up in production and only work locally. | Vite Land | Page 1

prisma sonnet Nov 30, 2022, 1:41 PM

#

I have set some environment variables. so that the production uses a different url to connect to my production api

As you can see in my local environment i can console log and have access to the all the env variables, but in production, my 2 custom variables do not exist only the vite natives ones.

can anyone help here?

my config

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    open: true,
  },
  build: {
    outDir: 'build',
    sourcemap: true,
    commonjsOptions: {
      include: [],
    },
  },
  optimizeDeps: {
    disabled: false,
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: '@testing-library/jest-dom',
    mockReset: true,
  },
});

my client app

export function _app() {
  let backendUrl: string;
  if (import.meta.env.PROD) {
    backendUrl = import.meta.env.VITE_BACKEND_PRODUCTION_URL;
    console.log('local url', import.meta.env.VITE_BACKEND_PRODUCTION_URL);
  } else {
    backendUrl = import.meta.env.VITE_BACKEND_LOCAL_URL;
    console.log('production url', import.meta.env.VITE_BACKEND_LOCAL_URL);
  }

  //   const b = 'https://api.janit.se/api/';
  console.log('vite env object', import.meta.env);

  //   console.log('used url', backendUrl);
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: backendUrl,
        }),
      ],
    })
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </trpc.Provider>
  );
}