# Reading config/env variable inside kibana plugin

**URL:** <https://discuss.elastic.co/t/reading-config-env-variable-inside-kibana-plugin/167643>\
**Category:** Kibana\
**Created:** [February 8, 2019, 2:09pm UTC](https://discuss.elastic.co/t/reading-config-env-variable-inside-kibana-plugin/167643 "2019-02-08T14:09:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ali\_Muhammad](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ali_muhammad/32/43530_2.png) [@Ali\_Muhammad](https://discuss.elastic.co/u/Ali_Muhammad)\
**Post date:** [February 8, 2019, 2:09pm UTC](https://discuss.elastic.co/t/reading-config-env-variable-inside-kibana-plugin/167643/1 "2019-02-08T14:09:00Z")

</div>

Hello Community.  
I have been trying for a while to read env variable inside kibana plugin JS code. I have the elk stack running as containers and want to provide environment variables via docker or configmap via kubernetes.  
Approach: If i try to read a file then it won't read from the current directory since it's client side code. I can potentially PUT these config params on elasticsearch and read them from there but i don't want to do that. I want them to be either attached to the container as a mount or environment variable.  
So, if anyone has already done this and found a solution to import env then please share your experience. It'll be a great help.

Thanks.

---

<div class="post-metadata">

**Author:** ![tsullivan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tsullivan/32/31077_2.png) [@tsullivan](https://discuss.elastic.co/u/tsullivan)\
**Post date:** [February 15, 2019, 5:21pm UTC](https://discuss.elastic.co/t/reading-config-env-variable-inside-kibana-plugin/167643/2 "2019-02-15T17:21:18Z")

</div>

Hi, to get the value into the front-end code, you can use `server.injectUiAppVars` for this.

Here's an example of Timelion doing so to get ES client info into the UI: [https://github.com/elastic/kibana/blob/3427a08108ee20fb0a37d4db1daa3ae478654305/src/legacy/core\_plugins/timelion/init.js#L55](https://github.com/elastic/kibana/blob/3427a08108ee20fb0a37d4db1daa3ae478654305/src/legacy/core_plugins/timelion/init.js#L55)

---

<div class="post-metadata">

**Author:** ![Ali\_Muhammad](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ali_muhammad/32/43530_2.png) [@Ali\_Muhammad](https://discuss.elastic.co/u/Ali_Muhammad)\
**Post date:** [February 25, 2019, 3:15pm UTC](https://discuss.elastic.co/t/reading-config-env-variable-inside-kibana-plugin/167643/3 "2019-02-25T15:15:59Z")

</div>

Thanks for the response Tim. I am a novice at this thing so do bare with me.  
So, in order to use env bound to my container i will have to return somevar: config.get('MYCONTAINERVAR') in index.js. Is there a syntax to use this variable inside hack.js in public directory of the plugin? Something like process.env.somevar or $somevar.

---

<div class="post-metadata">

**Author:** ![tsullivan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tsullivan/32/31077_2.png) [@tsullivan](https://discuss.elastic.co/u/tsullivan)\
**Post date:** [February 25, 2019, 5:54pm UTC](https://discuss.elastic.co/t/reading-config-env-variable-inside-kibana-plugin/167643/4 "2019-02-25T17:54:56Z")

</div>

Hi, the code in the public directory will not be able to read any environment variable directly. The environment variable will have to be captured on the server side, in your plugin init, to get it registered as an injected UI App Var, the way I showed you.

---

<div class="post-metadata">

**Author:** ![tsullivan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tsullivan/32/31077_2.png) [@tsullivan](https://discuss.elastic.co/u/tsullivan)\
**Post date:** [February 25, 2019, 6:55pm UTC](https://discuss.elastic.co/t/reading-config-env-variable-inside-kibana-plugin/167643/5 "2019-02-25T18:55:22Z")

</div>

I put together a quick example plugin to demonstrate `server.injectUiAppVars`

index.js: call `server.injectUiAppVars` from init

```auto
export default function (kibana) {
  return new kibana.Plugin({
    require: ['elasticsearch'],
    name: 'myplugin',
    uiExports: {
      app: {
        title: 'MyPlugin',
        main: 'plugins/myplugin/app',
      },
    },
    config(Joi) {
      return Joi.object({
        enabled: Joi.boolean().default(true),
      }).default();
    },
    init(server) {
      server.injectUiAppVars('myplugin', () => {
        const config = server.config();
        return {
          environmentValue: 42 // TODO replace with `process.env['SOMETHING']
        };
      });
    },
  });
}

```

public/services/vars.js: make an Angular service that returns the server-side value:

```auto
import { uiModules } from 'ui/modules';
const module = uiModules.get('app/myplugin');
// This is for injecting into controllers
module.service('environmentService', function (environmentValue) {
  return {
    get: () => environmentValue,
  };
});

```

public/app.js, pass the service to a React component:

```auto
import React from 'react';
import { uiModules } from 'ui/modules';
import chrome from 'ui/chrome';
import { render, unmountComponentAtNode } from 'react-dom';
import 'ui/autoload/styles';
import './less/main.less';
import { Main } from './components/main';
import './services/vars';
const app = uiModules.get('apps/myplugin');
app.config($locationProvider => {
  $locationProvider.html5Mode({
    enabled: false,
    requireBase: false,
    rewriteLinks: false,
  });
});
app.config(stateManagementConfigProvider => stateManagementConfigProvider.disable());
function RootController($scope, $element, $http, environmentService) {
  const domNode = $element[0];
  // render react to DOM
  render(
    <Main
      title="My Plugin"
      httpClient={$http}
      environmentService={environmentService}
    />,
    domNode
  );
  // unmount react on controller destroy
  $scope.$on('$destroy', () => {
    unmountComponentAtNode(domNode);
  });
}
chrome.setRootController('myplugin', RootController);

```

public/components/main/main.js, use the service:

```auto
import React from 'react';
import {
  EuiPage,
  EuiPageBody,
  EuiPageContent,
  EuiPageContentBody,
  EuiText,
} from '@elastic/eui';
export class Main extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <EuiPage>
        <EuiPageBody>
          <EuiPageContent>
            <EuiPageContentBody>
              <EuiText>
                <h3>You have successfully!</h3>
                <p>
                  The environmentValue is {this.props.environmentService.get()}
                </p>
              </EuiText>
            </EuiPageContentBody>
          </EuiPageContent>
        </EuiPageBody>
      </EuiPage>
    );
  }
}

```

---

<div class="post-metadata">

**Author:** ![Ali\_Muhammad](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ali_muhammad/32/43530_2.png) [@Ali\_Muhammad](https://discuss.elastic.co/u/Ali_Muhammad)\
**Post date:** [March 1, 2019, 12:16pm UTC](https://discuss.elastic.co/t/reading-config-env-variable-inside-kibana-plugin/167643/6 "2019-03-01T12:16:58Z")

</div>

Thanks a lot for clarification. Your plugin works if i use a static value in it(just like you did with **environmentValue: 42** ). Although, when i use **environmentValue: process.env['HOSTNAME']** it doesn't return anything. The logged error on the browser is  
`Error: [$injector:unpr] Unknown provider: environmentValueProvider <- environmentValue <- environmentService`  
HOSTNAME in this case is the environment variable attached to the kibana docker image.

Thank you so much for all the help. If you can suggest a sequential guide to follow into kibana plugin development then that'll be a huge help. The documentation on [elastic.co](http://elastic.co) is not substantial enough.

---

<div class="post-metadata">

**Author:** ![tsullivan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tsullivan/32/31077_2.png) [@tsullivan](https://discuss.elastic.co/u/tsullivan)\
**Post date:** [March 1, 2019, 8:59pm UTC](https://discuss.elastic.co/t/reading-config-env-variable-inside-kibana-plugin/167643/7 "2019-03-01T20:59:23Z")

</div>

I'd try using some `console.log` statements and look at what gets logged in the Kibana server logs to see what values you'll be able to read.

The injected vars are serialized so they can be included in the browser page load. If the value for the object property is undefined, then the property doesn't exist after it is serialized.

---

<div class="post-metadata">

**Author:** ![Ali\_Muhammad](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ali_muhammad/32/43530_2.png) [@Ali\_Muhammad](https://discuss.elastic.co/u/Ali_Muhammad)\
**Post date:** [March 29, 2019, 6:10am UTC](https://discuss.elastic.co/t/reading-config-env-variable-inside-kibana-plugin/167643/8 "2019-03-29T06:10:43Z")

</div>

It worked!!! Thank you so much for your help. The env i declared earlier were out of scope for my plugin so declared them as root and it worked fine then. Although, can you suggest the changes in your code to make it adaptive to version 6.2.4. I believe server.injectVars() was a part of uiExports before but for the life of me i can't make it behave the right way.  
In the app.js can we console.log(environmentValue) from environmentService.  
Thank you so much for all your help once again.

---

<div class="post-metadata">

**Author:** ![tsullivan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tsullivan/32/31077_2.png) [@tsullivan](https://discuss.elastic.co/u/tsullivan)\
**Post date:** [March 29, 2019, 4:39pm UTC](https://discuss.elastic.co/t/reading-config-env-variable-inside-kibana-plugin/167643/9 "2019-03-29T16:39:29Z")

</div>

You're right: in 6.2.x, injectVars were part of `uiExport.app`. The Kibana Platform team removed that touchpoint in prep for the 8.x Kibana framework, which won't have uiExports.

To check on that, I'll again direct you to the Timelion code, this time going back to our 6.2 branch: [https://github.com/elastic/kibana/blob/6.2/src/core\_plugins/timelion/index.js#L11](https://github.com/elastic/kibana/blob/6.2/src/core_plugins/timelion/index.js#L11)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [April 26, 2019, 4:39pm UTC](https://discuss.elastic.co/t/reading-config-env-variable-inside-kibana-plugin/167643/10 "2019-04-26T16:39:38Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.