Add a new hello world plugin and adjust the welcome message. (#107789)

* Add a new hello world plugin and adjust the welcome message.

* update and move files

* Update CODEOWNERS

* add a tsconfig.json file

* update tsconfig.json

* fix type check

* address code review comments

dev_docs/getting_started/hello_world_plugin.mdx

@@ -0,0 +1,157 @@
+---
+id: kibHelloWorldApp
+slug: /kibana-dev-docs/hello-world-app
+title: Hello World
+summary: Build a very basic plugin that registers an application that says "Hello World!".
+date: 2021-08-03
+tags: ['kibana', 'dev', 'contributor', 'tutorials']
+---
+
+This tutorial walks you through two ways to create a plugin that registers an application that says "Hello World!".
+
+You can view the tested example plugin at [examples/hello_world](https://github.com/elastic/kibana/tree/master/examples/hello_world).
+
+## 1. Set up your development environment
+
+Read through <DocLink id="kibDevTutorialSetupDevEnv" text="these instructions"/> to get your development environment set up.
+
+## 2. Option 1 - Write it manually
+
+This is a good option if you want to understand the bare minimum needed to register a "Hello world" application. The example plugin is based off of this option.
+
+1. Create your plugin folder. Start off in the `kibana` folder.
+
+```
+$ cd examples
+$ mkdir hello_world
+$ cd hello_world
+```
+
+2. Create the <DocLink id="kibDevTutorialBuildAPlugin" section="1-kibanajson" text="kibana.json manifest file"/>.
+
+```
+$ touch kibana.json
+```
+
+and add the following:
+
+```
+{
+  "id": "helloWorld",
+  "version": "1.0.0",
+  "kibanaVersion": "kibana",
+  "ui": true
+}
+```
+
+3. Create a `tsconfig.json` file.
+
+```
+$ touch tsconfig.json
+```
+
+And add the following to it:
+
+```
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./target",
+    "skipLibCheck": true
+  },
+  "include": [
+    "index.ts",
+    "common/**/*.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "server/**/*.ts",
+    "../../typings/**/*"
+  ],
+  "exclude": []
+}
+```
+
+4. Create a <DocLink id="kibDevTutorialBuildAPlugin" section="2-publicindexts" text="`public/plugin.tsx` file "/>.
+
+```
+$ mkdir public
+$ touch plugin.tsx
+```
+
+And add the following to it:
+
+```ts
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
+
+export class HelloWorldPlugin implements Plugin {
+  public setup(core: CoreSetup) {
+    // Register an application into the side navigation menu
+    core.application.register({
+      id: 'helloWorld',
+      title: 'Hello World',
+      async mount({ element }: AppMountParameters) {
+        ReactDOM.render(<div>Hello World!</div>, element);
+        return () => ReactDOM.unmountComponentAtNode(element);
+      },
+    });
+  }
+  public start(core: CoreStart) {
+    return {};
+  }
+  public stop() {}
+}
+```
+
+5. Create a <DocLink id="kibDevTutorialBuildAPlugin" section="3-publicplugints" text="`public/index.ts` file "/>.
+
+```
+$ touch index.ts
+```
+
+```ts
+import { HelloWorldPlugin } from './plugin';
+
+export function plugin() {
+  return new HelloWorldPlugin();
+}
+```
+
+## 2. Option 2 - Use the automatic plugin generator
+
+This is an easy option to get up and running ASAP and includes additional code.
+
+Use the Automatic plugin generator to get a basic structure for a new plugin. Plugins that are not part of the Kibana repo should be developed inside the plugins folder. If you are building a new plugin to check in to the Kibana repo, you will choose between a few locations:
+
+`x-pack/plugins` for plugins related to subscription features
+`src/plugins` for plugins related to free features
+`examples` for developer example plugins (these will not be included in the distributables)
+
+```
+% node scripts/generate_plugin hello_world
+? Plugin name (use camelCase) helloWorld
+? Will this plugin be part of the Kibana repository? Yes
+? What type of internal plugin would you like to create Kibana Example
+? Should an UI plugin be generated? Yes
+? Should a server plugin be generated? No
+ succ 🎉
+
+      Your plugin has been created in examples/hello_world
+```
+
+## 3. Build your new application
+
+Run `yarn kbn bootstrap`
+
+## 3. Start Kibana with examples and navigate to your new application
+
+In one terminal window, run `yarn es snapshot --license trial` to boot up Elasticsearch.
+
+In another terminal window, run `yarn start --run-examples` to boot up Kibana and include the example plugins. Your example plugin should show up in the navigation at the very bottom.
+
+If you build it manually it will look something like this:
+![hello world manual](./hello_world_manual.png)
+
+If you built it with the generator, it will look something like this:
+![hello world generated](./hello_world_generated.png)