ezkemboi / microsoft-graph-explorer-v4

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:

• React
• Office Fabric

Running the explorer locally

• npm install to install project dependencies. npm is installed by default with Node.js.
• npm start starts 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

• Signing to your Microsoft account or Create one if you don't have.
• In the Dashboard, click Add an app in the Azure portal. You will be redirected to the Microsoft Azure portal where you Register an application. Set Redirect URI to http://localhost:3000.You can also set it from authentication tab in the app you have just created.
• Create a .env file at the root of the project 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_ID is the Application (client) ID from the Azure portal and REACT_APP_INSTRUMENTATION_KEY is the Object ID from the portal.

Other commands

• npm test to run tests from the command line for scenarios like parsing metadata and functional explorer tests.
• npm run ci to run accessibility tests from the command line
• npm run lint linting 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 [e-mail] with any additional questions or comments.

Testing Accessbility

• Download the latest stable chromedriver from here.
• In your .env file, create a variable REACT_APP_CHROMEDRIVER_PATH and save the path to your chromedriver.exe file. For example (on a Windows PC) it would be : REACT_APP_CHROMEDRIVER_PATH=C:\\SeleniumWebDrivers\\ChromeDriver\\chromedriver.exe Take 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

• Microsoft Graph website
• Office Dev Center
• Graph Explorer releases

Copyright

Copyright (c) 2017 Microsoft. All rights reserved.