Splunk React Boilerplate

Welcome to this boilerplate to quickly start React applications with Splunk. Use Splunk UI for the UI and add no-code Splunk Dashboards to your app.

Overview

• 🚀 Quickstart
• 🧐 Advantages to @splunk/create
• 💻 Contribute to this repo

Quickstart

The simplest way to try out this boilerplate is to test it out locally. Here are the steps to get started.

1. Fork and clone repo

Fork the repo to your Github account, then run the following command to clone the repo:

git clone git@github.com:[YOUR_GITHUB_ACCOUNT_NAME]/splunk-react-boilerplate.git

Optionally, start the repository in a Devcontainer. The one provided includes the necessary Node version 18, otherwise, make sure that Node 18 is installed.

2. Install dependencies

cd splunk-react-boilerplate
yarn install

3. Run app locally

a. Start dev server

yarn start

b. Start Splunk

docker-compose up

c. Open Splunk in your browser

http://localhost:8000/en-US/app/React-App/startPage

4. Build the Splunk app

You can use yarn package to build the app in a folder of your choice:

yarn package /tmp/React-App.tgz

If you push a tag, a Github action will automatically build the app and upload it to Github Releases.

Advantages to @splunk/create

This starter kit provides an alternative to the @splunk/create package. It has the following advantages:

• 📦 Simplified Package Structure

  • The root folder contains the Splunk app. Simply git clone into your $SPLUNK_HOME/etc/apps folder, run the build, and you're ready to go.
  • This is a single package repo without the overhead of lerna.

• 🛠️ Easier Development

  • The package comes with a docker-compose.yml to start Splunk locally.
  • It also contains a devcontainer.json to start the app in a Devcontainer.

• 🚀 Streamlined Deployment

  • The package includes a Github action to build and upload the app to Github Releases.

• 🖥️ Practical Code Templates

  • The package contains a Splunk dashboard (generated with the Splunk Dashboard Studio) to demonstrate the integration into a SplunkUI application.
  • You can modify index.jsx, for example, to render the app without the Splunk toolbar.

• 🔧 Latest Dependencies

  • Webpack 5
  • Eslint 8
  • Prettier 2
  • Jest 25
  • Babel 7

How to contribute to this repo

Code contribution workflow

You can fork this repo, make changes, and create a pull request. Add @marcusschiesser as a reviewer.

If you are new to contributing on Github, here is a step-by-step guide:

1. Click on Fork on the top right of this page
2. Work on your change and push it to your forked repo. Now when you navigate to the forked repo's UI, you should see a "Contribute" button.
3. Click on "Contribute" -> "Open Pull Request".
4. Once you have a pull request, you can add reviewers.

Other contributions

Feel free to open feature requests, bug reports, etc under Issues.