Make paths relative

[mpietruschka]

I tried to make wud run with traefic/reverseproxy under http://ip/wud . Before forwarding the request the path is changed into /.

By trying to load all the resources from http://ip/resources... things fail. The landing page seems to show up as a blank page. The content of the website doesn't show up.

Tha API seems to respond well with the reverseproxy.

Could you please implement a way one could setup a different path than /? Like with relative paths...

https://cli.vuejs.org/config/#publicpath

[fmartinou]

Hi @mpietruschka ,

I am not mistaken, the Vue CLI publicpath option is used at build time (when you now the path where the app will be deployed)

By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'.

What you ask for, is the possibility to deploy wud at any path; I need to do some research to understand how to do that 🤔 .

[mpietruschka]

Hej @fmartinou,

yes your right! I'm trying to make WUD run from another path.

Googling for "vue js relative path" has shown up this posts. They claim that things work, when you set relative paths at buildtime "./" or process.env.BASE_URL.

But I didn't try it myself.

module.exports = {
    publicPath: './'
};

https://stackoverflow.com/a/50388383

module.exports = {
    publicPath: process.env.BASE_URL,
    assetsDir: process.env.BASE_URL
};

https://stackoverflow.com/a/58328766

Heres my docker-composite.yml.

You can access WUD by http://hostname_or_ip/wud/ - The last slash is neccessary ;). Or for testing http://hostname_or_ip:3000.

services:
  reverse-proxy:
    image: traefik:v2.9
    restart: unless-stopped
    labels:
      - "traefik.http.routers.traefik.rule=HostRegexp(`{host:.*}`) && (PathPrefix(`/dashboard`) || PathPrefix(`/api`))"
      - "traefik.http.services.traefik.loadbalancer.server.port=8080"
    # Enables the web UI and tells Traefik to listen to docker
    command: --api.insecure=true --providers.docker
    ports:
      # The HTTP port
      - "80:80"
    volumes:
      - /etc/localtime:/etc/localtime:ro
      - /var/run/docker.sock:/var/run/docker.sock

  whatsupdocker:
    image: fmartinou/whats-up-docker
    labels:
      - "traefik.http.routers.wud.rule=HostRegexp(`{host:.*}`) && PathPrefix(`/wud`)"
      - "traefik.http.routers.wud.middlewares=wud-header,wud-header1,wud-stripprefix"
      - "traefik.http.middlewares.wud-stripprefix.stripprefix.prefixes=/wud/,/"
      - "traefik.http.middlewares.wud-header.headers.customrequestheaders.x-ingress-path=/wud"
      - "traefik.http.middlewares.wud-header1.headers.customrequestheaders.X-External-Path=/wud"
      - "traefik.http.services.wud.loadbalancer.server.port=3000"
    restart: unless-stopped
#    environment:
#      - WUD_PUBLIC_URL=/wud
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    ports:
      - "3000:3000"

I hope this wil help you in any way.

[fmartinou]

Googling for "vue js relative path" has shown up this posts. They claim that things work, when you set relative paths at buildtime "./" or process.env.BASE_URL.

That 'd work for the path you define at build time. But I cannot predict the path you (or any other user) want to deploy wud to 😀 . So these solutions won't work.

Side question; why do you need to rewrite the path? Can't you just let Traefik route to wud using subdomain routing (e.g. https://wud.my-domain.com)? (that's what most users do).

[mpietruschka]

That 'd work for the path you define at build time. But I cannot predict the path you (or any other user) want to deploy wud to 😀 . So these solutions won't work.

Yes thats right. "publicPath"s value is set in the generated Code at build-time. But the set prefix string "./" or process.env.BASE_URL are resolved during runtime. That way it should be unneccessary setting an individual path. The default Value for publicPath is "/". It could even help setting it to an empty string.

Did you try the above example from my compose-file?

Side question; why do you need to rewrite the path? Can't you just let Traefik route to wud using subdomain routing (e.g. https://wud.my-domain.com)? (that's what most users do).

Sure, but my users are not able to change their DNS-Server to make WUD reachable by a subdomains. Espacialy in a local setups. Connecting the server to another networks and having to change the underlaying DNS would add a lot overhead, too.

[fmartinou]

Ho @mpietruschka ,

I set the publicPath property to ''.

Let me know if it solves your issue 😃 .

[fmartinou]

I had to revert it because it breaks the app. The reason is that this option is only viable for simple Vue apps and not for multi-page apps as mentioned in the Vue.js documentation:

So sorry for your use-case but I won't fix it. I guess that a workaround should be possible using pure Reverse-Proxy configuration and path rewriting.

[mpietruschka]

So sorry for your use-case but I won't fix it. I guess that a workaround should be possible using pure Reverse-Proxy configuration and path rewriting.

Thank's for trying.

You can try my example. But pure path rewriting din't work.