|
1 | 1 | ---
|
2 | 2 | title: SharePoint Embedded for Visual Studio Code
|
3 | 3 | description: Installation and getting started with SharePoint Embedded for Visual Studio Code
|
4 |
| -ms.date: 05/21/2024 |
| 4 | +ms.date: 07/17/2024 |
5 | 5 | ms.localizationpriority: high
|
6 | 6 | ---
|
7 | 7 |
|
8 | 8 | # SharePoint Embedded for Visual Studio Code
|
9 | 9 |
|
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. |
11 | 11 |
|
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). |
17 | 15 |
|
18 |
| -## Installing SharePoint Embedded for Visual Studio Code |
| 16 | +## Install SharePoint Embedded for Visual Studio Code |
19 | 17 |
|
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. |
21 | 22 |
|
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 | + |
23 | 24 |
|
24 |
| - |
| 25 | +### Sign in with admin credentials |
25 | 26 |
|
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. |
27 | 28 |
|
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). |
29 | 30 |
|
30 |
| -### Sign In |
| 31 | + |
31 | 32 |
|
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 | + |
33 | 37 |
|
34 |
| - |
| 38 | +## Create a container type with a trial configuration |
35 | 39 |
|
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). |
37 | 41 |
|
38 |
| -### Create a free trial container type |
| 42 | + |
39 | 43 |
|
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. |
41 | 46 |
|
42 |
| - |
| 47 | + |
43 | 48 |
|
44 | 49 | > [!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. |
46 | 51 |
|
47 |
| -#### Create a Microsoft Entra ID App |
| 52 | +## Create a Microsoft Entra ID App |
48 | 53 |
|
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) |
50 | 55 |
|
51 |
| - |
| 56 | +- Follow the prompts to name your new Entra application or select an existing application ID |
| 57 | + |
| 58 | + |
52 | 59 |
|
53 | 60 | > [!NOTE]
|
54 | 61 | > 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.
|
55 | 62 |
|
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. |
57 | 64 |
|
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 |
59 | 66 |
|
60 |
| - |
| 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). |
61 | 68 |
|
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 |
63 | 71 |
|
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 | + |
65 | 73 |
|
66 |
| - |
| 74 | +#### Grant permissions |
67 | 75 |
|
68 |
| -### Export Postman Environment |
| 76 | +When registering your container type you'll need to grant permissions to access your application |
69 | 77 |
|
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 | + |
| 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 | + |
| 90 | + |
71 | 91 |
|
72 |
| - |
| 92 | +## Recycling Containers |
73 | 93 |
|
74 |
| - |
| 94 | +You can also recycle and recover containers within the extension. |
75 | 95 |
|
76 |
| -### Add a guest app to your free trial container type |
| 96 | + |
77 | 97 |
|
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 | + |
| 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 | + |
| 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. |
79 | 109 |
|
80 |
| - |
| 110 | + |
0 commit comments