I put together a quick example plugin to demonstrate server.injectUiAppVars
index.js: call server.injectUiAppVars from init
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:
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:
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:
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>
);
}
}