Environment Variables in ViteJS Not Available at Build Time on Railway

tklein1801PRO

5 months ago

Hi everyone,

I’m facing an issue with my React application built using ViteJS and deployed on Railway. During the deployment pipeline on Railway, a Docker image is built, which is then used to serve the application.

The problem: The environment variables defined in my vite.config.ts are not available during the build process. Since this is a static site, these variables need to be available at build time.

Does anyone have a solution or workaround for this?

Thanks in advance! 😊

vite.config.ts

import "dotenv/config"
import react from '@vitejs/plugin-react-swc';
import path from 'path';
import {defineConfig} from 'vite';
import {ViteEjsPlugin} from 'vite-plugin-ejs';

// import dns from 'dns';

// Due to https://stackoverflow.com/a/75191787
// dns.setDefaultResultOrder('verbatim');

const production = process.env.NODE_ENV === 'production';
const SHOW_ENVIRONMENT_DISCLAIMER = process.env.SHOW_ENVIRONMENT_DISCLAIMER || 'false';
const STOCK_SERVICE_HOST = process.env.STOCK_SERVICE_HOST || 'http://localhost:7080';
const MAIL_SERVICE_HOST = process.env.MAIL_SERVICE_HOST || 'https://localhost:7070';
const POCKETBASE_URL = process.env.POCKETBASE_URL || 'https://localhost:7060';

// https://vitejs.dev/config/
export default defineConfig({
  // https://github.com/vitejs/vite/issues/1973#issuecomment-787571499
  define: {
    'process.env': {
      SHOW_ENVIRONMENT_DISCLAIMER: SHOW_ENVIRONMENT_DISCLAIMER,
      STOCK_SERVICE_HOST: STOCK_SERVICE_HOST,
      MAIL_SERVICE_HOST: MAIL_SERVICE_HOST,
      POCKETBASE_URL: POCKETBASE_URL,
      NODE_ENV: process.env.NODE_ENV
    },
  },
  server: {
    open: true,
    host: 'localhost',
    port: 3000,
    proxy: production
      ? undefined
      : {
          '/stock_service': {
            target: STOCK_SERVICE_HOST,
            changeOrigin: true,
            rewrite: path => path.replace('/stock_service', ''),
          },
          '/mail_service': {
            target: MAIL_SERVICE_HOST,
            changeOrigin: true,
            rewrite: path => path.replace('/mail_service', ''),
          },
          // "/socket": {
          //   target: "http://localhost:7070",
          //   changeOrigin: true,
          //   ws: true,
          //   rewrite: (path) => path.replace("/socket", ""),
          // },
        },
  },
  resolve: {
    alias: [{find: '@', replacement: path.resolve(__dirname, 'src')}],
  },
  build: {
    outDir: 'dist',
  },
  plugins: [
    react(),
    ViteEjsPlugin(config => {
      return {
        ...config,
        isProd: config.mode === 'production',
      };
    }),
  ],
});

Dockerfile

FROM node:20-alpine AS build

# Set config
ENV NPM_CONFIG_UPDATE_NOTIFIER=false
ENV NPM_CONFIG_FUND=false

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

ENV NODE_ENV production

RUN npm run build

FROM nginx:1.21.1-alpine

COPY --from=build /app/dist /usr/share/nginx/html

COPY nginx/nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
Solved

0 Replies

tklein1801PRO

5 months ago

8674d031-2d42-49d5-b756-bcc2cfcc2b47


5 months ago

hello,

please see these docs -


tklein1801PRO

4 months ago

ty


tklein1801PRO

4 months ago

ty


4 months ago

!s


Status changed to Solved brody • 5 months ago