kibana/docs/development/core/development-basepath.asciidoc
Kim Joar Bekkelund a817517574
[6.x] Switch to Yarn (#15485) (#15955)
* Switch to Yarn (#15485)

* switch to yarn

* cleanup misc references to npm

* [yarn] loosen dependency ranges so yarn will merge more deps

* fix linting error now that moment uses ESM

* [licenses] font-awesome changed the format of its license id

* Use local yarn

* Misc fixes

* eslintignore built yarn file

* Remove mkdir which doesn't do what it should do

* Check build without upgrading lots of versions

* Fix license check

* too many moments

* Better description

* Review fixes

* Lock to angular@1.6.5

* More specific version locks

* Revert "More specific version locks"

This reverts commit 11ef81102e.

* Revert "Lock to angular@1.6.5"

This reverts commit 3ade68c14c.

* rm yarn.lock; yarn

* Forcing a specific version of React, Angular, Moment

* Using vendored version of yarn in ci

* Use --frozen-lockfile

* fixes

* Update lockfile
2018-01-10 16:54:20 +01:00

87 lines
2.4 KiB
Plaintext

[[development-basepath]]
=== Considerations for basePath
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:
[float]
==== `<img>` and `<a>` elements
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`.
["source","shell"]
-----------
<img kbn-src="plugins/kibana/images/logo.png">
-----------
[float]
==== Getting a static asset url
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.
["source","shell"]
-----------
// 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`
});
-----------
[float]
==== API requests from the front-end
Use `chrome.addBasePath()` to append the basePath to the front of the url.
["source","shell"]
-----------
import chrome from 'ui/chrome';
$http.get(chrome.addBasePath('/api/plugin/things'));
-----------
[float]
==== Server side
Append `config.get('server.basePath')` to any absolute URL path.
["source","shell"]
-----------
const basePath = server.config().get('server.basePath');
server.route({
path: '/redirect',
handler(req, reply) {
reply.redirect(`${basePath}/otherLocation`);
}
});
-----------
[float]
==== BasePathProxy in dev mode
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 `yarn start`.
["source","shell"]
-----------
yarn start --no-base-path
-----------