Can't run mealie on sub path of domain

[zjean]

Describe the bug
It looks like I can't run mealie on a path in my domain (e.g. domain.com/mealie) since the html is served with paths pointing to the root like:

Steps To Reproduce
Please be specific!

1. Run mealie as a docker container
2. Behind a reverse proxy, on a sub path.
3. Homepage is blank, since the assets can't be found

Sample Code

Expected behavior
I would like to be able to pass a a path in via an environment variable, or

Actual Behavior
Blank home page

Screenshots

Device Information (please complete the following information):

• OS: Linux
• Deployment: Docker-compose latest
• Browser: chrome
• Version: latest released version

Additional context

[dpieski]

with paths pointing to the root like:

Did you mean to include something here after "root like:"?

[zjean]

Yes github stripped my text I think.
The paths pointing to the styles and resources start with a slash, like /static/c.css and such

[hay-kot]

I've looked into implementing this and unfortunately I don't see a way to do it after the frontend is built for production. It should be easy enough to use an ENV on the backend side to set the base path for the API, I'm not sure how to set the Frontend to dynamically know where the "base path" would start. Hopefully someone else can chime in with a solution.

[hay-kot]

Minor Update - I've split the static files and the API with Caddy v2 in the dev branch. I'm not sure if that alone will suffice for getting everything working. But if additional Caddy configuration is needed I believe someone should be able to use env variables in the config to create user selectable base url. I don't have a ton of time/energy to dig too deep into this right now, but I'm hoping someone can bring this over the finish line. 👍

[alexbelgium]

Hi! I'm also looking at doing this. Would the ENV variable "BASE_URL" from mealie can be used for that?

Thanks !

[alexbelgium]

wouldn't simply using ./api/ instead of /api/ in the production wouldn't be enough to allow the api to be accessible from any custom base url ?

[hay-kot]

wouldn't simply using ./api/ instead of /api/ in the production wouldn't be enough to allow the api to be accessible from any custom base url ?

I've tried that as well as a few other variations and it doesn't to work. The Vue router needs know what the base url is and as far a so can tell you can only set that during build time.

[Ravio1i]

Hey, late to the party. Is there any way in the meantime or planned to support serving on a sub path?

[hay-kot]

Happy to support it if someone can find a way to make it work, but I've exhausted all the options I saw and I can't get it to work.

[unsounddabbit]

Could it be run on a subdomain instead of a path? Something like mealie.mydomain.com? I'm using Cloudflare Zero Trust in docker and that points my sub domain (ie, mealie.mydomain.com) to my docker container port. Works like a charm

[lowlyocean]

You don't need a subdomain. If you set up "SUB_PATH" environment variable in your omni docker-compose.yml to something like "/sub-path/" then the UI itself works because of this However, links in emails won't be generated with that sub path, so you have to edit the links manually to include it. Probably that can be fixed somewhere as a pull request.

[Jwiggiff]

I've set the SUB_PATH environment variable in my docker-compose.yml but it still does not seem to work. when I go to my subdirectory it just shows a blank white screen. Do I need to be on the nightly build for this to work?

[protyposis]

Hello @hay-kot, @alexbelgium,

I've been following your discussions about the dynamic sub-path config issue, and I wanted to suggest a potential solution. First, I wanted to confirm whether you're already considering nuxt/nuxt#8520 (added in Nuxt 2.15). I assume that Mealie's UI is statically generated, which makes that feature inapplicable.

If that's the case, I'd like to propose an alternative method that I've successfully used in static apps:

• Define a config file, e.g., runtime-config.json, which includes a path config variable. This file can be optional.

• When the app starts in the client's browser, attempt to fetch this config file from the app's current directory. If the file isn’t found, fall back to a predefined configuration, such as path = "/".

• Start the app with the fetched config. I'm not familiar with Vue or Nuxt, but it seems the path would be used as the base property of the router, as mentioned in both Vue and Nuxt documentation.

With this setup, the app maintains its default behavior while allowing for a custom base path to be set at the proxy layer (like Nginx or Traefik) by mapping a specific runtime-config.json into the app's directory (at the cost of one additional request at startup). For instance, an app served from /subpath/ would fetch /subpath/runtime-config.json and set its configuration accordingly.

[hay-kot]

I assume that Mealie's UI is statically generated, which makes that feature inapplicable.

Correct

Start the app with the fetched config. I'm not familiar with Vue or Nuxt, but it seems the path would be used as the base property of the router, as mentioned in both Vue and Nuxt documentation.

As far as I'm aware these have to be set at build time, but it's been some time since I've looked into it. We don't really consider this a high priority, given the easy work around of using a subdomain. I think we'd support a PR for this, but there would have to be some kind of testing to ensure that both versions work since we don't want to require any more manually testing.

There's also some extra considerations for any links that are generated on the frontend and backend to make sure the URLs are being constructed correctly with the given subpath.

[protyposis]

given the easy work around of using a subdomain

I came here wile looking for a solution for Home Assistant, whose Ingress features seems to require a sub-path (alexbelgium/hassio-addons#1061).

A hacky workaround for the HA Docker container could be building the frontend with a router.base placeholder (SUB_PATH=<subpathplaceholder> npm run generate), and, at each start, create a copy and search-replace all placeholder occurrences with the wanted sub-path.

[krakonos1602]

Hello, I have implemented this workaround using nignx proxy in custom Mealie docker image. It can now run as a HA add-on with ingress support. See @krakonos1602/hassio-addons.

[VitoFe]

A hacky workaround for the HA Docker container could be building the frontend with a router.base placeholder (SUB_PATH=<subpathplaceholder> npm run generate), and, at each start, create a copy and search-replace all placeholder occurrences with the wanted sub-path.

This workaround looks like the best option here imho, in alternative a separate parallel docker image with an hardcoded "mealie" subpath could be provided, as it would be good enough for 99% of people here, me included.

[lhassell]

I believe I am having a related issue. Running mealie via docker and since the new update I have gotten unavailable messages whether trying to access my instance on local subnet (by xxx.xxx.xxx.xxx:9777) or through my reverse proxy/subdomain.

[retnag]

I have found a solution for how to set the SUB_PATH in your docker-compose file. The dockerfile needs to be tweaked, to accept the configuration from docker-compose, but only 2 lines need to be added and nothing else needs to be changed, I think this can be included in the official dockerfile (docker/Dockerfile). Essentially I'm using ARG to pass in the environment variable:

FROM node:16 as builder
ARG SUB_PATH="" # assign a default, which will be used, if no arg is specified
ENV SUB_PATH=$SUB_PATH # this environment var will only exist during docker build time

WORKDIR /app

COPY ./frontend .

RUN yarn install \
    --prefer-offline \
    --frozen-lockfile \
    --non-interactive \
    --production=false \
    # https://github.com/docker/build-push-action/issues/471
    --network-timeout 1000000

RUN yarn generate
# the rest of the file remains unchanged ... 

And my configuration for the service in docker-compose looks like this:

 mealie-frontend:
    build:
      context: ./images/mealie/repo # this points from the docker-compose.yaml to the git repo root
      dockerfile: docker/Dockerfile # the dockerfile modified like above, accepting args
      args:
        - SUB_PATH=/mealie/ # your desired subpath
      tags:
        - mealie-custom-subpath
    restart: always
    # etc. ...

You need to launch docker compose with the --build argument, to automatically build the image, e.g.: docker compose -f /path/to/your/mealie.docker-compose.yml up --build

[alexbelgium]

Ingress is implemented in my addon too now