Share via

Dataverse Web API with client-side JavaScript and Visual Studio Code

Browse code

This project represents the completed steps described in Quickstart: Web API with client-side JavaScript and Visual Studio Code. This sample provides a way to test a Microsoft Entra app registration that is configured for a Single Page Application (SPA) to connect to Dataverse.

Prerequisites

Prerequisite Description
Privileges to create an Entra App registration You can't complete this quickstart without the ability to create a Microsoft Entra app registration to enable it.

If you aren't sure if you can, try the first step to Register a SPA application and find out.
Visual Studio Code If Visual Studio Code isn't installed on your computer, you must download and install Visual Studio Code to run this quickstart.
Node.js Node.js is a runtime environment that allows you to run JavaScript on the server side. This quickstart creates a SPA application that runs JavaScript on the client side in a browser rather than the Node.js runtime. But Node Package Manager (npm) is installed with Node.js, and you need npm to install Parcel and the MSAL.js library. See Install Node.js for instructions.
Parcel Modern web applications typically have a lot of dependencies on open source libraries distributed using npm as well as scripts that need to be managed and optimized during the build process. These tools are usually called 'bundlers'. The most common one is webpack. This quickstart uses Parcel because it offers a simplified experience.

For quickstarts and samples that show SPA applications using different frameworks and bundlers, see Microsoft Entra Single-page applications samples. You can adapt these samples to use Dataverse Web API with the information shown in this quickstart.
Web Technologies Knowledge of HTML, JavaScript, and CSS are required to understand how this quickstart works. Understanding how to make network requests with JavaScript is essential.

How to run the sample

  1. Clone or download the PowerApps-Samples repository.
  2. Open the dataverse/webapi/JS/quickspa folder using Visual Studio Code.
  3. At the root of the quickspa folder, create a .env configuration file based on the .env.example file provided. Follow the steps in Register a SPA application to get values to replace the CLIENT_ID and TENANT_ID placeholder values. Set the BASE_URL to the URL for the Dataverse environment you want to connect to. See Create the .env file for more details.
  4. Open a terminal window in Visual Studio Code.
  5. Type npm install and press Enter to install the devDependencies and dependencies items from the package.json file. These include [parcel](https://www.npmjs.com/package/parcel), [dotenv](https://github.com/motdotla/dotenv#readme), the [@azure/msal-browser](https://www.npmjs.com/package/@azure/msal-browser) library and others.
  6. Type npm start and press Enter to start the local web server on port 1234.

You should expect output to the terminal that looks like this:

Server running at http://localhost:1234
Built in 1.08s

  1. Press Ctrl + click the http://localhost:1234 link to open your browser.

  2. In your browser, select the Login button.

    The Sign in to your account dialog opens.

  3. Select the account that has access to Dataverse.

    The first time you access using a new application (client) ID value, you see this Permissions requested dialog:

    Permissions requested dialog

  4. Select Accept on the Permissions requested dialog.

  5. Select the WhoAmI button.

    The message 'Congratulations! You connected to Dataverse using the Web API.' is displayed with your UserId value from the WhoAmIResponse complex type.

Demonstrates

This sample demonstrates how a properly configured Entra SPA Application configuration can be used together with the Microsoft Authentication Library for JavaScript (MSAL.js) to connect to Dataverse.

You can use the .env file you create in completing this quick start with the Web API Data operations Samples (Client-side JavaScript) because the design is the same.

Clean up

This sample doesn't create any records, so there is nothing to clean up. You should delete the Entra application registration if you aren't planning to use it anymore.