Setting BASE_URL for Subdirectory Hosting (e.g., /flagsmith-frontend)

[Bear1110]

How are you running Flagsmith

• Self Hosted with Docker
• Self Hosted with Kubernetes
• SaaS at flagsmith.com
• Some other way (add details in description below)

Describe the bug

I’m trying to host the application under a subdirectory, specifically https://example.com/flagsmith-frontend, and I’ve followed the documentation for setting the BASE_URL environment variable. Here’s what I’ve attempted so far:

BASE_URL values tried: /flagsmith-frontend or https://example.com/flagsmith-frontend.
Expected behavior: Routes should work with the /flagsmith-frontend https://example.com/flagsmith-frontend subdirectory automatically prefixed, allowing the application to function seamlessly.
Actual behavior: Routes and assets fail to load correctly when accessed via this subdirectory, regardless of BASE_URL settings.

I also tried ASSET_URL, it does not work, either.

It seems that BASE_URL may not fully account for hosting in a subdirectory environment. Any guidance on achieving this configuration, or confirmation if this is a limitation, would be greatly appreciated!

Thank you for your help!

this is my deployment yaml which is generated from helm by https://github.com/Flagsmith/flagsmith-charts (( manually edit BASE_URL and ASSET_URL

---
# Source: flagsmith/templates/deployment-frontend.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-flagsmith
  labels:
    helm.sh/chart: flagsmith-0.59.1
    app.kubernetes.io/name: flagsmith
    app.kubernetes.io/instance: my-flagsmith
    app.kubernetes.io/version: "2.142.0"
    app.kubernetes.io/managed-by: Helm
    app.kubernetes.io/component: frontend
spec:
  selector:
    matchbels:
      app.kubernetes.io/name: flagsmith
      app.kubernetes.io/instance: my-flagsmith
      app.kubernetes.io/component: frontend
  replicas: 1
  template:
    metadata:
      labels:
        app.kubernetes.io/name: flagsmith
        app.kubernetes.io/instance: my-flagsmith
        app.kubernetes.io/component: frontend
    spec:
      securityContext:
        {}
      containers:
      - name: flagsmith-frontend
        image: flagsmith.docker.scarf.sh/flagsmith/flagsmith-frontend:2.142.0
        imagePullPolicy: IfNotPresent
        ports:
        - containerPort: 8080
        env:
        - name: ASSET_URL
          value: /flagsmith-frontend/
        - name: PROXY_API_URL
          value: http://my-flagsmith-api.group-example:8000
        - name: FLAGSMITH_PROXY_API_URL
          value: http://my-flagsmith-api.group-example:8000
        - name: BASE_URL
          value: /flagsmith-frontend/
        livenessProbe:
          failureThreshold: 20
          httpGet:
            path: /health
            port: 8080
            scheme: HTTP
          initialDelaySeconds: 20
          periodSeconds: 10
          successThreshold: 1
          timeoutSeconds: 10
        readinessProbe:
          failureThreshold: 20
          httpGet:
            path: /health
            port: 8080
            scheme: HTTP
          initialDelaySeconds: 20
          periodSeconds: 10
          successThreshold: 1
          timeoutSeconds: 10
        resources:
          {}
      volumes:

Steps To Reproduce

1. set BASE_URL environment variable to /flagsmith-frontend
2. Go to https://example.com/flagsmith-frontend
3. Got error page, screenshots is below

Expected behavior

Routes should work with the /flagsmith-frontend https://example.com/flagsmith-frontend subdirectory automatically prefixed, allowing the application to function seamlessly.

Screenshots

[matthewelwell]

Hi @Bear1110 , thanks for raising this - we'll take a look and get back to you.

[matthewelwell]

@Bear1110 can you confirm if you're running the API and frontend separately or not? i.e. what is the value of api.separateApiAndFrontend in your chart values?

[Bear1110]

Hi @matthewelwell, the default value of api.separateApiAndFrontend is true. Based on my understanding, the YAML I posted was generated with this default value in mind.

I consulted a friend who is knowledgeable about frontend technologies, and he mentioned that the BASE_URL value is primarily used by the frontend framework (e.g., Next.js) during the build process, rather than for deployment purposes. However, I’m not entirely sure if this perspective is accurate.

What do you think? Could you clarify if this interpretation is correct?

[kyle-ssg]

I don't think there's a straight forward approach to this from a frontend perspective, various paths to static resources are absolute e.g. /static/logo.png since the single page app could be rendering from any URL e.g. / and /environments/:sub-page/. Webpack wouldn't reliably be able to compile these down to use a specified url. Setting up some form of redirects may work however.