Super fast creating react app with Microsoft Entra on Azure Web app

TOC
Steps
References

 

Steps:

1. Create an App registration in Microsoft Entra.

 

 

 

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

 

 

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

 

 

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

 

 

 

5. Download the sample code in your development environment:

 

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

 

 

 

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

 

 

 

7. 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)

 

 

 

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

 

npm install

 

 

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

 

npm run build

 

 

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

 

[config]
SCM_DO_BUILD_DURING_DEPLOYMENT=false

 

 

 

 

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

 

 

12. 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.

 

 

 

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

 

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

 

 

 

 

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

 

 

 

References:

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