Document baseUrl

[discordianfish]

FEATURE REQUEST

I want to use a reverse proxy in front of argo and make it accessible on /argo. This currently leads to breaking all links since argo-ui expects to be ran on /.

I assume it's this setting: https://github.com/argoproj/argo/blob/3a4cd9c4ba46f586a3d26fbe017d4d3002e6b671/ui/src/tsconfig.app.json#L5
And it would be nice if I could override it in an env variable.

Alternatively the tag could be supported: http://www.verdantrefuge.com/writing/2013/angularjs-changing-app-path-base-element/

[alexmt]

Implemented. Now argo installer support --ui-base-href parameter. Default value is '/'

[robertrbruno]

Has anyone successfully used this? I hope I am just doing something wrong. I have the --ui-base-href to /argo/ but when I curl say /argo/main.js (using the actual name of the main.js) it just returns the default index.html. I got further along by making a /argo subdir under /app/app. The ui renders but now the /argo/api/workflows won't resolve. Again hopefully I am doing something wrong.

[eLco]

Setting base url not working for me, too. Seems like this functionality was broken during migration to another repo and refactoring :( @alexmt please help.

[discordianfish]

Yeah, just tried it and can confirm @eLco: Looks like it's not working (anymore?).

[discordianfish]

Looks like the change only changes the references on the js side but not the path under which the http server provides the assets.

[alexmt]

Tried to reproduce issue with following steps :

• run argo ui with --uiBaseHref set to /argo/
• run reverse proxy which forward requests from http://<proxy>/argo to http://<argo>/
• access UI via http://<proxy>/argo

Noticed that UI is working as expected only if uiBaseHref has trailing slashes (e.g. /argo/ but /argo does not ) . Updating code to automatically set slashes.

@eLco , @discordianfish can you please try adding trailing slashes?

[alexmt]

Thanks to @andreyvelich for debugging it. Looks like there are two issues:

• --uiBaseHref parameter does not work unless value has trailing slashes. this has to be improved
• the --uiBaseHref only updates base url on client side . It was expected that proxy server rewrite URL and get rid of prefix. If proxy sends request as is the server returns index.html. UI doesn't show meaningful error message in this case. This should be improved as well. We should not change --uiBaseHref behavior since someone might already use it. Instead lets introduce --site-prefix parameter which changes both base href on client side and add prefix on server

[discordianfish]

@alexmt Ah, thanks for clarification! I just didn't realize that I need to strip the request path. I've got it working behind an ingress with path /argo with this annotation: nginx.ingress.kubernetes.io/rewrite-target: "/" after setting uiBaseHref to /argo/.
So this here is IMO mostly a documentation issue.

[eLco]

@alexmt thank you for quick response and explanation, @andreyvelich fixed my issue with Ambassador and Argo UI in Kubeflow project with kubeflow/kubeflow#1865

[carlosjgp]

Relates to PRs
argoproj/argo-helm#216
argoproj/argo-helm#243 (duplicated ☝️ )

[yuvraj9]

Any updates here?
I have

       - name: **BASE_HREF**
          value: /argo/

And in my nginx ingress file I have - rewrite target to - / and my path is /argo.

I am getting a blank page when I route to - xxx.com/argo. When I open the network tag I get this error = Uncaught SyntaxError: Unexpected token '<'

[AleksanderGondek]

@yuvraj9 I do not know if this is still relevant, but.. try /argo/ with slash at the end. Should do the trick. :)

[damianoneill]

Guys I've tried above with the following config

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: argo-ingress
  namespace: argo
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/force-ssl-redirect: "true"
    nginx.ingress.kubernetes.io/ssl-passthrough: "true"
    nginx.ingress.kubernetes.io/rewrite-target: "/"
spec:
  rules:
  - http:
      paths:
      - path: /argo 
        backend:
          serviceName: argo-server
          servicePort: 2746

In the deployment

Pod Template:
  Labels:           app=argo-server
  Service Account:  argo-server
  Containers:
   argo-server:
    Image:      argoproj/argocli:v2.8.2
    Port:       2746/TCP
    Host Port:  0/TCP
    Args:
      server
    Readiness:  http-get http://:2746/ delay=10s timeout=1s period=20s #success=1 #failure=3
    Environment:
      BASE_HREF:  /argo/
    Mounts:       <none>
  Volumes:        <none>

Looking at the logs for the argo-server I can see that the href has been set correctly.

09:23 # kubectl logs -n argo argo-server-567b4c8b4-5lbfr
time="2020-07-02T09:07:40Z" level=info authMode=server baseHRef=/argo/ managedNamespace= namespace=argo secure=false
time="2020-07-02T09:07:40Z" level=warning msg="You are running in insecure mode. Learn how to enable transport layer security: https://github.com/argoproj/argo/blob/master/docs/tls.md"
time="2020-07-02T09:07:40Z" level=info msg="config map" name=workflow-controller-configmap
time="2020-07-02T09:07:40Z" level=info msg="Starting Argo Server" version=2.8.2+8a151ae.dirty
time="2020-07-02T09:07:40Z" level=info msg="Argo Server started successfully on http://localhost:2746"

With the ingress path mapped to the correct backend

09:26 # kubectl -n argo describe ingress argo-ingress
Name:             argo-ingress
Namespace:        argo
Address:          localhost
Default backend:  default-http-backend:80 (<error: endpoints "default-http-backend" not found>)
Rules:
  Host        Path  Backends
  ----        ----  --------
  *
              /argo   argo-server:2746 (10.244.0.56:2746)
Annotations:  kubernetes.io/ingress.class: nginx
              nginx.ingress.kubernetes.io/rewrite-target: /
Events:
  Type    Reason  Age                  From                      Message
  ----    ------  ----                 ----                      -------
  Normal  UPDATE  23m (x5 over 2d21h)  nginx-ingress-controller  Ingress argo/argo-ingress

When I hit the url I get the following

10:24 $ curl --insecure https://xxx.xxx.xxx/argo
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Argo</title>
    <base href="/argo/">
    <link href="https://fonts.googleapis.com/css?family=Heebo:300,400,500,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex">
    <link rel="icon" type="image/png" href="assets/favicon/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="assets/favicon/favicon-16x16.png" sizes="16x16">
</head>

<body>
    <div id="app"></div>
<script type="text/javascript" src="main.f695bd97cdc8c6e16c91.js"></script></body>

</html>

Which shows a blank page.

Any help much appreciated.

[AleksanderGondek]

@damianoneill

I would assume that browser console, will show you error message about unexpected "<" character.
What helped me, was typing https://xxx.xxx.xxx/argo/ (notice the / at the end).
I hope this will help you :)

[damianoneill]

Thanks @AleksanderGondek for the response

I had already tried the URL with the trailing / unfortunately, this made no difference. The same page source in the curl message above was returned.

[AleksanderGondek]

If I may suggest a way of debuging - curl for https://xxx.xxx.xxx/argo/main.f695bd97cdc8c6e16c91.js.
I think the reason the website is not loading, is due to html file being loaded instead of javascript file.
If the link for the js file is working in curl, I would try cleaning browser cache and hard-reloading website.

[damianoneill]

Thanks.

Yeah, the js file is redirecting to the html file, rather than retrieving the javascript.

# curl --insecure https://xxx.xxx.xxx/argo/main.f695bd97cdc8c6e16c91.js
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Argo</title>
    <base href="/argo/">
    <link href="https://fonts.googleapis.com/css?family=Heebo:300,400,500,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex">
    <link rel="icon" type="image/png" href="assets/favicon/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="assets/favicon/favicon-16x16.png" sizes="16x16">
</head>

<body>
    <div id="app"></div>
<script type="text/javascript" src="main.f695bd97cdc8c6e16c91.js"></script></body>

</html>

[AleksanderGondek]

I am not sure this will help, but my functioning deployment has a nginx-ingress rewrite defined differently:

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$2
  name: argo-ingress
  namespace: argo
spec:
  rules:
  - host: "host.name.xyz"
    http:
      paths:
      - backend:
          serviceName: argo-server
          servicePort: 2746
        path: /argo(/|$)(.*)

[damianoneill]

Thanks @AleksanderGondek that worked perfectly.

[alexec]

See #3080

[Fran-Rg]

I was stuck on this for a moment, the home page was returning HTTP 304 "Not modified" where it had been modified. A hard refresh fixed it. Something to be aware