VSCode react deployment uses development build rather than production

Question

VSCode react deployment uses development build rather than production

Tim Schönborn 11

When I deploy my react app to Azure App Service (using the VSCode extension), the output window shows:

...
Running 'yarn run build'...
yarn run v1.22.10
$ react-scripts build
Creating an optimized production build...
Compiled successfully.
...
However, when I visit the app, the react browser extension warns me that the App is using a development build. Does anyone know what's going on here? Am I doing something wrong?

I used CRA to create the app and didn't change any config files.

Thanks!

SnehaAgrawal-MSFT 22,706 Reputation points Moderator

2021-05-31T18:25:28.277+00:00

Thanks for asking question! Could you please share steps/ document you are following to deploy react app to Azure App Service, to help you better on this. Check this blog Deploy Create-React-App using Azure and VSCode or this step by step article might be helpful.

Disclaimer: This response contains a reference to a third-party World Wide Web site. Microsoft is providing this information as a convenience to you.
SnehaAgrawal-MSFT 22,706 Reputation points Moderator

2021-06-02T04:41:29.267+00:00

Just checking if you have chance to see below response. If you are still facing this issue, looking forward to help you on this.
Tim Schonborn 6 Reputation points

2021-10-06T21:40:33.3+00:00

Hi, I switched email addresses and somehow missed the notification for your answer, sorry!
I did follow the tutorial, but without any luck, the application still ends up in development mode (according to the official React Chrome extension). As commented below, I now use a GitHub Action to compile the code. I'd still be interested in getting vscode working though!

1 answer

Your answer

SnehaAgrawal-MSFT 22,706 Reputation points Moderator

2021-05-31T18:25:28.277+00:00

Thanks for asking question! Could you please share steps/ document you are following to deploy react app to Azure App Service, to help you better on this. Check this blog Deploy Create-React-App using Azure and VSCode or this step by step article might be helpful.

Disclaimer: This response contains a reference to a third-party World Wide Web site. Microsoft is providing this information as a convenience to you.
SnehaAgrawal-MSFT 22,706 Reputation points Moderator

2021-06-02T04:41:29.267+00:00

Just checking if you have chance to see below response. If you are still facing this issue, looking forward to help you on this.
Tim Schonborn 6 Reputation points

2021-10-06T21:40:33.3+00:00

Hi, I switched email addresses and somehow missed the notification for your answer, sorry!
I did follow the tutorial, but without any luck, the application still ends up in development mode (according to the official React Chrome extension). As commented below, I now use a GitHub Action to compile the code. I'd still be interested in getting vscode working though!

Answer 1

Hi 1

Hello! I am also having this problem with React app deployed to Azure App Service through the VSCode extension. I am never asked what directory I want to publish FROM like in the tutorial linked above (I believe this tutorial uses a previous VSCode extension version), and it says it is building the production mode of react in the output during the deployment, but when I go in to actually look at it, its in development mode.

A react app site in development mode will look unprofessional and insecure to tech-savvy clients.

Thank you!

Tim Schonborn 6 Reputation points

2021-10-06T21:36:58.083+00:00

I wasn't able to solve this, so instead of using the vscode extension, I switched to a GitHub Action workflow that builds and deploys the application. In the deployment center of the app service page, you can auto-generate the right workflow.yml file to automate this process. Hope this helps!

Share via

VSCode react deployment uses development build rather than production

1 answer

Your answer