You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Update VS Code Extension tutorial documentation (SharePoint#10327)
* Update VS Code Extension tutorial documentation
* Remove duplicated line
* use authorize and authenticate explicitly
* fix word
* promote user review permissions
* fix casing
* request user update to latest version of vs code extension
* Link to setup app registrations
* Acrolinx updates
* typos, grammar, markdown formatting
* 🐞 fix automated build finding - no abs links
---------
Co-authored-by: grjoseph <[email protected]>
Co-authored-by: Andrew Connell <[email protected]>
Copy file name to clipboardExpand all lines: docs/embedded/getting-started/spembedded-for-vscode.md
+80-14Lines changed: 80 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
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: 03/03/2025
4
+
ms.date: 07/16/2025
5
5
ms.localizationpriority: high
6
6
---
7
7
@@ -10,34 +10,40 @@ ms.localizationpriority: high
10
10
The SharePoint Embedded Visual Studio Code extension helps developers get started for free with SharePoint Embedded application development.
11
11
12
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).
13
+
> To start building with SharePoint Embedded, you'll need administrative access to a Microsoft 365 tenant.
14
+
> If you don't 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 a[Microsoft 365 E3 license](https://www.microsoft.com/microsoft-365/enterprise/microsoft365-plans-and-pricing).
15
15
16
16
## Install SharePoint Embedded for Visual Studio Code
17
17
18
18
1. Open a new window in [Visual Studio Code](https://code.visualstudio.com/) and navigate to "**Extensions**" on the activity bar.
19
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
20
1. Select **"Install"** and the SharePoint Embedded icon will appear on the activity bar.
21
+
1. If already installed, please update to the latest version if one is available.
21
22
1. Select the icon to open the SharePoint Embedded view and create a container type with trial configuration.
22
23
23
24
24
25
25
26
### Sign in with admin credentials
26
27
27
-
To use the extension, you must sign into a Microsoft 365 tenant with an administrator account.
28
-
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).
28
+
To use the extension, you must sign in to a Microsoft 365 tenant with an administrator account.
30
29
31
30
32
31
33
32
- Authentication opens a new tab in an external browser to grant permissions
34
-
- Select **Accept** on the pop-up window prompting admin consent
33
+
34
+
35
+
36
+
- Review the requested permissions carefully, then select **Accept** on the pop-up window prompting admin consent
39
+
40
+
After successful authorization, select open on the dialog to be redirected to VSCode:
41
+
42
+
37
43
38
44
## Create a container type with a trial configuration
39
45
40
-
Once signed in, you are prompted to create a [container type with trial configuration](./containertypes.md#trial-container-type). 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](containertypes.md).
46
+
Once signed in, you're prompted to create a [container type with trial configuration](./containertypes.md#trial-container-type). 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](containertypes.md).
@@ -60,20 +66,25 @@ Every container type is owned by a Microsoft Entra ID application. The first ste
60
66
> [!NOTE]
61
67
> 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.
62
68
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.
69
+
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.
64
70
65
71
## Register your container type
66
72
67
73
After creating your container type, you'll need to register that container type on your local tenant. Learn more about container type [registration](./register-api-documentation.md).
68
74
69
75
- Follow the prompts and select **Register on local tenant** on the lower right corner of the VS Code window
> This isn't intended for production environments. [Find out more on how to setup Application Registration for production environments here.](/entra/identity-platform/quickstart-register-app)
127
+
128
+
## Using Sample App
129
+
130
+
In your terminal, run the following command, this will start the sample application, which consists of 2 parts:
131
+
132
+
1.**React Client Application** - The frontend user interface running on port 8080
133
+
1.**Azure Function Application Server** - The backend API server that handles SharePoint Embedded operations
134
+
135
+
```console
136
+
# Navigate to your sample application directory
137
+
cd [your-path]\SharePoint-Embedded-Samples\Samples\spe-typescript-react-azurefunction
138
+
139
+
# Install dependencies and start the application
140
+
npm run start
141
+
```
142
+
143
+
> [!NOTE]
144
+
> The initial startup may take a few minutes as dependencies are installed and both applications are built. Wait for both console outputs to appear before navigating to the application.
145
+
146
+
This will install the dependencies and run the server and client application, once running, you'll see the following in the terminal, after which you can navigate to http://localhost:8080 to access the application.
147
+
148
+
> This sample application stores authentication secrets in plain text for development purposes only. Never use this configuration in a production environment.
163
+
164
+
### Troubleshooting
165
+
166
+
If you encounter issues:
167
+
168
+
-**Port already in use**: If port 8080 is already in use, the application will automatically try the next available port
169
+
-**Dependencies not installing**: Try running `npm install` manually before `npm run start`
170
+
-**Authentication errors**: Ensure your Microsoft Entra ID app is properly configured with the correct redirect URIs
171
+
106
172
## Export Postman Environment
107
173
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.
174
+
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 Postal worker and immediately call the SharePoint Embedded APIs.
0 commit comments