How do I use App Platform variables in Nginx with a Vite React application?

Hi there,

I believe that you would need to set the scope of the variable to BUILD_TIME and not only run time.

That way the variable will be available during the build process of your Docker image and should be passed to the vite build.

Let me know how it goes!

Best,

Bobby

Hey,

I had a similar problem, and this is what worked for me:

On DigitalOcean App Platform, make sure the environment variables are configured for both run and build time. The scope key should have the value: RUN_AND_BUILD_TIME within the App Spec YAML file.

It’s also important that in the Dockerfile you define the variables for the build as such:

# Environment Variables
ARG VITE_API_URL
ENV VITE_API_URL=$VITE_API_URL

For context, here is my complete Dockerfile:

# Stage 1: Build the React app
FROM node:20.14.0-bullseye AS builder

# Set the working directory in the container
WORKDIR /app

# Copy package.json and yarn.lock (or package-lock.json if using npm)
COPY package.json yarn.lock ./

# Install dependencies
RUN yarn install

# Copy the rest of the application source code
COPY . .

# Environment Variables
ARG VITE_API_URL
ENV VITE_API_URL=$VITE_API_URL

# Build the application for production
RUN yarn build

# Stage 2: Serve the app with Nginx
FROM nginx:stable-alpine

# Copy the built files from the previous stage
COPY --from=builder /app/dist /usr/share/nginx/html

# Copy custom Nginx configuration file
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Expose port 80 to the outside world
EXPOSE 80

# Command to run Nginx
CMD ["nginx", "-g", "daemon off;"]

Lastly, in the vite.config.js (or vite.config.ts if TypeScript is used) file, make sure you don’t point the envDir to anything other than the root of the project (which is the default). That is, don’t include envDir as a key/value pair. I had to remove it for Vite to recognize the variables. Notice how it is commented out in my config below:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: "0.0.0.0",
    hmr: {
      clientPort: 5173
    },
    port: 5173,
    watch: {
      usePolling: true
    }
  },
  //envDir: "./envDir/",
  build: {
    target: 'esnext'
  }
});

I did not need to configure anything in my nginx.conf file, and it is very similar to yours. See mine below for reference:

server {
    listen 80;
    server_name react-test-docker;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

I hope this helps.

Regards, Ryan