page_type: sample description: This sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from JavaScript browser apps. products:

• ms-graph
• office-exchange-online languages:
• javascript

Microsoft Graph sample JavaScript single-page app

This sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from JavaScript browser apps.

Prerequisites

Before you start this tutorial, you will need access to an HTTP server to host the sample files. This could be a test server on your development machine, or a remote server.

You should also have either a personal Microsoft account with a mailbox on Outlook.com, or a Microsoft work or school account. If you don't have a Microsoft account, there are a couple of options to get a free account:

• You can sign up for a new personal Microsoft account.
• You can sign up for the Microsoft 365 Developer Program to get a free Microsoft 365 subscription.

Register the app

Create a new Azure AD web application registration using the Azure Active Directory admin center.

1. Open a browser and navigate to the Azure Active Directory admin center. Login using a personal account (aka: Microsoft Account) or Work or School Account.

2. Select Azure Active Directory in the left-hand navigation, then select App registrations under Manage.

   [!NOTE] Azure AD B2C users may only see App registrations (legacy). In this case, please go directly to https://aka.ms/appregistrations.

3. Select New registration. On the Register an application page, set the values as follows.

   • Set Name to JavaScript Graph Tutorial.
   • Set Supported account types to Accounts in any organizational directory and personal Microsoft accounts.
   • Under Redirect URI, set the first drop-down to Single-page application (SPA) and set the value to http://localhost:8080.

4. Choose Register. On the JavaScript Graph Tutorial page, copy the value of the Application (client) ID and save it, you will need it in the next step.

Configure the sample

1. Rename the ./graph-tutorial/src/Config.example.js file to ./graph-tutorial/src/Config.js.
2. Edit the ./graph-tutorial/src/Config.js file and make the following changes.
3. Replace YOUR_APP_ID_HERE with the Application Id you got from the App Registration Portal.

[!NOTE] The steps in this section require Node.js.

Running the sample

Host the files in the graph-tutorial directory on your HTTP server. If you don't have access to a server, here are a couple of options for test server tools to run on your development machine.

http-server

If you have Node.js, http-server is a simple command-line HTTP server.

1. Open your command-line interface (CLI) in the graph-tutorial directory.

2. Run the following command to start a web server in that directory.

   npx http-server -c-1 -p 8080
   

3. Open your browser and browse to http://localhost:8080.

dotnet-serve

If you have the .NET SDK installed, [dotnet-serve] is a simple command-line HTTP server.

1. Open your command-line interface (CLI) in the graph-tutorial directory.

2. Run the following command to start a web server in that directory.

   dotnet serve -p 8080
   

3. Open your browser and browse to http://localhost:8080.

Code of conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.