WARNING: Version 6.0 of Kibana has passed its EOL date.

This documentation is no longer being maintained and may be removed. If you are running this version, we strongly advise you to upgrade. For the latest information, see the current release documentation.

« Core Development Managing Dependencies »
Elastic Docs ›Kibana User Guide [6.0] ›Contributing to Kibana ›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 config.get('server.basePath') to any absolute URL path.

const basePath = server.config().get('server.basePath');
server.route({
  path: '/redirect',
  handler(req, reply) {
    reply.redirect(`${basePath}/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

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 npm start.

npm start -- --no-base-path
« Core Development Managing Dependencies »