How to get a React.js app running on Azure App Services? How to get a React.js app running on Azure App Services? azure azure

How to get a React.js app running on Azure App Services?


You will need to create your own customised deployment script for Kudu. Luckily, there is a deployment script generator as part of the azure-cli tooling.

More details are on the Kudu wiki:https://github.com/projectkudu/kudu/wiki/Custom-Deployment-Script


I don't believe Azure supports this out of box..

From the Node Docs:

Azure Cloud Services expect all modules to be installed on the development environment, and the node_modules directory to be included as part of the deployment package. It is possible to enable support for installing modules using package.json or npm-shrinkwrap.json files on Cloud Services, however this requires customization of the default scripts used by Cloud Service projects. For an example of how to accomplish this, see Azure Startup task to run npm install to avoid deploying node modules.

tl;dr; By default Azure doesn't "build" or preprocess anything before deploying to the container. There seems to be some ways around it, but for getting off the ground it might be easier to build before deploying.


kuduscript will generate deploy.cmd, as described on the Kudu wiki: https://github.com/projectkudu/kudu/wiki/Custom-Deployment-Script

kuduscript --basic -t batch  -y 

In deploy.cmd, before KuduSync is called, you can then add:

:: 1. Installing npm packagesecho Installing npm packages.call :ExecuteCmd npm installIF !ERRORLEVEL! NEQ 0 goto error:: 2. Build the react siteecho Building react sitecall :ExecuteCmd npm run buildIF !ERRORLEVEL! NEQ 0 goto error

And, in the call to KuduSync, add "\build" to: %DEPLOYMENT_SOURCE%\build

For Windows/IIS, IIS will then pick index.html out of wwwroot (which KuduSync copied), and serve the static site.