All communication from the Kibana UI to the server needs to respect the
server.basePath
. Here are the "blessed" strategies for dealing with this
based on the context:
Write the src
or href
urls as you would without the base path, but then
replace src
or href
with kbn-src
or kbn-href
.
<img kbn-src="plugins/kibana/images/logo.png">
Use webpack to import the asset into the build. This will give you a URL in JavaScript and gives webpack a chance to perform optimizations and cache-busting.
// in plugin/public/main.js
import uiChrome from 'ui/chrome';
import logoUrl from 'plugins/facechimp/assets/banner.png';
uiChrome.setBrand({
logo: `url(${logoUrl}) center no-repeat`
});
Use chrome.addBasePath()
to append the basePath to the front of the url.
import chrome from 'ui/chrome';
$http.get(chrome.addBasePath('/api/plugin/things'));
Append request.getBasePath()
to any absolute URL path.
const basePath = server.config().get('server.basePath');
server.route({
path: '/redirect',
handler(request, reply) {
reply.redirect(`${request.getBasePath()}/otherLocation`);
}
});
The Kibana dev server automatically runs behind a proxy with a random
server.basePath
. This way developers will be constantly verifying that their
code works with basePath, while they write it.
To accomplish this the serve
task does a few things:
-
change the port for the server to the
dev.basePathProxyTarget
setting (default5603
) -
start a
BasePathProxy
atserver.port
-
picks a random 3-letter value for
randomBasePath
-
redirects from
/
to/{randomBasePath}
-
redirects from
/{any}/app/{appName}
to/{randomBasePath}/app/{appName}
so that refreshes should work -
proxies all requests starting with
/{randomBasePath}/
to the Kibana server
-
This proxy can sometimes have unintended side effects in development, so when
needed you can opt out by passing the --no-base-path
flag to the serve
task
or yarn start
.
yarn start --no-base-path