Custom Deployment Scripts for React App on Azure using Git

You can customize the deployment process of your application to control this deployment flow, run tests and cancel the deployment if it fails.

There is a feature on Azure Web App to deploy your website using git. Do a git push and the deployment process runs automatically.

Deploying with custom script

Kudu is a library of deployment scripts for Azure Web App.

To deploying a React App via script, follow the steps:

• Create a .deployment file in the root of your project with the following content:

[config]
command = deploy.cmd

• Create a deploy.cmd file in the root of your project with the following content:

echo Deploy Started
:: pushd: store the current directory in the directory stack
pushd %DEPLOYMENT_SOURCE%
::echo Clean the npm cache folder
::call npm cache clean --force
::rm -rf node_modulesecho Instalando as dependências
echo Install npm packages
call npm install
IF %ERRORLEVEL% NEQ 0 (
goto error
)
echo Build React App
call npm run build
IF %ERRORLEVEL% NEQ 0 (
goto error
)
:: popd: restore the previous directory stored in the stack
popd
echo kuduSync
call “%KUDU_SYNC_CMD%” -v 50 -f “%DEPLOYMENT_SOURCE%\build” -t “%DEPLOYMENT_TARGET%” -n “%NEXT_MANIFEST_PATH%” -p “%PREVIOUS_MANIFEST_PATH%” -i “.git;.hg;.deployment;deploy.cmd”
IF %ERRORLEVEL% NEQ 0 (
goto error
)
goto end
:error
echo Deploy Error
exit
:end
echo Deploy Finished
exit

The above script can be used in a Windows operating system environment, for other examples, click here.

This is the file structure:

my-app
├── README.md
├── node_modules
├── package.json
├── public
├── src
├── .gitignore
├── .deployment
└── deploy.cmd

Deployment script is complete.

To make the batch file more useful, there are some environment variables that it can access:

• DEPLOYMENT_SOURCE : the path for the root of your repository;
• DEPLOYMENT_TARGET: the wwwroot path (the deployment destination directory).

If you want to specify a node version: in the Azure portal, select your app, select Configuration > Application settings.

Add a new setting with Name “WEBSITE_NODE_DEFAULT_VERSION” and Value with the node version.

You can go to https://<hostname>.scm.azurewebsite.net/api/diagnostics/runtime to see the list of node versions that Azure Web App supports.

Now the app is ready to be deployed in Azure Web App service.

References

Kudu
Portuguese version