Mini dashboard does not work on meilisearch running on sub routes

Description see issue

The mini dashboard only works when MeiliSearch is running at the root of it’s domain. For example if the instance is hosted here http://mymeili.com then the dashboard will show correctly

If for example the dashboard is in a sub route like http://myapp.com/api then the mini dashboard does not show up.

For example http://104.248.162.211/api/. It is a white page. But if you curl on the same URL

➜  ~ curl http://104.248.162.211/api/health
{"status":"available"}%

Meaning that while the mini dashboard does not show up, meilisearch is still running correctly.

The problematic line is this one in src/App.js:

export const baseUrl =
  process.env.REACT_APP_MEILI_SERVER_ADDRESS ||
  (process.env.NODE_ENV === 'development'
    ? 'http://0.0.0.0:7700'
    : window.location.origin)

window.location.origin takes the root of the domain whereas href takes the current position:

On this page for example

The problem with changing to href is that now the mini dashboard is accessible on every sub-route on not only the root of the meilisearch instance.

example nginx config to reproduce:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name _;

    location /api/ { # trailing slash is important
        proxy_pass http://127.0.0.1:7700/; # trailing slash is important
    }
}

Expected behavior The mini dashboard should show up at the root of where meilisearch is running

Current behavior It only works when meilisearch is at the root

Environment (please complete the following information):

• Meilisearch version: v0.25.2

[urbantrout]

I have adopted @firstred’s answer for nginx:

location /search {
  rewrite /search/(.*) /$1 break;
  proxy_pass http://127.0.0.1:7700;
}

location / {
  if ($http_referer ~* ^.*/search/.*$ ) {
    proxy_pass  http://127.0.0.1:7700;
  }
}

[firstred]

Not sure yet what the nginx equivalent is, but I managed to solve the problem with Caddy by matching the Referer header. If the request’s Referer header contains /search/, it will strip /search from the path and effectively serve css js etc. from root.

route {
  ##### Ensure trailing slash
  redir /search /search/

  ##### Serve Meilisearch from a subfolder, by matching the path
  @meilisearch path /search/*
  ##### Serve assets from the subfolder, by matching the HTTP Referer header
  @meilisearch_assets header Referer */search/*

  handle @meilisearch {
    uri strip_prefix /search
    header X-Forwarded-Proto {scheme}
    header X-Forwarded-Host {host}
    reverse_proxy meilisearch:7700
  }

  handle @meilisearch_assets {
    uri strip_prefix /search
    header X-Forwarded-Proto {scheme}
    header X-Forwarded-Host {host}
    reverse_proxy meilisearch:7700
  }
}