UI - Custom Server Root Path (Multiple Fixes) (BerriAI#11337)

* fix(proxy_server.py): working swagger on custom base

removes the swagger monkey patch - this seems to render the swagger on custom base paths

* fix(ui/): working custom auth uptil login success event

* fix(ui/): working custom server root path for login

* fix(proxy_server.py): create typed dict for ui returned token

allows better documentation of expected params

* refactor(proxy_server.py): refactor all ui login endpoints to use same returned ui token object

* feat(ui_sso.py): add server root path to ui token

* feat(ui_sso.py): allows ui to call correct endpoint

* fix(networking.tsx): update proxy base url with custom root path

* fix(networking.tsx): handle updating proxy base url for non-local instances

* refactor: remove uneccessary references to proxybaseurl in ui code - reduce potential for errors

* fix: fix linting error

* fix(onboarding_link.tsx): fix onboarding link when custom server path is set

* feat(ui_discovery_endpoints.py): add new public .well-known/ route for litellm ui config

returns the server root path and proxy base url for constructing api calls

* feat(_types.py): add litellm well known config as public route

allows ui to query it

* fix(/_types.py): add .well-known config to as public route

* fix(page.tsx): create pattern for loading in ui config before making network requests

ensures requests are formatted correctly

* fix(page.tsx): call credential endpoint once ui config is loaded

* fix(page.tsx): route correctly to litellm dashboard from new user login

* fix(page.tsx): remove hardcoded `/litellm` for /sso/key/generate request

* fix(proxy_server.py): re-add moderations endpoint

* fix(proxy_server.py): mount __next__ at / and /litellm

allows it to work when proxy is mounted on root

* docs(contributing.md): remove /ui on ui doc - it will now run on root

* docs(custom_root_ui.md): add docs on custom root path

Author: krrishdholakia

docs/my-website/docs/contributing.md

@@ -33,11 +33,11 @@ cd litellm/ui/litellm-dashboard
 
 npm run dev
 
-# starts on http://0.0.0.0:3000/ui
+# starts on http://0.0.0.0:3000
 ```
 
 ## 3. Go to local UI 
 
-```
-http://0.0.0.0:3000/ui
+```bash
+http://0.0.0.0:3000
 ```

docs/my-website/docs/proxy/custom_root_ui.md

@@ -0,0 +1,59 @@
+# UI - Custom Root Path 
+
+💥 Use this when you want to serve LiteLLM on a custom base url path like `https://localhost:4000/api/v1` 
+
+## Usage
+
+### 1. Set `SERVER_ROOT_PATH` in your .env
+
+👉 Set `SERVER_ROOT_PATH` in your .env and this will be set as your server root path
+
+```
+export SERVER_ROOT_PATH="/api/v1"
+```
+
+### 2. Run the Proxy
+
+```shell
+litellm proxy --config /path/to/config.yaml
+```
+
+After running the proxy you can access it on `http://0.0.0.0:4000/api/v1/` (since we set `SERVER_ROOT_PATH="/api/v1"`)
+
+
+### 3. Reserve the `/litellm` path
+
+LiteLLM uses the `/litellm` path to discover the custom root path. So you need to reserve this path in your proxy.
+
+If you are running the UI, it will query the `/litellm/.well-known/litellm-ui-config` endpoint to get the UI configuration.
+
+So you need to reserve the `/litellm` path in your proxy.
+
+You can see the results with:
+
+```bash
+curl http://0.0.0.0:4000/litellm/.well-known/litellm-ui-config
+```
+
+Expected result:
+
+```json
+
+{
+  "server_root_path": "/api/v1",
+  ...
+}
+
+```
+
+
+### 4. Verify Running on correct path
+
+<Image img={require('../../img/custom_root_path.png')} />
+
+**That's it**, that's all you need to run the proxy on a custom root path
+
+
+## Demo
+
+[Here's a demo video](https://drive.google.com/file/d/1zqAxI0lmzNp7IJH1dxlLuKqX2xi3F_R3/view?usp=sharing) of running the proxy on a custom root path

docs/my-website/docs/proxy/deploy.md

@@ -619,101 +619,8 @@ docker pull ghcr.io/berriai/litellm-non_root:main-stable
 
 ### 1. Custom server root path (Proxy base url)
 
-💥 Use this when you want to serve LiteLLM on a custom base url path like `https://localhost:4000/api/v1` 
+Refer to [Custom Root Path](./custom_root_ui) for more details.
 
-:::info
-
-In a Kubernetes deployment, it's possible to utilize a shared DNS to host multiple applications by modifying the virtual service
-
-:::
-
-Customize the root path to eliminate the need for employing multiple DNS configurations during deployment.
-
-Step 1.
-👉 Set `SERVER_ROOT_PATH` in your .env and this will be set as your server root path
-```
-export SERVER_ROOT_PATH="/api/v1"
-```
-
-**Step 2** (If you want the Proxy Admin UI to work with your root path you need to use this dockerfile)
-- Use the dockerfile below (it uses litellm as a base image)
-- 👉 Set `UI_BASE_PATH=$SERVER_ROOT_PATH/ui` in the Dockerfile, example `UI_BASE_PATH=/api/v1/ui`
-
-Dockerfile
-
-```shell
-# 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
-
-# Copy the UI source into the container
-COPY ./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/v1/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
-
-# Make sure your entrypoint.sh is executable
-RUN chmod +x ./docker/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
-CMD ["--port", "4000", "--config", "config.yaml"]
-```
-
-**Step 3** build this Dockerfile
-
-```shell
-docker build -f Dockerfile -t litellm-prod-build . --progress=plain
-```
-
-**Step 4. Run Proxy with `SERVER_ROOT_PATH` set in your env **
-
-```shell
-docker run \
-    -v $(pwd)/proxy_config.yaml:/app/config.yaml \
-    -p 4000:4000 \
-    -e LITELLM_LOG="DEBUG"\
-    -e SERVER_ROOT_PATH="/api/v1"\
-    -e DATABASE_URL=postgresql://<user>:<password>@<host>:<port>/<dbname> \
-    -e LITELLM_MASTER_KEY="sk-1234"\
-    litellm-prod-build \
-    --config /app/config.yaml
-```
-
-After running the proxy you can access it on `http://0.0.0.0:4000/api/v1/` (since we set `SERVER_ROOT_PATH="/api/v1"`)
-
-**Step 5. Verify Running on correct path**
-
-<Image img={require('../../img/custom_root_path.png')} />
-
-**That's it**, that's all you need to run the proxy on a custom root path
 
 ### 2. SSL Certification 
 

docs/my-website/sidebars.js

@@ -102,6 +102,7 @@ const sidebars = {
           items: [
             "proxy/ui",
             "proxy/admin_ui_sso",
+            "proxy/custom_root_ui",
             "proxy/self_serve",
             "proxy/public_teams",
             "tutorials/scim_litellm",