REACTJS SOURCE CODE IS VISIBLE IN DEVELOPER'S TOOL

Question

Hi Team,

I am deploying my reactjs application to azure app services using vs code azure extension.
But after deploying i am able to see my source code in Source tab of browsers' developers tool, although i have implemented the possible ways to hide the sourcemap of reactjs code (1. added .env file with value GENERATE_SOURCEMAP = false. 2. also done "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts --max_old_space_size=2048 build" in my package.json file)

can you please suggest me some ways to hide the reactjs code from browser in azure app service.

Thanks in advance.

Best Regards,
Rahul Nag

Answer 1

Update: The above issue is resolved and below is the description, adding here for helping broader community.

Issue: The content deployed via VS Code’s extension was zipping and deploying all the root contents of the web app directly on to App Service and not just the contents of build directory, also the web app was running from the root contents and not the build contents.
and when opening developer tools in the browser, and go under the File Contents section, all the root directory structure is visible to end user which is posing security concerns, as the entire directory structure with all the file contents, which also shows ‘/home/site/wwwroot’ contents should not be visible to end user.

Resolution:

• To have the content to be served from the build directory for static web app framework like Reactjs, we can leverage pm2 webserver that comes pre-installed in our node images.
• This article talks about the use of pm2: Using PM2 on App Service Linux - (azureossd.github.io)
• A command like this can be implemented as a start up command from Configuration blade of the App Service from Azure Portal for pm2 to serve contents from the build directory only : pm2 serve /home/site/wwwroot/build --no-daemon --spa.