Setting up an Angular (Angular2) App for Continuous Integration on Azure.

We recently wanted to set up CI for one of our Angular apps on Azure.

After spending sometime going through a sea of suggestions on the same we concluded on the following steps! Hopefully this helps a fellow programmer  save some time!

Step1:- To deploy an Angular 2 app (in this case v4) to Azure we need to add two new files

  • .deployment
  •  deploy.cmd

These two files can be generated from kuduscript(follow instructions here to generate these yourself) or you can just use the files we have generated and uploaded here.

.deployment contains the following lines of code.

[config]
command = deploy.cmd

deploy.cmd (uploaded here for your convenience) basically installs npm modules and builds the app in azure via the following commands

:: 3. Install npm packages
IF EXIST “%DEPLOYMENT_TARGET%\package.json” (
pushd “%DEPLOYMENT_TARGET%”
call :ExecuteCmd !NPM_CMD! install –production
IF !ERRORLEVEL! NEQ 0 goto error
popd
)
:: 4. Angular Prod Build
//If you had generated this yourself then please add this step manually!!)
IF EXIST “%DEPLOYMENT_TARGET%/.angular-cli.json” (
echo Building App in %DEPLOYMENT_TARGET%…
pushd “%DEPLOYMENT_TARGET%”
call :ExecuteCmd !NPM_CMD! run build
:: If the above command fails comment above and uncomment below one
:: call ./node_modules/.bin/ng build –prod
IF !ERRORLEVEL! NEQ 0 goto error
popd
)

Your App Structure should look like this

clip_image002

Step 2:- Next add “build”: “ng build –prod –aot” as the last line in the scripts section in package.json file.

package.json should look like

clip_image004

Once these settings are done, push your code onto your source control ( Git in our case)

Step3:- Setting up Continuous Deployment to Azure App Service

To Enable Continuous deployment on azure follow the below steps:

1. Create a App Services Web App in Azure Portal

clip_image006

2. Browse to the dashboard and click APP DEPLOYMENT > Deployment options. Click Choose Source, then select the deployment source from list. For E.g. GitHub

clip_image008

3. Complete the authorization workflow.

4. In the Deployment source, choose the project and branch to deploy from. When you’re done, click OK.

clip_image010

5. To verify the app is successfully deployed, click the URL from the top of the azure app in the Azure portal.

6. Your app should update to reflect the changes shortly after the push and you can also verify that it has pulled into the azure in the Deployment options your azure app. If you wish to stop continuous deployment click on Disconnect button.

clip_image012

Until next time!

Team Cennest!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>