Need help in Azure App services Deploying Node.js and React App

To deploy a Node.js and React app in Azure App Service, you can follow these general steps:

1. Set Up Your Environment:
   • Ensure you have an Azure account with an active subscription. If you don't have one, you can create an account for free.
   • Install Node.js LTS and verify the installation by running node --version.
   • Install Visual Studio Code and the Azure App Service extension for Visual Studio Code.
   • Install the Azure CLI to run commands for creating and configuring Azure resources.
2. Prepare Your Application:
   • Ensure that your Node.js backend is set up to listen on the port provided by the PORT environment variable. This is typically done in your Express app's startup script.
   • Build your React app using npm run build to create a production-ready version of your application.
3. Deploy to Azure:
   • Open Visual Studio Code and ensure you are in the directory of your Node.js application.
   • Use the Azure App Service extension to create a new Web App. You can choose between Linux or Windows as your operating system, and select the Node.js version you want to use (Node 24 LTS is recommended).
   • For the pricing tier, select Free (F1) to avoid any costs.
   • After creating the Web App, deploy your application code. You can do this by right-clicking on your App Service and selecting the option to deploy.
   • If using the Azure CLI, you can deploy your app using the command az webapp up --sku F1 --name <app-name>.
4. Configure Application Settings:
   • After deployment, you may need to configure application settings in Azure, such as enabling build automation if necessary.
   • Ensure that all required npm dependencies are included in your deployment, as Azure will automatically run npm install --production during the deployment process if you deploy via Git or Zip package.
5. Test Your Application:
   • Once deployment is complete, you can browse to the URL of your Azure Web App to see your application running.

By following these steps, you should be able to successfully deploy your Node.js and React application to Azure App Service.

References:

• Deploy a Node.js web app in Azure
• Configure a Node.js app for Azure App Service (platform-windows)

Hii Thiru,

It looks like you’re looking to deploy a React and Node.js app using Azure App Services. Here’s a breakdown of how you can achieve this:

Steps to Deploy Node.js and React app on Azure App Services

1. Create an Azure App Service:
   • Sign in to Azure Portal and click on Create a resource.
   • Search for App Service and select it.
   • Click on Create.
   • Fill out the form:
   • App name: Give your app a unique name.
   • Publish: Choose Code.
   • Runtime stack: Select the Node.js version you want (Node 24 LTS is recommended).
   • Operating system: Choose either Windows or Linux based on your preferences.
2. Deploying the Node.js app:
   • Ensure that your Node.js app listens on the port specified by the PORT environment variable. In a typical Express app setup, this is already done in the bin/www file (check for process.env.PORT).
   • Use deployment options like ZIP deployment or GitHub Actions for automated deployments.
   • If you're using ZIP deployment, make sure you set the application setting SCM_DO_BUILD_DURING_DEPLOYMENT to true to enable build automation.
   • You can find the deployment logs in the directory /home/site/deployment if you encounter issues.
3. Deploying the React App:
   • If you're deploying a React app separately or alongside your Node.js app, consider using Azure Static Web Apps for a serverless hosting experience.
   • To create a static web app:
   • Go to the Azure Portal, select Create a Resource, search for Static Web App, and follow the prompts.
   • Choose React in the Build Presets and specify your repository details.
4. Final Checks:
   • After deployment, check the App Service logs for any errors. This can help you troubleshoot issues like 'application not starting' or 'module not found'.
   • Make sure your application settings are correctly configured for Node.js deployment.

Reference:
https://dori-uw-1.kuma-moon.com/en-us/azure/app-service/quickstart-nodejs?tabs=windows&pivots=development-environment-vscode#deploy-to-azure
https://dori-uw-1.kuma-moon.com/en-us/azure/static-web-apps/deploy-react?pivots=github#create-a-static-web-app
https://dori-uw-1.kuma-moon.com/en-us/azure/app-service/deploy-best-practices
https://dori-uw-1.kuma-moon.com/en-us/troubleshoot/azure/app-service/web-apps-deployment-faqs
Kindly let us know if the above answer helps or you need further assistance on this issue.
Please "accept" if the information helped you. This will help us and others in the community as well.