JoseMiralles/Guide.md

## Guide.md

      
    Raw
  

              Guide.md
            
          
    React + Splunk + Typescript

This is a version of the following guide, adapted to work inside of a Splunk dashboard.
https://www.newline.co/@bespoyasov/how-to-create-a-react-typescript-application-from-scratch--676bd120
- Create a new app in the splunk dashboard.


Got to Apps > Create App
Name it ReactTS and set the folder name to ReactTS as well.
Set template to Barebones

- Go to the new app directory from a terminal.


cd to Splunk/etc/apps/ReactTS/
Create default/data/ui/views/homepage.xml with the following content:

<dashboard script="client/dist/bundle.js">
    <label>Homepage</label>
    <row>
        <panel>
            <html>
                <div id="root">There was a problem loading React!</div>
            </html>
        </panel>
    </row>
</dashboard>


Modify default/data/ui/nav/default.xml by adding a homepage view:

<nav search_view="search">
  <view name="homepage" default='true' />
  ...Rest of the views here...
</nav>


Create default/web.conf

[settings]
 js_no_cache = true
 cacheBytesLimit = 0
 cacheEntriesLimit = 0
 max_view_cache_size = 0
 auto_refresh_views = 1

- Create Node App


cd to the app directory Splunk/etc/apps/ReactTS/
Inside, create appserver/static/client and cd into it.
npm init -y
npm i typescript react react-dom
npm i @types/react @types/react-dom -D
npx tsc --init
Open tsconfig.json and add the following: "jsx": "react".
Optional, set "target": "es6".

- Setup WebPack


npm i webpack webpack-cli html-webpack-plugin ts-loader -D
Create /client/webpack.config.js, and add the following to it:

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");

// Instantiate the plugin.
// The `template` property defines the source
// of a template file that this plugin will use.
// We will create it later.
const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
});

module.exports = {
  // Our application entry point.
  entry: "./src/index.tsx",
  
  // These rules define how to deal 
  // with files with given extensions.
  // For example, .tsx files 
  // will be compiled with ts-loader,
  // a spcific loader for webpack
  // that knows how to work with TypeScript files.
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },

  // Telling webpack which extensions
  // we are interested in.
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },

  // What file name should be used for the result file,
  // and where it should be palced.
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },

  // Use the html plugin.
  plugins: [htmlPlugin],

  // Set up the directory 
  // from which webpack will take the static content.
  // The port field defines which port on localhost
  // this application will take.
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

- Create React App:


Create src/index.ts

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
    <App/>,
    document.getElementById("root")
);


create src/App.tsx:

import React from "react";

console.log("TEEEST");

const App: React.FC = () => {
    return <h1>Hello Splunk!</h1>;
};

export default App;


OPTIONAL: Create client/index.html:

<!-- Changes made here will not be reflected on the Splunk app.
     This file is for development purposes only.
     Splunk uses it's own html entry point. -->

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

This is only if you want to run your React app outside of Splunk for development and testing purposes, but Splunk won't use this file at all.
Instead, Splunk uses ReactTS/default/data/ui/views/homepage.xml.


Install the webpack-dev-server package: npm i webpack-dev-server -D.


Add the following scripts to package.json:


"scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
}


Restart the Splunk server.

- Building and running app


After making changes to the app, run npm run build.
Go to the app in Splunk, and hard refresh the page Ctrl + R.

You can also disable cache in the Chrome dev tools, in the Network tab.