[7.x] Add a new hello world plugin and adjust the welcome message. (#107789) (#108182)

* 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
# Conflicts:
#	.github/CODEOWNERS

* Update tsconfig.json

Need to account for https://github.com/elastic/kibana/pull/108139

* Update tsconfig.json

Needed to add references

dev_docs/dev_welcome.mdx

@@ -1,17 +0,0 @@
----
-id: kibDevDocsWelcome
-slug: /kibana-dev-docs/welcome
-title: Welcome
-summary: Build custom solutions and applications on top of Kibana.
-date: 2021-01-02
-tags: ['kibana','dev', 'contributor']
----
-
-Welcome to Kibana's plugin developer documentation!
-
-Did you know that the vast majority of functionality built inside of Kibana is a plugin? A handful of core services hold the system together,
-but it's our vast system of plugin developers that provide the amazing, out of the box, functionality you can use when building your own set of
-custom utilities and applications.
-
-Browse the `Services` section to view all the plugins that offer functionality you can take advantage of, or check out the
-`API documentation` to dig into the nitty gritty details of every public plugin API.

dev_docs/getting_started/dev_welcome.mdx

@@ -0,0 +1,20 @@
+---
+id: kibDevDocsWelcome
+slug: /kibana-dev-docs/welcome
+title: Welcome
+summary: Build custom solutions and applications on top of Kibana.
+date: 2021-01-02
+tags: ['kibana', 'dev', 'contributor']
+---
+
+[Kibana](https://www.elastic.co/what-is/kibana) is a pluggable platform that allows users to search, visualize and analyze data in Elasticsearch.
+
+Kibana ships with many out-of-the-box capabilities that can be extended and enhanced by custom javascript plugins. Developers can also write their own custom applications.
+
+Recommended next reading:
+
+1. <DocLink id="kibDevTutorialSetupDevEnv" text="Set up your development environment" />
+2. Create a simple <DocLink id="kibHelloWorldApp" text="Hello World plugin"/>.
+
+Check out our <DocLink id="kibDevDocsApiWelcome" text="API documentation" /> to dig into the nitty gritty details of
+every public plugin API.

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)

dev_docs/getting_started/setting_up_a_development_env.mdx

@@ -1,8 +1,8 @@
 ---
 id: kibDevTutorialSetupDevEnv
 slug: /kibana-dev-docs/tutorial/setup-dev-env
-title: Setting up a Development Environment
-summary: Learn how to setup a development environemnt for contributing to the Kibana repository
+title: Set up a Development Environment
+summary: Learn how to setup a development environment for contributing to the Kibana repository
 date: 2021-04-26
 tags: ['kibana', 'onboarding', 'dev', 'architecture', 'setup']
 ---
@@ -12,11 +12,11 @@ Setting up a development environment is pretty easy.
 <DocCallOut title="A note about Windows">
   In order to support Windows development we currently require you to use one of the following:
 
-  - [Git Bash](https://git-scm.com/download/win)
-  - [Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/about)
+- [Git Bash](https://git-scm.com/download/win)
+- [Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/about)
 
+Before running the steps below, please make sure you have installed [Visual C++ Redistributable for Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48145) and that you are running all commands in either Git Bash or WSL.
 
-  Before running the steps below, please make sure you have installed [Visual C++ Redistributable for Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48145) and that you are running all commands in either Git Bash or WSL.
 </DocCallOut>
 
 ## Get the code