[Bug]: docker-based build for UI_BASE_PATH fails

[Jflick58]

What happened?

I followed the instructions from here (with a slight modification since we're running this as part of a different repo): https://github.com/BerriAI/litellm/blob/main/docs/my-website/docs/proxy/deploy.md#advanced-deployment-settings

# Use the provided base image
FROM ghcr.io/berriai/litellm:main-latest

# Set the working directory to /app
WORKDIR /app

# Install Node.js and npm (adjust version as needed)
RUN apt-get update && apt-get install -y nodejs npm

RUN mkdir source

RUN git clone --depth 1 --branch v1.55.4 https://github.com/BerriAI/litellm.git source

# Copy the UI source into the container
RUN cp -r  source/ui/litellm-dashboard /app/ui/litellm-dashboard

# Set an environment variable for UI_BASE_PATH
# This can be overridden at build time
# set UI_BASE_PATH to "<your server root path>/ui"
# 👇👇 Enter your UI_BASE_PATH here
ENV UI_BASE_PATH="/api/v3/ui" 

# Build the UI with the specified UI_BASE_PATH
WORKDIR /app/ui/litellm-dashboard
RUN npm install
RUN UI_BASE_PATH=$UI_BASE_PATH npm run build

# Create the destination directory
RUN mkdir -p /app/litellm/proxy/_experimental/out

# Move the built files to the appropriate location
# Assuming the build output is in ./out directory
RUN rm -rf /app/litellm/proxy/_experimental/out/* && \
    mv ./out/* /app/litellm/proxy/_experimental/out/

# Switch back to the main app directory
WORKDIR /app

COPY requirements.txt .
RUN python -m pip install uv && python -m uv pip install -r requirements.txt
RUN python -m uv pip install 'litellm[proxy]' prisma langfuse

COPY config.yaml . 
COPY deidentify.py .
COPY custom_callbacks.py . 
COPY ca-bundle.pem .
COPY set_secret_vars.py .
COPY entrypoint.sh .
COPY guardrail.py .

# Make sure your entrypoint.sh is executable
RUN chmod +x set_secret_vars.py
RUN chmod +x entrypoint.sh

# Expose the necessary port
EXPOSE 4000/tcp

# Override the CMD instruction with your desired command and arguments
# only use --detailed_debug for debugging
ENTRYPOINT ["./entrypoint.sh"]

Unfortunately this fails at the RUN UI_BASE_PATH=$UI_BASE_PATH npm run build step (see log output below).

I think a better guide and/or allowing the UI to use a runtime env var would be super helpful.

Relevant log output

�[36mINFO�[0m[0281] Running: [/bin/sh -c UI_BASE_PATH=$UI_BASE_PATH npm run build] 

> [email protected] build
> next build

Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

  â–² Next.js 14.2.10
  - Experiments (use with caution):
    · missingSuspenseWithCSRBailout

   Creating an optimized production build ...
�[36mINFO�[0m[0286] Pushed gcr.io/gcp-amfam-ds-research-dev/gen-ai-tools/litellm/cache@sha256:8408cb6a014559bddba980840df3237cb84339c4e1bb707f1507e7735ae04eed 
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
 ✓ Compiled successfully
   Linting and checking validity of types ...

./src/components/cache_dashboard.tsx
99:6  Warning: React Hook useEffect has a missing dependency: 'dateValue'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

./src/components/chat_ui.tsx
152:6  Warning: React Hook useEffect has missing dependencies: 'modelInfo' and 'token'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps

./src/components/create_user_button.tsx
97:6  Warning: React Hook useEffect has missing dependencies: 'accessToken' and 'userID'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps

./src/components/dashboard_default_team.tsx
49:6  Warning: React Hook useEffect has a missing dependency: 'getProxySettings'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

./src/components/edit_user.tsx
38:6  Warning: React Hook useEffect has a missing dependency: 'form'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

./src/components/model_dashboard.tsx
480:6  Warning: React Hook useEffect has missing dependencies: 'dateValue.from', 'dateValue.to', 'selectedModelGroup', and 'updateModelMetrics'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps
912:6  Warning: React Hook useEffect has missing dependencies: 'dateValue.from', 'dateValue.to', 'selectedAPIKey?.token', 'selectedCustomer', 'selectedModelGroup', and 'setModelData'. Either include them or remove the dependency array. If 'setModelData' changes too often, find the parent component that defines it and wrap that definition in useCallback.  react-hooks/exhaustive-deps

./src/components/navbar.tsx
90:15  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element

./src/components/teams.tsx
96:6  Warning: React Hook useEffect has missing dependencies: 'accessToken', 'setTeams', 'userID', and 'userRole'. Either include them or remove the dependency array. If 'setTeams' changes too often, find the parent component that defines it and wrap that definition in useCallback.  react-hooks/exhaustive-deps

./src/components/usage.tsx
215:6  Warning: React Hook useEffect has a missing dependency: 'updateTagSpendData'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
443:6  Warning: React Hook useEffect has missing dependencies: 'fetchGlobalActivity', 'fetchGlobalActivityPerModel', 'fetchOverallSpend', 'fetchProviderSpend', 'fetchProxySettings', 'fetchTagNames', 'fetchTeamSpend', 'fetchTopEndUsers', 'fetchTopKeys', 'fetchTopModels', 'fetchTopTags', and 'proxySettings'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps

./src/components/user_dashboard.tsx
240:6  Warning: React Hook useEffect has missing dependencies: 'defaultTeam', 'setKeys', 'setTeams', 'setUserEmail', 'setUserRole', 'userModels', and 'userSpendData'. Either include them or remove the dependency array. If 'setUserRole' changes too often, find the parent component that defines it and wrap that definition in useCallback.  react-hooks/exhaustive-deps
269:6  Warning: React Hook useEffect has a missing dependency: 'keys'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

./src/components/view_key_table.tsx
180:6  Warning: React Hook useEffect has a missing dependency: 'newExpiryTime'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

./src/components/view_user_spend.tsx
86:6  Warning: React Hook useEffect has a missing dependency: 'userID'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Failed to compile.

./litellm-dashboard/src/components/budgets/budget_settings.tsx:55:57
Type error: Cannot find module 'next/dist/client/components/static-generation-searchparams-bailout-provider' or its corresponding type declarations.

�[0m �[90m 53 |�[39m   �[33mQuestionMarkCircleIcon�[39m�[33m,�[39m�[0m
�[0m �[90m 54 |�[39m } �[36mfrom�[39m �[32m"@heroicons/react/outline"�[39m�[33m;�[39m�[0m
�[0m�[31m�[1m>�[22m�[39m�[90m 55 |�[39m �[36mimport�[39m �[33mStaticGenerationSearchParamsBailoutProvider�[39m �[36mfrom�[39m �[32m"next/dist/client/components/static-generation-searchparams-bailout-provider"�[39m�[33m;�[39m�[0m
�[0m �[90m    |�[39m                                                         �[31m�[1m^�[22m�[39m�[0m
�[0m �[90m 56 |�[39m �[36mimport�[39m �[33mAddFallbacks�[39m �[36mfrom�[39m �[32m"../add_fallbacks"�[39m�[33m;�[39m�[0m
�[0m �[90m 57 |�[39m �[36mimport�[39m openai �[36mfrom�[39m �[32m"openai"�[39m�[33m;�[39m�[0m
�[0m �[90m 58 |�[39m �[36mimport�[39m �[33mParagraph�[39m �[36mfrom�[39m �[32m"antd/es/skeleton/Paragraph"�[39m�[33m;�[39m�[0m
error building image: error building stage: failed to execute command: waiting for process to exit: exit status 1
ERROR
ERROR: build step 0 "gcr.io/kaniko-project/executor:latest" failed: step exited with non-zero status: 1

Are you a ML Ops Team?

No

What LiteLLM version are you on ?

v1.55.4

Twitter / LinkedIn details

https://www.linkedin.com/in/justin-flick-88416b71/