Dockerfile.ui

# Stage 1: Build the app
FROM node:22-alpine AS builder

# Declare build-time arguments that can be passed from the 'docker build' command.
# These names MUST match the keys used in the --build-arg flag.
ARG VITE_PSE_RELAY_SERVER_URL
ARG VITE_IFRAME_HOST
ARG VITE_GNOSIS_PAY_API_BASE_URL
ARG VITE_PSE_APP_ID

# Set these arguments as environment variables for subsequent RUN commands in this stage.
# Vite reads environment variables prefixed with VITE_ during the build.
ENV VITE_PSE_RELAY_SERVER_URL=$VITE_PSE_RELAY_SERVER_URL
ENV VITE_IFRAME_HOST=$VITE_IFRAME_HOST
ENV VITE_GNOSIS_PAY_API_BASE_URL=$VITE_GNOSIS_PAY_API_BASE_URL
ENV VITE_PSE_APP_ID=$VITE_PSE_APP_ID

# Set working directory
WORKDIR /app

# Install pnpm
RUN npm install -g pnpm

# Copy package files and install dependencies
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

# Copy the rest of the source code
COPY . .

# Build the app. This command will now have access to the ENV variables set above.
RUN pnpm build

# Stage 2: Serve with nginx
FROM nginx:alpine

# Copy built files to nginx html directory
COPY --from=builder /app/dist /usr/share/nginx/html

# Copy custom nginx config if needed (optional)
COPY <<EOF /etc/nginx/conf.d/default.conf
server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;

        try_files \$uri /index.html;
    }

    location = /manifest.json {
        add_header 'Access-Control-Allow-Origin' '\*';
        add_header 'Access-Control-Allow-Methods' 'GET';
        add_header 'Access-Control-Allow-Headers' 'X-Requested-With, content-type, Authorization';
        root   /usr/share/nginx/html;
    }

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
EOF

# Expose port 80
EXPOSE 80

# Start nginx
CMD ["nginx", "-g", "daemon off;"]