I finally got something working now. It took a lot of trial and error, but I'm relieved to see something working.
The hardest thing to determine was that the path system wasn't relative to the JavaScript file that is being used in the Splunk dashboard, in my case relative to dashboard_file.js.
You might have a file in the following path within your Splunk application directory: /appserver/static/(foldername)/(filename).
When setting the path for it in the dashboard JavaScript file, it will actually be in the format of /static/app/(splunkappname)/(foldername)/(filename).
This is what I have for my configuration:
dashboard_file.js
require.config({
paths: {
react:
'/static/app/<splunk_app_name>/<folder_name>/node_modules/react/umd/react.production.min',
'react-dom':
'/static/app/<splunk_app_name>/<folder_name>/node_modules/react-dom/umd/react-dom.production.min',
'dashboard-container': '/static/app/<splunk_app_name>/<folder_name>/dist/bundle'
}
});
require([
'underscore',
'backbone',
'splunkjs/mvc',
'jquery',
'react',
'react-dom',
'dashboard-container'
], function(_, Backbone, mvc, $, React, ReactDOM, DashboardContainer) {
const serviceList = [
{name: 'Service 1', status: 'Good'},
{name: 'Service 2', status: 'Good'},
{name: 'Service 3', status: 'Error'},
{name: 'Service 4', status: 'Good'}
];
ReactDOM.render(
React.createElement(DashboardContainer.default, {serviceList: serviceList}, null),
document.getElementById('app')
);
});
webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/components/container/DashboardContainer.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
library: 'DashboardContainer',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html'
})
],
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'dist')
}
};
DashboardContainer.jsx:
import React, {Component} from 'react';
import TileContainer from '../presentational/TileContainer.jsx';
class DashboardContainer extends Component {
renderTile(serviceInfo) {
return <TileContainer service={serviceInfo} />;
}
render() {
return (
<div className="service-tiles">
<h1>Hello again world!</h1>
{this.props.serviceList.map(service => this.renderTile(service))}
</div>
);
}
}
export default DashboardContainer;
... View more