App catalog related updates and streamlined initial tutorial for SPFx

Author: VesaJuvonen

docs/images/cdn-override-helloworld-webpart-package.png

@@ -41,17 +41,8 @@ You need an app catalog to upload and deploy web parts. If you've already set up
 
 1. In the left sidebar, select **More features**
 1. Locate the section **Apps** and select **Open**.
-1. On the **Apps** page, select **App Catalog**.
-1. Select **OK** to create a new app catalog site.
-1. On the next page, enter the following details:
 
-    - **Title**: Enter **app catalog**.
-    - **Web Site Address _suffix_**: Enter your preferred suffix for the app catalog; for example: **apps**.
-    - **Administrator**: Enter your username, and then select the **resolve** button to resolve the username.
-
-1. Select **OK** to create the app catalog site.
-
-SharePoint creates the app catalog site, and you can see its progress in the SharePoint admin center.
+This is start the automatic creation of the SharePoint app catalog to the tenant if it does not exist. If the app catalog already exists, you will be redirect to it. SharePoint app catalog is used to manage and deploy SharePoint Framework solutions.
 
 ## Create a new site collection
 
@@ -73,8 +64,8 @@ You also need a site collection and a site for your testing. You can create a ne
 
 1. In the left sidebar, select **Sites > Active sites**.
 1. Select **Create** from the toolbar at the top of the page.
-1. On the **Create a site** page, select **Team site**.
-1. In the panel that appears, enter required details to create the site (*name, owner, and language*):
+1. On the **Create a site** panel, select **Team site**.
+1. In the new view that appears, enter required details to create the site (*Site name, Group owner, and language*):
 1. Select **Next** to create the site collection.
 
 After SharePoint creates the site, you can browse to your site collection by selecting **Finish** & entering the URL of the new site.

docs/images/cnd-trust-helloworld-webpart-solution.png

@@ -48,22 +48,19 @@ this.context.pageContext
 
     ```tsx
     this.domElement.innerHTML = `
-      <div class="${ styles.helloWorld }">
-        <div class="${ styles.container }">
-          <div class="${ styles.row }">
-            <div class="${ styles.column }">
-              <span class="${ styles.title }">Welcome to SharePoint!</span>
-              <p class="${ styles.subTitle }">Customize SharePoint experiences using web parts.</p>
-              <p class="${ styles.description }">${escape(this.properties.description)}</p>
-              <p class="${ styles.description }">${escape(this.properties.test)}</p>
-              <p class="${ styles.description }">Loading from ${escape(this.context.pageContext.web.title)}</p>
-              <a href="https://aka.ms/spfx" class="${ styles.button }">
-                <span class="${ styles.label }">Learn more</span>
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>`;
+    <section class="${styles.helloWorld} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
+      <div class="${styles.welcome}">
+        <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
+        <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
+        <div>${this._environmentMessage}</div>
+      </div>
+      <div>
+        <h3>Welcome to SharePoint Framework!</h3>
+        <div>Web part description: <strong>${escape(this.properties.description)}</strong></div>
+        <div>Web part test: <strong>${escape(this.properties.test)}</strong></div>
+        <div>Loading from: <strong>${escape(this.context.pageContext.web.title)}</strong></div>        
+      </div>
+    </section>`;
     ```
 
 1. Notice how `${ }` is used to output the variable's value in the HTML block. An extra HTML `div` is used to display `this.context.pageContext.web.title`.
@@ -100,63 +97,6 @@ You need a list model to start working with SharePoint list data. To retrieve th
 
     The **ISPList** interface holds the SharePoint list information that we're connecting to.
 
-## Retrieve lists from mock store
-
-To test your mocked data, you'll need a mock store that returns mock data.
-
-### To create a mock store
-
-1. Create a new file **MockHttpClient.ts** in the **src\webparts\helloWorld** folder.
-1. Copy the following code into **MockHttpClient.ts**:
-
-    ```typescript
-    import { ISPList } from './HelloWorldWebPart';
-
-    export default class MockHttpClient  {
-
-      private static _items: ISPList[] = [{ Title: 'Mock List', Id: '1' },
-                                          { Title: 'Mock List 2', Id: '2' },
-                                          { Title: 'Mock List 3', Id: '3' }];
-
-      public static get(): Promise<ISPList[]> {
-        return new Promise<ISPList[]>((resolve) => {
-          resolve(MockHttpClient._items);
-        });
-      }
-    }
-    ```
-
-    Things to note about the code:
-
-    - It exports the `MockHttpClient` class as a default module so that it can be imported in other files.
-    - It builds the initial `ISPList` mock array and returns an array of items.
-
-1. Save the file.
-
-You can now use the `MockHttpClient` class in the `HelloWorldWebPart` class. You first need to import the `MockHttpClient` module.
-
-### Import the MockHttpClient class
-
-1. Locate and open the **HelloWorldWebPart.ts** file.
-1. Locate the line `import * as strings from 'HelloWorldWebPartStrings';` and add the following code immediately after it:
-
-    ```typescript
-    import MockHttpClient from './MockHttpClient';
-    ```
-
-1. Add the following method that mocks the list retrieval inside the `HelloWorldWebPart` class.
-
-    ```typescript
-    private _getMockListData(): Promise<ISPLists> {
-      return MockHttpClient.get()
-        .then((data: ISPList[]) => {
-          var listData: ISPLists = { value: data };
-          return listData;
-        }) as Promise<ISPLists>;
-    }
-    ```
-
-1. Save the file.
 
 ## Retrieve lists from SharePoint site
 
@@ -167,7 +107,7 @@ SharePoint Framework includes a helper class `spHttpClient` to execute REST API
 ### To use this helper class, import them from the @microsoft/sp-http module
 
 1. Scroll to the top of the **HelloWorldWebPart.ts** file.
-1. Locate the line `import MockHttpClient from './MockHttpClient';` and add the following code immediately after it:
+1. Locate the line `import * as strings from 'HelloWorldWebPartStrings';` and add the following code immediately after it:
 
     ```typescript
     import {
@@ -202,7 +142,7 @@ The SharePoint Framework uses [Sass](http://sass-lang.com/) as the CSS pre-proce
 
     By default, the styles are scoped to your web part. You can see that as the styles are defined under `.helloWorld`.
 
-1. Add the following styles after the `.button` style, but still inside the main `.helloWorld` style section:
+2. Add the following styles after the `.links` style:
 
     ```css
     .list {
@@ -234,7 +174,7 @@ The SharePoint Framework uses [Sass](http://sass-lang.com/) as the CSS pre-proce
     }
     ```
 
-1. Save the file.
+3. Save the file.
 
     Gulp rebuilds the code in the console as soon as you save the file. This generates the corresponding typings in the **HelloWorldWebPart.module.scss.ts** file. After compiled to TypeScript, you can then import and reference these styles in your web part code.
 
@@ -251,18 +191,8 @@ The SharePoint Framework uses [Sass](http://sass-lang.com/) as the CSS pre-proce
 
 Open the `HelloWorldWebPart` class.
 
-SharePoint workbench gives you the flexibility to test web parts in your local environment and from a SharePoint site. SharePoint Framework aids this capability by helping you understand which environment your web part is running from by using the `isServedFromLocalhost` property.
-
-### Use the `isServedFromLocalhost` property
-
-1. Import the `Environment` and the `EnvironmentType` modules from the **\@microsoft/sp-core-library** bundle. Add it to the `import` section at the top as shown in the following code:
-
-    ```typescript
-    import {
-      Environment,
-      EnvironmentType
-    } from '@microsoft/sp-core-library';
-    ```
+> [!NOTE]
+> SharePoint Framework provides you options to detect environment details and host ___location using the `isServedFromLocalhost` property or with EnvironmentType details. In this case we'll focus on connecting to the data in the site which is hosting the online workbench.
 
 1. Add the following private method inside the `HelloWorldWebPart` class:
 
@@ -285,38 +215,20 @@ SharePoint workbench gives you the flexibility to test web parts in your local e
 
     This method references the new CSS styles added earlier by using the `styles` variable and is used to render list information that will be received from REST API.
 
-1. Save the file.
-1. Add the following private method inside the `HelloWorldWebPart` class to call the respective methods to retrieve list data:
+2. Save the file.
+3. Add the following private method inside the `HelloWorldWebPart` class to call the method to retrieve list data:
 
     ```typescript
     private _renderListAsync(): void {
-      // Local environment
-      if (this.context.isServedFromLocalhost) {
-        this._getMockListData().then((response) => {
+      this._getListData()
+        .then((response) => {
           this._renderList(response.value);
         });
-      }
-      else if (Environment.type == EnvironmentType.SharePoint ||
-               Environment.type == EnvironmentType.ClassicSharePoint) {
-        this._getListData()
-          .then((response) => {
-            this._renderList(response.value);
-          });
-      }
     }
     ```
 
-    Things to note about `EnvironmentType` in the `_renderListAsync()` method:
-
-    - The `Environment.type` property helps you check if you are in a local or SharePoint environment.
-    - The correct method is called depending on where your workbench is hosted.
-
-1. Save the file.
+4. Save the file.
 
-> [!IMPORTANT]
-> The above code is intended to work only when you're working with the SharePoint Framework v1.14 or later.
->
-> This is because the `isServedFromLocalhost` property was introduced in SPFx v1.14.
 
 ## Retrieve list data
 
@@ -348,9 +260,9 @@ SharePoint workbench gives you the flexibility to test web parts in your local e
 
 1. If you're using the SharePoint Framework v1.12.1 or earlier, for instance if you're on SharePoint Server on-premises, switch to your local workbench and add the HelloWorld web part.
 
-    You should see the mock data returned.
+    You should see the list data returned.
 
-    ![Render lists data from localhost](../../../images/sp-lists-render-localhost.png)
+    ![Render lists data from localhost](../../../images/sp-lists-render-online-workbench.png)
 
 1. Now you can stop the server from running. Switch to the console and stop **gulp serve**. Select <kbd>CTRL</kbd>+<kbd>C</kbd> to stop the gulp task.
 

docs/images/new-app-catalog-experience-notice.png

@@ -50,19 +50,47 @@ For information on enabling and configuring the Microsoft 365 CDN in your ShareP
     The **package-solution.json** file defines the package metadata as shown in the following code:
 
     ```json
-    {
-      "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
-      "solution": {
-        "name": "helloword-webpart-client-side-solution",
-        "id": "3c1af394-bbf0-473c-bb7d-0798f0587cb7",
-        "version": "1.0.0.0",
-        "includeClientSideAssets": true,
-        "isDomainIsolated": false
-      },
-      "paths": {
-        "zippedPackage": "solution/helloword-webpart.sppkg"
-      }
+   {
+        "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+        "solution": {
+            "name": "mysolution-client-side-solution",
+            "id": "ee1a495d-c7bb-499b-bd71-728aaeb79cd2",
+            "version": "1.0.0.0",
+            "includeClientSideAssets": true,
+            "skipFeatureDeployment": true,
+            "isDomainIsolated": false,
+            "developer": {
+                "name": "",
+                "websiteUrl": "",
+                "privacyUrl": "",
+                "termsOfUseUrl": "",
+                "mpnId": "Undefined-1.14.0"
+            },
+            "metadata": {
+            "shortDescription": {
+                "default": "mysolution description"
+            },
+            "longDescription": {
+                "default": "mysolution description"
+            },
+            "screenshotPaths": [],
+            "videoUrl": "",
+            "categories": []
+            },
+            "features": [
+            {
+                "title": "mysolution Feature",
+                "description": "The feature that activates elements of the mysolution solution.",
+                "id": "d72e47b2-d5a2-479f-9f9a-85e1e7472dee",
+                "version": "1.0.0.0"
+            }
+            ]
+        },
+        "paths": {
+            "zippedPackage": "solution/mysolution.sppkg"
+        }
     }
+
     ```
 
 The default value for the `includeClientSideAssets` is `true`, which means that static assets are packaged automatically in the **\*.sppkg** files, and you don't need to separately host your assets from an external system.
@@ -89,15 +117,15 @@ If Microsoft 365 CDN *is enabled*, it's used automatically with default settings
     > If you're interested in what actually got packaged inside of the **\*.sppkg** file, you can look in the content of the **sharepoint/solution/debug** folder.
 
 1. Upload or drag and drop the newly created client-side solution package to the app catalog in your tenant.
-1. Because you already deployed the package, you're prompted as to whether to replace the existing package. Select **Replace It**.
+1. Because you already deployed the package, you're prompted as to whether to replace the existing package. Select **Replace**.
 
     ![Override existing solution](../../../images/cdn-override-helloworld-webpart-package.png)
 
-1. Notice how the **___domain** list in the prompt says *SharePoint Online*. This is because the content is either served from the Microsoft 365 CDN or from the app catalog, depending on the tenant settings. Select **Deploy**.
+1. Notice how the **___domain** list in the prompt says *SharePoint Online*. This is because the content is either served from the Microsoft 365 CDN or from the app catalog, depending on the tenant settings. Select **Enable app**.
 
     ![Installation popup from app catalog for the SPFx solution](../../../images/cnd-trust-helloworld-webpart-solution.png)
 
-1. Open the site where you previously installed the **helloworld-webpart-client-side-solution** or installed the solution to a new site.
+1. Open the site where you previously installed the **helloworld-webpart-client-side-solution** or install the solution to a new site.
 1. After the solution has been installed, select **Add a page** from the *gear* menu, and select **HelloWorld** from the modern page web part picker to add your custom web part to page.
 
     ![HelloWorld web part visible in web part picker for modern page](../../../images/cdn-web-part-picker.png)