Movatterモバイル変換


[0]ホーム

URL:


Skip to main content

This browser is no longer supported.

Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.

Download Microsoft EdgeMore info about Internet Explorer and Microsoft Edge
Table of contentsExit editor mode

SharePoint Embedded for Visual Studio Code

Feedback

In this article

The SharePoint Embedded Visual Studio Code extension helps developers get started for free with SharePoint Embedded application development.

Important

To start building with SharePoint Embedded, you'll need administrative access to a Microsoft 365 tenant.If you don't already have a tenant, you can get your own tenant with theMicrosoft 365 Developer Program,Microsoft Customer Digital Experience, or create a free trial of aMicrosoft 365 E3 license.

Install SharePoint Embedded for Visual Studio Code

  1. Open a new window inVisual Studio Code and navigate to "Extensions" on the activity bar.
  2. Search "SharePoint Embedded" in the Extensions view. You can also view the extension inVisual Studio Marketplace.
  3. Select"Install" and the SharePoint Embedded icon will appear on the activity bar.
  4. If already installed, please update to the latest version if one is available.
  5. Select the icon to open the SharePoint Embedded view and create a container type with trial configuration.

SharePoint Embedded VS Extensions

Sign in with admin credentials

To use the extension, you must sign in to a Microsoft 365 tenant with an administrator account.

Install

  • Authentication opens a new tab in an external browser to grant permissions

    authorize and authenticate the extension to your M365 Entra tenant

  • Review the requested permissions carefully, then selectAccept on the pop-up window prompting admin consent

    review before consenting to the permissions the extension is asking for

After successful authorization, select open on the dialog to be redirected to VSCode:

authorization completed in browser now redirecting to visual studio code

Create a container type with a trial configuration

Once signed in, you're prompted to create acontainer type with trial configuration. A container type lets you get started calling SharePoint Embedded APIs and building a proof-of-concept application using SharePoint Embedded. Learn more aboutcontainer types.

home screen

  • SelectCreate Trial Container Type
  • Follow the prompts to name your container type. You can change your container type name later on.

create container type

Note

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.

Create a Microsoft Entra ID App

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 Embeddedapp architecture

  • Follow the prompts to name your new Entra application or select an existing application ID:

Create App

Note

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.

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.

Register your container type

After creating your container type, you'll need to register that container type on your local tenant. Learn more about container typeregistration.

  • Follow the prompts and selectRegister on local tenant on the lower right corner of the VS Code window

    local tenant registration popup

  • If you don't see the prompt, you can right-click on your<container-type-name> and selectRegister from the menu

    register

Grant permissions

Review permissions and follow the prompt to grant admin consent

grant admin consent popup

An external browser window will pop open for you to sign-in and grant admin consent

login permissions

Create your first container

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.

  • Right-click on theContainers drop-down from the tree in the left nav-bar and selectCreate container
  • Enter a name for the container you would like to create

create containername container

Recycling Containers

You can also recycle and recover containers within the extension.

recycle containers

final home page

Load Sample App

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.

Load Sample App

When loading the sample application, you'll be notified that it will create plain text secrets to authenticate on your local machine.

sample app plain text secrets notice

If no client secret is found on your application, it will ask if you would like to create one. Press OK to proceed.

sample app creating client secret

Using Sample App

In your terminal, run the following command, this will start the sample application, which consists of 2 parts:

  1. React Client Application - The frontend user interface running on port 8080
  2. Azure Function Application Server - The backend API server that handles SharePoint Embedded operations
# Navigate to your sample application directorycd [your-path]\SharePoint-Embedded-Samples\Samples\spe-typescript-react-azurefunction# Install dependencies and start the applicationnpm run start

Note

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.

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.

function api console logs

client app console logs

Once both applications are running successfully:

  1. Open your web browser and navigate tohttp://localhost:8080
  2. Sign in using your Microsoft 365 administrator account (the same account used in the VS Code extension)
  3. On the home page, select"Containers" to begin creating containers and uploading files
  4. Follow the on-screen prompts to interact with your SharePoint Embedded containers

home-page-for-spe-sample-app

Important

This sample application stores authentication secrets in plain text for development purposes only. Never use this configuration in a production environment.

Troubleshooting

If you encounter issues:

  • Port already in use: If port 8080 is already in use, the application will automatically try the next available port
  • Dependencies not installing: Try runningnpm install manually beforenpm run start
  • Authentication errors: Ensure your Microsoft Entra ID app is properly configured with the correct redirect URIs

Export Postman Environment

TheSharePoint Embedded Postman Collection 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.

Export Postman Environment


  • Last updated on

In this article