IMPORTANT: No additional bug fixes or documentation updates will be released for this version. For the latest information, see the current release documentation.
« Core Development Managing Dependencies »
Elastic Docs ›Kibana Guide [7.3] ›Developer guide ›Core Development

Considerations for basePath

edit

Considerations for basePath

edit

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:

<img> and <a> elements

edit

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">

Getting a static asset url

edit

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`
});

API requests from the front-end

edit

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'));

Server side

edit

Append request.getBasePath() to any absolute URL path.

const basePath = server.config().get('server.basePath');
server.route({
  path: '/redirect',
  handler(request, h) {
    return h.redirect(`${request.getBasePath()}/otherLocation`);
  }
});

BasePathProxy in dev mode

edit

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:

  1. change the port for the server to the dev.basePathProxyTarget setting (default 5603)

  2. start a BasePathProxy at server.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

If you’re writing scripts that interact with the Kibana API, the base path proxy will likely make this difficult. To bypass the base path proxy for a single request, prefix urls with __UNSAFE_bypassBasePath and the request will be routed to the development Kibana server.

curl "http://elastic:changeme@localhost:5601/__UNSAFE_bypassBasePath/api/status"

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
« Core Development Managing Dependencies »