How to Deploy React to Azure App Service Quickly
To deploy a React app to Azure App Service, first build your React app using
npm run build. Then, use the Azure CLI to create an App Service and deploy the build folder with az webapp up or by configuring deployment from a zip file or GitHub repository.Syntax
Here is the basic syntax to deploy a React app to Azure App Service using Azure CLI:
npm run build: Creates a production-ready build of your React app in thebuildfolder.az webapp up --name <app-name> --resource-group <resource-group> --runtime <runtime>: Creates and deploys your app to Azure App Service.az webapp deployment source config-zip --resource-group <resource-group> --name <app-name> --src <zip-file-path>: Deploys a zipped build folder to an existing App Service.
bash
npm run build
az webapp up --name my-react-app --resource-group myResourceGroup --runtime "NODE|16-lts"Example
This example shows how to build a React app and deploy it to Azure App Service using Azure CLI commands.
bash
cd my-react-app
npm install
npm run build
az login
az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku B1 --is-linux
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name my-react-app --runtime "NODE|16-lts"
zip -r build.zip build
az webapp deployment source config-zip --resource-group myResourceGroup --name my-react-app --src build.zipOutput
Resource group 'myResourceGroup' created.
App Service plan 'myAppServicePlan' created.
Web app 'my-react-app' created.
Deployment successful.
Common Pitfalls
- Forgetting to run
npm run buildbefore deployment causes the app to fail because the source code is not compiled. - Not zipping the
buildfolder properly when using zip deployment leads to deployment errors. - Using an incorrect runtime in Azure App Service can cause the app not to start; use
NODE|16-ltsor the latest supported Node.js version. - Not logging into Azure CLI with
az loginbefore running commands will cause authentication errors.
bash
Wrong:
npm start
az webapp up --name my-react-app
Right:
npm run build
az webapp up --name my-react-app --runtime "NODE|16-lts"Quick Reference
| Step | Command | Description |
|---|---|---|
| 1 | npm run build | Create production build of React app |
| 2 | az login | Log in to Azure CLI |
| 3 | az group create --name myResourceGroup --location eastus | Create resource group |
| 4 | az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku B1 --is-linux | Create App Service plan |
| 5 | az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name my-react-app --runtime "NODE|16-lts" | Create web app with Node.js runtime |
| 6 | zip -r build.zip build az webapp deployment source config-zip --resource-group myResourceGroup --name my-react-app --src build.zip | Zip build folder and deploy zipped build folder |
Key Takeaways
Always run 'npm run build' to prepare your React app for deployment.
Use Azure CLI commands to create resources and deploy your app efficiently.
Zip the build folder correctly before deploying with the zip deployment method.
Specify the correct Node.js runtime version in Azure App Service.
Log in to Azure CLI with 'az login' before running deployment commands.