Environment Variables in ViteJS Not Available at Build Time on Railway

tklein1801

PRO

10 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;"]