Skip to content

Instantly share code, notes, and snippets.

@marcusschiesser
Created November 23, 2021 10:53
Show Gist options
  • Save marcusschiesser/ee033284de5cdf8e1a8a016b4996b724 to your computer and use it in GitHub Desktop.
Save marcusschiesser/ee033284de5cdf8e1a8a016b4996b724 to your computer and use it in GitHub Desktop.
Starter file to run any React app as a Splunk app
import React from 'react';
import ReactDOM from 'react-dom';
import { createStaticURL } from '@splunk/splunk-utils/url';
import $script from 'scriptjs';
function getLayoutApi(callback) {
const url = createStaticURL('build/api/layout.js');
if (window.requirejs) {
window.requirejs([url], callback);
} else {
$script(url, () => {
// eslint-disable-next-line no-underscore-dangle
callback(window.__splunk_layout__);
});
}
}
getLayoutApi((layoutApi) => {
let containerEl;
if (layoutApi) {
containerEl = layoutApi.create().getContainerElement();
} else {
containerEl = document.createElement('div');
document.body.appendChild(containerEl);
}
setTimeout(() => {
ReactDOM.render(
<React.StrictMode>
<MyComponent />
</React.StrictMode>,
containerEl
);
}, 30);
});
@marcusschiesser
Copy link
Author

Just call splunk-create and copy this file to the src/main/webapp/pages/start folder of your Splunk app. The advantage is that you can use any React version with this approach and you're not bound to the Splunk UI toolkit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment