Skip to content

Commit 4ed8915

Browse files
Merge pull request SharePoint#9726 from cindylay/530update
Updating content
2 parents 389d0b3 + 1f0f314 commit 4ed8915

24 files changed

+72
-39
lines changed
Lines changed: 67 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,110 @@
11
---
22
title: SharePoint Embedded for Visual Studio Code
33
description: Installation and getting started with SharePoint Embedded for Visual Studio Code
4-
ms.date: 05/21/2024
4+
ms.date: 07/17/2024
55
ms.localizationpriority: high
66
---
77

88
# SharePoint Embedded for Visual Studio Code
99

10-
The SharePoint Embedded Visual Studio Code extension helps developers get started with SharePoint Embedded application development. With the extension, developers can:
10+
The SharePoint Embedded Visual Studio Code extension helps developers get started for free with SharePoint Embedded application development.
1111

12-
1. Create and configure Microsoft Entra ID app registrations for use with SharePoint Embedded
13-
1. Create and manage [free trial container types](../concepts/app-concepts/containertypes.md#trial-use)
14-
1. Create more guest apps on a [free trial container type](../concepts/app-concepts/containertypes.md#trial-use)
15-
1. Load one of the [sample apps](https://github.com/microsoft/SharePoint-Embedded-Samples) and auto-populate its runtime configuration
16-
1. Export container type and Microsoft Entra ID app settings to a Postman Environment file for use with the [SharePoint Embedded Postman Collection](https://github.com/microsoft/SharePoint-Embedded-Samples/tree/main/Postman)
12+
> [!IMPORTANT]
13+
> To start building with SharePoint Embedded you will need administrative access to Microsoft 365 tenant.
14+
> If you do not already have a tenant, you can get your own tenant with the [Microsoft 365 Developer Program](https://developer.microsoft.com/microsoft-365/dev-program), [Microsoft Customer Digital Experience](https://cdx.transform.microsoft.com/), or create a free trial of an [Microsoft 365 E3 license](https://www.microsoft.com/microsoft-365/enterprise/microsoft365-plans-and-pricing).
1715
18-
## Installing SharePoint Embedded for Visual Studio Code
16+
## Install SharePoint Embedded for Visual Studio Code
1917

20-
To get started with the SharePoint Embedded Visual Studio Code extension, you need to have [Visual Studio Code](https://code.visualstudio.com/) installed on your machine.
18+
1. Open a new window in [Visual Studio Code](https://code.visualstudio.com/) and navigate to "**Extensions**" on the activity bar.
19+
1. Search "SharePoint Embedded" in the Extensions view. You can also view the extension in [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=SharepointEmbedded.ms-sharepoint-embedded-vscode-extension).
20+
1. Select **"Install"** and the SharePoint Embedded icon will appear on the activity bar.
21+
1. Select the icon to open the SharePoint Embedded view and create a container type with trial configuration.
2122

22-
Next, you need to install the [SharePoint Embedded Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=SharepointEmbedded.ms-sharepoint-embedded-vscode-extension) from the Visual Studio Marketplace. You can find the extension by searching for "SharePoint Embedded" in the Visual Studio Code Extensions view, or by visiting the previous link.
23+
![SharePoint Embedded VS Extensions](../images/vsx-images/n1downloadvsx.png)
2324

24-
![SharePoint Embedded on Visual Studio Code Marketplace](../images/spe-vscode-marketplace.png)
25+
### Sign in with admin credentials
2526

26-
Once you have installed the extension, you can access it from the Visual Studio Code Activity Bar, where you'll see a new icon for SharePoint Embedded. Clicking on the icon will open the SharePoint Embedded view, where you can perform various tasks related to SharePoint Embedded application development.
27+
To use the extension, you must sign into a Microsoft 365 tenant with an administrator account.
2728

28-
## Getting Started
29+
If you don't already have a tenant, you can get a tenant through the [Microsoft 365 Developer Program](https://developer.microsoft.com/microsoft-365/dev-program), [Microsoft Customer Digital Experience](https://cdx.transform.microsoft.com/), or create a free trial of an [Microsoft 365 E3 license](https://www.microsoft.com/en-us/microsoft-365/enterprise/microsoft365-plans-and-pricing).
2930

30-
### Sign In
31+
![Install](../images/vsx-images/n2vsx-signin.png)
3132

32-
To use the extension, you'll need to sign into a Microsoft 365 tenant with an administrator account.
33+
- Authentication opens a new tab in an external browser to grant permissions
34+
- Select **Accept** on the pop-up window prompting admin consent
35+
36+
![consentperms](../images/vsx-images/n3vsx-grant-admin-consent.png)
3337

34-
![Sign in](https://github.com/microsoft/SharePoint-Embedded-VS-Code-Extension/assets/108372230/636d45f9-5912-4e2c-9a50-8f5efa472638)
38+
## Create a container type with a trial configuration
3539

36-
If you don't have administrator access to a Microsoft 365 tenant, get your own tenant with the [Microsoft 365 Developer Program](https://developer.microsoft.com/microsoft-365/dev-program).
40+
Once signed in, you are prompted to create a [container type with trial configuration](../concepts/app-concepts/containertypes.md#trial-use). A container type lets you get started calling SharePoint Embedded APIs and building a proof-of-concept application using SharePoint Embedded. Learn more about [container types](../concepts/app-concepts/containertypes.md).
3741

38-
### Create a free trial container type
42+
![home screen](../images/vsx-images/n4vsx-home-screen.png)
3943

40-
Once you've signed in, the first (and only) thing to do next is to create a [free trial container type](../concepts/app-concepts/containertypes.md#trial-use). A free trial container type lets you get started calling SharePoint Embedded APIs and building a proof-of-concept application using SharePoint Embedded.
44+
- Select **Create Trial Container Type**
45+
- Follow the prompts to name your container type. You can change your container type name later on.
4146

42-
![Create free trial container type](https://github.com/microsoft/SharePoint-Embedded-VS-Code-Extension/assets/108372230/a8186b2b-bdf9-400b-820b-2e6ebe51d393)
47+
![create container type](../images/vsx-images/n5a-name-ct.png)
4348

4449
> [!NOTE]
45-
> SharePoint Embedded for Visual Studio Code only supports free trial container types at this time. Paid container types must be made using the SharePoint Online PowerShell Module.
50+
> SharePoint Embedded for Visual Studio Code only supports container types with trial configuration at this time. Other container types with standard or pass-through billing configurations must be created using the SharePoint Online PowerShell Module.
4651
47-
#### Create a Microsoft Entra ID App
52+
## Create a Microsoft Entra ID App
4853

49-
Every container type is owned by a Microsoft Entra ID application. The first step when creating a free trial container type is to create a new or select an existing Microsoft Entra ID application as the owning application. You can either specify the name of your new application or pick one of your existing applications.
54+
Every container type is owned by a Microsoft Entra ID application. The first step when creating a free trial container type is to create a new or select an existing Microsoft Entra ID application as the owning application. You can either specify the name of your new application or pick one of your existing applications. Learn more about SharePoint Embedded [app architecture](../concepts/app-concepts/app-architecture.md)
5055

51-
![Create App](https://github.com/microsoft/SharePoint-Embedded-VS-Code-Extension/assets/108372230/944ecf1b-491c-4e5c-b887-73a5d709e9c5)
56+
- Follow the prompts to name your new Entra application or select an existing application ID
57+
58+
![Create App](../images/vsx-images/n6aname-app.png)
5259

5360
> [!NOTE]
5461
> If you choose an existing application, the extension will update that app's configuration settings for it to work with both SharePoint Embedded and this extension. Doing this is NOT recommended on production applications.
5562
56-
#### Name your free trial container type
63+
After your container type is created and your application is configured, you'll be able to view your Local tenant registration as a tree in the left nav-bar.
5764

58-
Once you have a Microsoft Entra ID application, the last step is to provide a name for your new free trial container type.
65+
## Register your container type
5966

60-
![Name container type](https://github.com/microsoft/SharePoint-Embedded-VS-Code-Extension/assets/108372230/f465d36e-57e8-472a-9d10-7374a28b24b1)
67+
After creating your container type, you'll need to register that container type on your local tenant. Learn more about container type [registration](../concepts/app-concepts/register-api-documentation.md).
6168

62-
### Load Sample App
69+
- Follow the prompts and select **'Register on local tenant'** on the lower right corner of the VS Code window
70+
- If you don't see the prompt, you can right-click on your `<container-type-name>` and select **Register** from the menu
6371

64-
With a free trial container type created, you can use the extension to load one of the SharePoint Embedded sample apps and automatically populate the runtime configuration file with the details of your Microsoft Entra ID app and container type. This allows you to immediately run the sample app on your local machine.
72+
![register](../images/vsx-images/n7aregister-ct.png)
6573

66-
![Load Sample App](https://github.com/microsoft/SharePoint-Embedded-VS-Code-Extension/assets/108372230/da40cd67-83b3-4da9-b743-159edd2802fa)
74+
#### Grant permissions
6775

68-
### Export Postman Environment
76+
When registering your container type you'll need to grant permissions to access your application
6977

70-
The [SharePoint Embedded Postman Collection](https://github.com/microsoft/SharePoint-Embedded-Samples/tree/main/Postman) allows you to explore and call the SharePoint Embedded APIs. The Collection requires an environment file with variables used for authentication and various identifiers. This extension automates the generation of this populated environment file so you can import it into Postman and immediately call the SharePoint Embedded APIs.
78+
An external browser window will pop open for you to sign-in and grant admin consent
79+
80+
![login permissions](../images/vsx-images/n9alogin-grant-permissions.png)
81+
82+
## Create your first container
83+
84+
With your container type registered, you can now create your first container. Only five containers of container type can be created to upload and manage content.
85+
86+
- Right-click on the **Containers** drop-down from the tree in the left nav-bar and select **Create container**
87+
- Enter a name for the container you would like to create
88+
89+
![create container](../images/vsx-images/n10acreate-container.png)
90+
![name container](../images/vsx-images/n11aname-first-cont.png)
7191

72-
![Export Postman Environment](https://github.com/microsoft/SharePoint-Embedded-VS-Code-Extension/assets/108372230/a549866d-55e0-4a25-b173-fc532cc7b49e)
92+
## Recycling Containers
7393

74-
![Postman Import](https://github.com/microsoft/SharePoint-Embedded-VS-Code-Extension/assets/108372230/06884e97-7a4c-41ea-8c19-c0eecfd2e624)
94+
You can also recycle and recover containers within the extension.
7595

76-
### Add a guest app to your free trial container type
96+
![recycle containers](../images/vsx-images/n12arecycle-cont.png)
7797

78-
You can use the extension to add one or more guest apps to your existing free trial container type. Guest apps can be used to create different applications that have access to the same set of containers. For example, you might have one app that delivers your Web experiences, another for mobile experiences, and another for background processing. You can specify both the delegated and application permissions on each guest application you create.
98+
![final home page](../images/vsx-images/n13a-final-home-page.png)
99+
100+
## Load Sample App
101+
102+
With your free trial container type created, you can use the extension to load one of the SharePoint Embedded sample apps and automatically populate the runtime configuration file with the details of your Microsoft Entra ID app and container type.
103+
104+
![Load Sample App](../images/vsx-images/n15vsxsa-c.png)
105+
106+
## Export Postman Environment
107+
108+
The [SharePoint Embedded Postman Collection](https://github.com/microsoft/SharePoint-Embedded-Samples/tree/main/Postman) allows you to explore and call the SharePoint Embedded APIs. The Collection requires an environment file with variables used for authentication and various identifiers. This extension automates the generation of this populated environment file so you can import it into Postman and immediately call the SharePoint Embedded APIs.
79109

80-
![Guest App Permissions](https://github.com/microsoft/SharePoint-Embedded-VS-Code-Extension/assets/108372230/d3394cf6-b174-4c07-8cca-fe742cade70b)
110+
![Export Postman Environment](../images/vsx-images/n14postman-c.png)
68.2 KB
Loading
38.9 KB
Loading
30.6 KB
Loading
94.2 KB
Loading

docs/embedded/images/vscodelaunch.png

175 KB
Loading

docs/embedded/images/vscodelogin.png

9.76 KB
Loading
73.2 KB
Loading

docs/embedded/images/vscodetree.png

92.2 KB
Loading
Loading

0 commit comments

Comments
 (0)