Introduction

Splunk UI Toolkit provides a streamlined way to develop modern, interactive Splunk apps using React. Below are essential commands and their purposes to help developers set up, configure, and test their Splunk apps efficiently.

Command: npx @splunk/create

Purpose

  • Quickly sets up the foundation for building custom Splunk apps using React.
  • Creates the necessary project structure, configuration files, and boilerplate code.

When to Use It

  • If you want to develop a Splunk app with a modern, interactive React interface.
  • If you’re new to Splunk app development and need a streamlined starting point.

How It Works

  1. Run the command: 
    npx @splunk/create
  2. Choose an option: You will be presented with a menu with the following choices:
    • Create a React Splunk app with a React component: Generates a complete Splunk app with a new React component.
    • Add a React Splunk app with an existing React component: Creates a new Splunk app referencing an existing React component.
    • Add another component: Adds an additional component to an existing Splunk app.
  3. Follow the prompts: Provide details such as the app name or component name.

Command: yarn run setup

Purpose

  • Initializes your Splunk UI Toolkit project.
  • Installs dependencies required for development, testing, and production.
  • Configures development tasks like yarn run build for generating a production-ready app.

When to Use It

  • Immediately after creating a new Splunk UI Toolkit project using npx @splunk/create.
  • Whenever you clone an existing Splunk UI Toolkit project to ensure correct dependency setup.

How It Works

  1. Navigate to your project directory: 
    cd your-splunk-app
  2. Run the command: 
    yarn run setup
  3. Wait for installation: Dependencies will be downloaded and installed.

Command: yarn run link:app

Purpose

  • Links your Splunk UI Toolkit app’s development directory to the Splunk installation directory.
  • Allows Splunk to recognize and load your app components during development.

How It Works

  • Creates a symbolic link between the development directory and Splunk’s installation directory.
  • Enables early development testing by allowing Splunk to detect and load the app’s components.

When to Use It

  • During early-stage development to test app integration with Splunk UI.

Important Notes

  • This command is for development purposes only and should not be used in production.

Command: yarn run start

Purpose

  • Starts a local development server for your Splunk UI Toolkit project.
  • Enables hot reloading, so changes are automatically reflected in the app without restarting the server manually.

When to Use It

  • While actively developing and testing your Splunk UI app.

How It Works

  1. Navigate to your project directory: 
    cd your-splunk-app
  2. Run the command: 
    yarn run start
  3. Access Splunk UI and see the app running.
  4. To apply changes:
    • Make modifications in the development environment.
    • In Splunk, press Ctrl + Shift + R to refresh.

Avoiding Caching Issues

To prevent caching issues, add the following settings to web.conf:

[settings]
cacheBytesLimit = 0
cacheEntriesLimit = 0

This ensures that changes are immediately reflected in the Splunk UI during development.

Conclusion

By using these commands and settings, developers can efficiently build and test Splunk apps with React, ensuring a smooth development workflow with the Splunk UI Toolkit.