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
So - how can I get azure to do these two steps on a git commit/push?
npm installnpm run buildDo 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!
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..
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 packages
echo Installing npm packages.
call :ExecuteCmd npm install
IF !ERRORLEVEL! NEQ 0 goto error
:: 2. Build the react site
echo Building react site
call :ExecuteCmd npm run build
IF !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.