Edit

Quickstart: build your first app with VS Code

Applies to: Developer

Use the SharePoint Embedded Visual Studio Code extension to create a standard container type for your first app. The extension also configures the owning app, attaches Azure billing, and registers the container type. Then you create a container and run a local sample app.

This article starts the build journey. For more billing guidance, see Create and configure a container type.

Prerequisites

Before you start, make sure you have:

  • Visual Studio Code installed.
  • Administrative access to a Microsoft 365 tenant.
  • A tenant with SharePoint available.
  • An Azure subscription and resource group that your account can access.
  • Owner or Contributor permissions on the Azure subscription.
  • Node.js and npm installed for the sample app.
  • Permission to grant admin consent in Microsoft Entra ID.

Important

You need administrative access to a Microsoft 365 tenant. If you don't have a tenant, use the Microsoft 365 Developer Program, Microsoft Customer Digital Experience, or a Microsoft 365 E3 trial.

Install the extension

  1. Open Visual Studio Code.
  2. Open Extensions from the activity bar.
  3. Search for SharePoint Embedded.
  4. Select Install.
  5. If the extension is already installed, update it.
  6. Select the SharePoint Embedded icon in the activity bar.

Sign in

  1. In the SharePoint Embedded view, select the sign-in action.
  2. Use a Microsoft 365 administrator account.
  3. Complete authentication in the browser.
  4. Review the requested permissions.
  5. Select Accept to grant admin consent.
  6. Return to Visual Studio Code when redirected.

Important

Review the consent prompt carefully. The extension needs tenant permissions to configure development resources.

Screenshot of the SharePoint Embedded sign-in view in Visual Studio Code.

After you sign in, the extension shows the SharePoint Embedded home view.

Screenshot of the SharePoint Embedded home view in Visual Studio Code after sign-in. The view lists actions to create a container type and load a sample app.

Create a standard container type

A container type defines the relationship, access privileges, billing accountability, and selected behaviors for a set of SharePoint Embedded containers.

  1. Select Create Container Type.
  2. For the billing method, select standard.
  3. Enter a container type name.
  4. Follow the prompts until creation completes.

Screenshot of the Visual Studio Code input box prompting for a container type name during the Create Container Type flow.

Use a standard container type when the organization that owns the app pays for SharePoint Embedded usage. For evaluation, choose trial. For customer-tenant billing, choose the pass-through option, which uses the directToCustomer billing classification.

Create or select the owning app

Every container type has one owning Microsoft Entra ID application.

  1. Create a new Microsoft Entra ID application or select an existing application ID.
  2. If you create a new application, enter its name.
  3. Let the extension configure development settings.

Screenshot of the Visual Studio Code input box prompting for a Microsoft Entra ID application name while creating the owning app for the container type.

Caution

If you select an existing application, the extension updates that app's configuration. Don't use a production app for this quickstart. For the model, see SharePoint Embedded app architecture.

Configure standard billing

Standard container types require Azure billing. The extension attaches billing by using an Azure subscription and resource group that your account can access.

  1. Select an Azure subscription.
  2. Select a resource group.
  3. Wait for the extension to register the Microsoft.Syntex resource provider and attach billing.

If you skip billing setup or don't have the required Azure permissions, the tree shows Billing not set up. To finish setup later, right-click the container type. Then select Attach billing.

Register the container type locally

You must register the container type in the consuming tenant before your app can create containers or access content.

  1. After creation, follow the prompt to register the container type in the local tenant.
  2. If the prompt isn't visible, right-click the container type and select Register.
  3. Review the permissions.
  4. Grant admin consent in the browser.
  5. Return to Visual Studio Code. Registration configures the permissions the owning app can use against containers of the container type.

Screenshot of the SharePoint Embedded extension prompting to register the container type on the local tenant, with the registration action highlighted.

Create your first container

  1. In the SharePoint Embedded tree, expand your container type.
  2. Right-click Containers.
  3. Select Create container.
  4. Enter a container name.
  5. Confirm the container appears in the tree.

A container is the basic storage unit and security boundary in SharePoint Embedded.

Screenshot of the SharePoint Embedded tree in Visual Studio Code. A container type is expanded, the Containers node is right-clicked, and the Create container command is selected.

Screenshot of the Visual Studio Code input box prompting for a container name.

Load a sample app

  1. In the SharePoint Embedded view, select Load Sample App.
  2. Choose a SharePoint Embedded sample.

Screenshot of the SharePoint Embedded extension home view with the Load Sample App action selected to scaffold a sample application.

  1. Review the warning about local plain text secrets.

  2. If prompted to create a client secret, select OK for local development.

  3. Let the extension populate the runtime configuration file.

Important

The sample configuration is for development only. It stores authentication secrets in plain text on your local machine.

Run the sample app

Open a terminal and run the sample app from the generated sample directory.

cd [your-path]\SharePoint-Embedded-Samples\Custom Apps\boilerplate-typescript-react
npm run start

The sample starts:

  • A React client application.
  • An Azure Functions application server.

Wait for both console outputs to appear.

Then:

  1. Open http://localhost:8080.
  2. Sign in with the same Microsoft 365 administrator account.
  3. Select Containers on the home page.
  4. Create containers and upload files from the sample UI.

Note

Initial startup can take several minutes while dependencies install and both applications build.

Troubleshoot startup

Symptom Check
Port conflict The app tries the next available port when port 8080 is in use.
Dependencies fail Run npm install, then run npm run start again.
Authentication error Confirm the Microsoft Entra ID app has the expected redirect URIs.
Access denied Confirm registration and admin consent succeeded.
Billing not set up Confirm you have Owner or Contributor permissions on the selected Azure subscription, then use Attach billing.

Clean up

When you're finished testing:

  1. Remove test containers that you no longer need.
  2. Review Azure billing resources that you created for this quickstart.
  3. Remove local sample secrets that are no longer needed.

Next steps

Learn more about container type options in Create and configure a container type.

  • Last updated on