Super fast creating react app with Microsoft Entra on Azure Web app
Published Aug 08 2024 12:40 AM 2,524 Views
Microsoft

TOC
Steps
References

 

Steps:

  1. Create an App registration in Microsoft Entra.

theringe_0-1723101945463.png

 

 

 

  1. After creation, note down the Application (client) ID and Directory (tenant) ID, which will be used later.

theringe_1-1723101945465.png

 

 

  1. Create a Linux web app in Azure Portal and use Node.js.

theringe_2-1723101945466.png

 

 

  1. After creation, note down the App Name, which will be used later.

theringe_3-1723101945467.png

 

 

 

  1. Download the sample code in your development environment:

 

git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git

 

 

 

  1. You can use VS Code to open the react-spa subfolder.

 

 

 

  1. Edit src/authConfig.js and make the corresponding modifications:
clientId Specify the Application (client) ID obtained in step 2
authority Fill in the Directory (tenant) ID obtained in step 2 in the specified format. (https://login.microsoftonline.com/<TENANT_ID>)
redirectUri Fill in the App Name obtained in step 4 in the specified format. (https://<APP_NAME>.azurewebsites.net/.auth/login/aad/callback)

theringe_4-1723101945469.png

 

 

 

  1. Run the following command to install the relevant packages:

 

npm install

 

 

  1. Run the following command to compile the project. After execution, a build subfolder will be created.

 

npm run build

 

 

  1. Create or modify build/.deployment with the following content:

 

[config]
SCM_DO_BUILD_DURING_DEPLOYMENT=false

 

theringe_5-1723101945471.png

 

 

 

  1. Publish your project, specifying the build subfolder during the publishing process.

theringe_6-1723101945472.png

theringe_7-1723101945474.png

theringe_8-1723101945475.png

 

 

  1. After publishing, go back to the App registration in Microsoft Entra, find Authentication, create a Platform, specify Single-Page Application, and fill in the value of authority from Step 7.

theringe_9-1723101945477.png

 

 

 

  1. Go back to the project, navigate to Configuration, and specify the Startup Command as follows:

 

pm2 serve /home/site/wwwroot --no-daemon --spa

 

theringe_10-1723101945478.png

 

 

 

  1. After restarting the web app, you can visit your webpage using a browser.

theringe_11-1723101945479.png

theringe_12-1723101945480.png

theringe_13-1723101945480.png

 

 

 

References:

Quickstart: Sign in to a SPA & call an API - React - Microsoft identity platform | Microsoft Learn

 

 

Co-Authors
Version history
Last update:
‎Aug 08 2024 12:40 AM
Updated by: