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
Step 2:- Next add “build”: “ng build –prod –aot” as the last line in the scripts section in package.json file.
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
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
3. Complete the authorization workflow.
4. In the Deployment source, choose the project and branch to deploy from. When you’re done, click OK.
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.
Until next time!
Team Cennest!