Can't access flow directly by link

[amomra]

Bug Description

When you try to access a flow using it's URL (ex. http://localhost:55650/flow/0b95342f-6ce4-43d0-9d60-c28bf66a3781), the page doesn't load and in the browser's console is shown the following message: Uncaught SyntaxError: Unexpected token '<' (at index-DK9323ab.js:1:1). I think that this problem is related to #1182 .

Navegating through the main page to access this flow works fine. If I reload the page, it doesn't load as described before.

Reproduction

1. Run the Docker image langflowui/langflow
2. Open the langflow main page
3. Creates a new flow
4. Copy the flow link into a new tab or just reload the page

Expected behavior

To open the flow editor page.

Who can help?

No response

Operating System

Docker image (langflowai/langflow) running in K8s

Langflow Version

1.0.19

Python Version

None

Screenshot

Instead of loading the JS file, is loaded the HTML file as shown in the following picture:

All requests in this image loads the same HTML.

Flow File

No response

[dosubot[bot]]

Hey @amomra! I'm here to help you with any bugs, questions, or contributions. Let's tackle this together!

This issue seems related to a previously closed issue about a blank page or broken UI when accessing specific URLs directly ^[1]. The problem might be due to incorrect MIME types being served for JavaScript files, which can cause the browser to misinterpret the file contents.

A solution that worked for a similar issue involved editing the Windows registry to change the Content Type for .js files to application/javascript. However, since you're running this in a Docker environment, you might want to ensure that the server is correctly setting the Content-Type header for JavaScript files. Langflow uses a middleware named JavaScriptMIMETypeMiddleware to handle this by setting the Content-Type to text/javascript for .js files ^[2].

Additionally, ensure that the routing is correctly set up to handle direct access to specific flow URLs. Langflow uses react-router-dom for routing, and the route for accessing a specific flow is defined with path parameters ^[3]. Make sure that the server is configured to serve the correct files and that the client-side routing is not being bypassed when accessing URLs directly.

To continue talking to Dosu, mention @dosu.

[irshadmb]

Looks Like it has been fixed in latest. I cross checked latest build its working.

[amomra]

@irshadmb I tested the latest tag from langflowai/langflow image and the problem still persists. Here is my config environment variables:

LANGFLOW_DATABASE_URL=postgresql://postgres:[email protected]:5432/langflow
LANGFLOW_AUTO_LOGIN=true
LANGFLOW_SUPERUSER=admin
LANGFLOW_SUPERUSER_PASSWORD=admin
LANGFLOW_NEW_USER_IS_ACTIVE=true
LANGFLOW_DO_NOT_TRACK=true
LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT=AZURE_OPENAI_API_DEPLOYMENT_NAME,AZURE_OPENAI_API_EMBEDDINGS_DEPLOYMENT_NAME,AZURE_OPENAI_API_KEY,AZURE_OPENAI_API_VERSION,AZURE_OPENAI_API_ENDPOINT

Here is the deployment YAML that I used to deploy on our Kubernetes cluster (the langflow-config secret contains the environment variables mentioned before):

apiVersion: apps/v1
kind: StatefulSet
metadata:
  name: langflow
  namespace: langflow
spec:
  selector:
    matchLabels:
      app: langflow
  serviceName: langflow
  replicas: 1
  template:
    metadata:
      labels:
        app: langflow
    spec:
      containers:
      - name: langflow
        image: langflowai/langflow:latest
        ports:
        - containerPort: 7860
          name: web
        envFrom:
        - secretRef:
            name: langflow-config
        volumeMounts:
        - name: langflow-data
          mountPath: /app/langflow
  volumeClaimTemplates:
  - metadata:
      name: langflow-data
    spec:
      accessModes: [ "ReadWriteOnce" ]
      resources:
        requests:
          storage: 1Gi
---
apiVersion: v1
kind: Service
metadata:
  name: langflow-service
  namespace: langflow
spec:
  selector:
    app: langflow
  ports:
  - port: 80
    targetPort: 7860

I have an ingress configured for this service but the problem still happens without it (through service port forward).

[irshadmb]

@amomra I am referring to latest code base. It will be available in upcoming release.

[irshadmb]

@amomra today v1.1.0 is released. Please cross check and let us know.

[amomra]

@irshadmb thanks for the info. I can't test because I'm having the problem related in #4572.

[carlosrcoelho]

@amomra

Do you need any assistance with this case? If not, please let us know if this issue can be closed.

[joaoguilhermeS]

Hi @amomra, this was fixed in the latest langflow docker images, you can refer to them by using the nightly tag, for example: langflowai/langflow-nightly:v1.1.0.dev5 (I have tested with this one, and it seems to be working just fine).

[amomra]

@joaoguilhermeS I confirmed that this problem was fixed. Thanks!