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

Question

I have a simple React.js app that works 100% perfectly fine on my localhost.

e.g. - clone git repo - go to the root folder of the cloned repo - npm install - npm start and the browser opens up on port 3000. works great!

Now, I'm trying to get this app up to an Azure App Service (formally Azure Websites).

Because my code sits in a git repo, I connected my Azure App Service/WebSite to a git repo and KUDU kicks in, when a commit is pushed up. So the git deployment webhook is working, but I don't think anything else :(

This is my packages.json file:

{
  "name": "Test Website",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.8.5"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Notice the "build": "react-scripts build" ? I believe this is the command I need to run to actually build this app for production.

i.e. npm run build

Q1.

So - how can I get azure to do these two steps on a git commit/push?

• npm install
• npm run build

Q2.

Do I need to setup anything special in my startup file? I think the npm run build throws all the newly created files into the \build folder, so I'm assuming I'll need to setup the startup file to be build\index.html ?

Cheers!

Answer 1

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

Answer 2

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.