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;"]
0 Replies
5 months ago
hello,
please see these docs -
4 months ago
!s
Status changed to Solved brody • 5 months ago