Splunk : Kickstart your Splunk App with @Splunk/Create

Share:

By Ryan O'Connor January 20, 2022

I've been contributing to, and creating, Splunk apps for the better part of the last 10 years. But never have I felt more excited to be a Splunk Developer than right now. One of the primary reasons why I am so excited is because of build tools like @splunk/create. At Splunk, we recognize that developers are so crucial to our entire ecosystem. Developer feedback is important, and your innovative and new ideas have influenced or augmented our product(s) in so many positive ways for at least as long as I've been around the Splunk ecosystem. Developers are continuing to meet advanced customer use cases and requirements. They're pushing the boundaries of our products daily - and we love to see that.

^{Custom App Developed with Splunk UI}

The build tool I'm aiming to highlight in this blog called @splunk/create, is part of our UI Toolkit. One of the goals of this set of tools is to lower the barrier of entry of creating some of those really compelling and highly customized use cases of Splunk that you've come to know and love. Allow me to explain to you just why this build tool has been the foundation of just about every Splunk App I create lately.

Building Using Splunk-Create

We'll start with an example of an app I created just last week. Recently I stepped into a new role here at Splunk as a Product Manager for Splunk UI. One of the first things I wanted to do in that new role was to get a sense of the usage of some of the packages that we're releasing (and that I'm discussing in this exact blog series). Like any good developer, I googled around and found an API from NPM that would provide me with the information I needed. I decided that instead of retrieving and analyzing this information one time, I could instead build this analysis into a tool that I could reuse over and over, and that others could also use. With that, I went from idea → packaged/installed app (that looked and felt like Splunk) in about 1-2 hours. Of course a better developer could create something using this tool even quicker, and a better designer could probably organize the UI to make it look even more beautiful and accessible using our provided library.

This app uses all of the following packages and components:

• The following components from our Splunk UI Library (@splunk/react-ui):
  • Button - https://splunkui.splunk.com/Packages/react-ui/Button
  • Text - https://splunkui.splunk.com/Packages/react-ui/Text
  • Select - https://splunkui.splunk.com/Packages/react-ui/Select
• The following components from our Visualization Library (@splunk/visualizations):
  • Line - https://splunkui.splunk.com/Packages/visualizations/?path=%2FLine
  • SingleValue - https://splunkui.splunk.com/Packages/visualizations/?path=%2FSingleValue
    

You may have noticed that I did not mention dashboards in the above list. The reason I didn't call this out explicitly is that every app on Splunk Enterprise comes with the ability to create and edit dashboards - whether they are Dashboard Studio or Simple XML. This includes apps created with @splunk/create. In a future blog, we will show you how to go beyond this built-in functionality to integrate directly with the Splunk Dashboard Framework for even more customizability.

I hope I've peaked the interest of Splunk developers old and new. But I recognize the question you're still asking is, "How did Ryan get here so fast?" Sure these packages are available, and I'm certainly providing you with the exact components that made up this UI (including links to each of them). But what is the glue that is sticking this all together and making the first time run experience so simple? That's what I'm really excited to tell you about in this specific blog. The answer to that is @splunk/create.

Getting Started with Splunk-Create

If you're familiar with create-react-app by Facebook, then getting started with @splunk/create should be a breeze. To get started you can download @splunk/create from npm, or for an even quicker experience, run: npx splunk-create in your terminal.

From there, you can choose to generate either a complete Splunk App or a reusable react component. This is an excellent place to start, especially if you're interested in making an app that is eventually Splunk Cloud approved. When you're done creating your app, we have tools and utilities like our Splunk Enterprise CLI command for packaging apps that can be used to package the app and submit for installation to your Splunk Cloud environment, or upload to Splunkbase for others to use.

The main point here is that we built @splunk/create with ease and simplicity in mind. We will continue to develop it, support it, and improve upon it, because we want developers to spend less time thinking about "How do I structure the files and folders in my app Splunk App when I want to build a custom front-end experience?". In our mind, time is better spent thinking about the bells and whistles and meeting those awesome use cases - rather than how do I organize the files and folders to make up my Splunk app.

Next Steps

If you're interested in finding out what @splunk/create can do, Nusair Haq has done the lion's share of the work in collecting some excellent examples of other developers who have already started using @splunk/create. They've contributed their compelling custom visualizations and apps so that you, the developer, can get a head start on creating your next big idea.

You can also view our video tutorial on @splunk/create by watching this .conf talk here: DEV1134B.

Please don't hesitate to reach out to us by sending an email to [e-mail] or by visiting ideas.splunk.com and submitting your ideas, or voting on already existing ideas.

This article was co-authored by Nusair Haq, Product Manager for Splunk Dashboard Framework.