Adventures in React : Azure

Hi readers! Today Im going to blog about deployment.Yes, deployment, and on one of the biggest cloud providers that are available around which is Microsoft Azure.

Microsoft Azure provides a bunch of features, but I only required something very basic because the application that I was about to deploy was a game developed with React in which all the logic was implemented in the client side and there was no server interaction at all. So I just needed something pretty basic which was to upload a simple static page.

So I just went to Azure, and looked at the different deployment options that Azure provides, and I looked at one that could really help me which was the one in which you can deploy via Github.

I followed the wizards, and pushed some buttons and Voila! Nothing was displayed on my page.

After some research, I found that on every deployment a tool called Kudu runs some processes whenever you deploy something.


Kudo Logo from https://github.com/projectkudu/kudu

Then I found that Kudu runs an script that depends on the type of technology of your application, and if there is a package.json it will asume that your application will be NodeJS so I predefined script will run in order to make it work with IIS.

This was bad for me as I actually needed Node just for only download the required libraries from NPM and no more, and by some reason Kudu looked for something inside my application in order to start the Node server.

After a lot of trials and research, It turned out that your able to create your own Kudu script and upload it along with your application and Azure will run it for you instead of the one provided.

So I started to analyze this file and by reading the comments on it, the script runs with the following steps:

1.-Select Node Version:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
IF DEFINED KUDU_SELECT_NODE_VERSION_CMD (
:: The following are done only on Windows Azure Websites environment
IF EXIST "%DEPLOYMENT_TEMP%\__nodeVersion.tmp" (
echo Primer
SET /p NODE_EXE=<"%DEPLOYMENT_TEMP%\__nodeVersion.tmp"
IF !ERRORLEVEL! NEQ 0 goto error
)
IF EXIST "%DEPLOYMENT_TEMP%\__npmVersion.tmp" (
echo Segundo
SET /p NPM_JS_PATH=<"%DEPLOYMENT_TEMP%\__npmVersion.tmp"
IF !ERRORLEVEL! NEQ 0 goto error
)
IF NOT DEFINED NODE_EXE (
echo Tercer
SET NODE_EXE=node
)
SET NPM_CMD="!NODE_EXE!" "!NPM_JS_PATH!"
) ELSE (
SET NPM_CMD=npm
SET NODE_EXE=node
)

In here,Azure retrieves the most recent version of node and adds it to the respective folders in order to run commands.

2.-Install NPM packages:

1
2
3
4
5
6
7
8
9
10
11
12
echo :: 1\. Install npm packages
echo %DEPLOYMENT_SOURCE%\package.json
IF EXIST "%DEPLOYMENT_SOURCE%\package.json" (
pushd "%DEPLOYMENT_SOURCE%"
call :ExecuteCmd !NPM_CMD! install
IF !ERRORLEVEL! NEQ 0 goto error
IF EXIST "%DEPLOYMENT_SOURCE%\webpack.config.js" (
call :ExecuteCmd !NPM_CMD! run dist
IF !ERRORLEVEL! NEQ 0 goto error
)
popd
)

On this step, you can call node commands, so then at this point what I just do is to install the required npm packages and after it generating the dist folder by running here the custom “dist” command inside package.json that I created.

3.-Kudu Sync

1
2
3
4
5
echo :: 3 KuduSync
IF /I "%IN_PLACE_DEPLOYMENT%" NEQ "1" (
call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 -f "%DEPLOYMENT_SOURCE%\dist" -t "%DEPLOYMENT_TARGET%" -n "%NEXT_MANIFEST_PATH%" -p "%PREVIOUS_MANIFEST_PATH%" -i ".git;.hg;.deployment;deploy.cmd"
IF !ERRORLEVEL! NEQ 0 goto error
)

At this point, the Kudu Sync Command, is executed where practically just copies the content generated from the dist folder to the DEPLOYMENT_SOURCE which is a directory already defined by Azure inside the script.

After all of this, my application was happily deployed and it runs perfect on Azure but by some reason the customization of the script not very intuitive to find but anyway it worked in some way. Thanks and I hope this to be helpful for you.

Share