@splunk/create

@splunk/create

Generates code and scaffolding for new React components and Splunk applications through your command line.

What is @splunk/create?

@splunk/create generates code and scaffolding for React components and Splunk applications. It is designed to allow users to program in ReactJS with Splunk, without needing to consider creating initial configurations from scratch for bundling and running JavaScript in modern browsers, or considering intricacies of the Splunk app model.

You can make Splunk applications with customized interfaces that go beyond what Splunk provides in its core platform. The tools available in the Splunk UI Toolkit afford you this flexibility.

The @splunk/create package can either generate a single React component, or both a React component and a Splunk application, and provides basic configurations for bundling, code quality and testing. The generated component and app packages support multiple build targets: a production build, and a Splunk app demo build. The component generator also supports a standalone mode, consisting of a minimal webpage to debug and interact with the component.

By utilizing @splunk/create, you can start developing with Splunk provided packages such as @splunk/dashboard-core, @splunk/react-ui and @splunk/visualizations but can also use any package available and compatible with the versions of React that @splunk/create supports. For reference on what you can do with @splunk/create, the Examples Gallery provides many different use cases for developers to go off of.

Getting started

Installation and usage

Prerequisites: Yarn 1.2 or greater, Node version 14 or 16. When installing Node, you get the npm command line tool. This allows you to install packages with npm install, but it also allows you to do one-time runs of packages with npx <package_name>. In this documentation, we prefix @splunk/create commands with the npx command.

Run the @splunk/create package in a new directory:

$ npx @splunk/create

Note: Another option is to download the package once with npm install @splunk/create in whichever scope you choose, and run the package simply with the command splunk-create. With this option you would need to manually upgrade the package when new versions are released.

On the first run, you will be presented with the option to create either a monorepo with just a React component, or a monorepo with both a React component and a Splunk app, with associated entries for naming after making your selection.

Directories and files written by @splunk/create

When creating a new project with @splunk/create, the following files and directories are generated into your destination directory. The @splunk/create package includes multiple tools such as babel, lerna and prettier to manage the created project, and configuration files are created for these tools with basic settings that @splunk/create provides. When using @splunk/create, a monorepo is generated. For more information on monorepos, see the Lerna documentation.

• packages/
• .editorconfig
• .gitignore
• .prettierrc
• babel.config.js
• lerna.json
• package.json
• README.md

The files generated within the packages directory will be different depending on whether you are creating a component or a Splunk application.

Scripts

The following is a list of scripts and their description that can be run by entering yarn run <command>. Some commands might not be available depending on which part of the generated project you are in. You can also check a list of these commands by running yarn run in your terminal.

• build: Create a production bundle for the project
• eslint: Run ESLint on the “src” directory for both .js and .jsx file types
• eslint:ci: Run ESLint with the output format of “junit” and write the results to a .xml file
• eslint:fix: Run ESLint on the “src” directory for both .js and .jsx file types, and fix as many issues as possible, and only output the unfixed issues.
• link:app: Create a symlink between the stage folder of the app package and the $SPLUNK_HOME/etc/apps folder (requires setting up $SPLUNK_HOME variable to your Splunk directory
• lint: Run both ESLint and Stylelint tools on the entire project
• lint:ci: Run the eslint:ci command as well as the Stylelint tool on the project
• format: Run prettier to auto-format *.js and *.jsx and *.css. This command will overwrite files without asking (only available at project root)
• format:verify: Runs format, but confirm before overwriting files (only available at project root)
• setup: Run both install and build (only available at project root)
• start: Run webpack to bundle the JavaScript files while also watching the filesystem for any changes
• stylelint: Run stylelint with the included configuration file across JS and JSX file types

Once @splunk/create is finished generating directories and files, run yarn setup inside the root of the created directory to install the dependencies required to manage the project and build the sample code. Running yarn setup once is required to enable all other tasks. The command might take a few minutes to finish. Depending on the type of project you chose, different options are available to help you develop, build and test your project. Please see the other sections in this doc for more information.