microsoft-graph-explorer-v4
microsoft-graph-explorer-v4 copied to clipboard
React/Redux version of Graph Explorer used to learn the Microsoft Graph Api
Microsoft Graph Explorer V4
The Microsoft Graph Explorer V4 lets developers quickly navigate and test API endpoints.
The Graph Explorer is written in TypeScript and powered by:
Running the explorer locally
npm installto install project dependencies.npmis installed by default with Node.js.npm startstarts the TypeScript compiler in watch mode and the local server. It should open your browser automatically with the Graph Explorer at http://localhost:3000/.
Enabling authentication with your own credentials
- Sign in to your Microsoft account (or Create one) at the Microsoft Azure Portal.
- Find the Azure service named App registrations. If you haven't used this service before, you might need to search for it in the search bar.
- In the App registrations page, click
+ New registration. You will be redirected to a form in the Microsoft Azure portal where you Register an application. Fill out the form and set the Redirect URI to aSingle-page application (SPA)withhttp://localhost:3000. You can also set it from authentication tab in the app you have just created. - Create a
.envfile at the root of the project/repo and add the following keys.- REACT_APP_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
- REACT_APP_INSTRUMENTATION_KEY=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
Where
REACT_APP_CLIENT_IDis theApplication (client) IDfrom the Azure portal andREACT_APP_INSTRUMENTATION_KEYis theObject IDfrom the portal.
Other commands
npm testto run tests from the command line for scenarios like parsing metadata and functional explorer tests.npm run cito run accessibility tests from the command linenpm run lintlinting your files
Contributing
Please see the contributing guidelines.
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.
Testing Accessbility
- Download the latest stable chromedriver from here.
- In your
.envfile, create a variableREACT_APP_CHROMEDRIVER_PATHand save the path to yourchromedriver.exefile. For example (on a Windows PC) it would be :REACT_APP_CHROMEDRIVER_PATH=C:\\SeleniumWebDrivers\\ChromeDriver\\chromedriver.exeTake note of the format. - Save your changes.
- On your terminal run the command
npm install. - Once the installation is complete run the command
npm run ci.
Known issues
- You cannot remove permissions by using the Graph Explorer UI. You will need to remove the application consent and then re-consent to remove permissions. I know, this is far from a good experience.
Additional resources
Copyright
Copyright (c) 2017 Microsoft. All rights reserved.