The Angular CLI makes it easy to build a production ready Angular app. The next step is getting that app up and in the cloud. This is where a CI process helps take that code from Github, build it properly, and the deploy it to Azure. I outlined the detailed steps below if you want to try this for yourself.
If you want to learn how to build your Angular app using the Angular CLI, check out my course on Pluralsight.
You can also watch these steps in this 3 minute video.
Prerequisites
We need something to serve the assets such as Node.js. Be sure you have a Node.js server in your Angular project, similar to the one I have here.
Make sure the Angular CLI will copy your Node.js server to your dist folder. Here is a snippet from my .angular-cli.json
file that does this. This file assumes there are an index.js
and package.json
file in the /server
folder that we want to distribute.
"assets": [
"assets",
"favicon.ico",
{
"glob": "index.js",
"input": "./server/",
"output": "./"
},
{
"glob": "package.json",
"input": "./server/",
"output": "./"
},
],
We can and should create an Node.js express server is more robust and only serves the angular content (this one servers the package.json too). This node.js server is merely an example ... you should feel empowered to use your own node.js server.
Create an account (consider the free trial) with Azure and create and Web App Service.
If you have not already done so, go to https://www.visualstudio.com and sign up/in to your account. Then create a team and project.
Start from your project's home page.
Deploying
- Go to the
Build and Release
menu and selectBuilds
- Click the
New
button to create a new build - Start with an
empty process
Get Your Code
- Under
Process
, click onGet Sources
- Select Github, enter your authorization, and select your repository and branch
Install the Angular CLI
- Click
Add Task
, on the left, search fornpm
on the right - Select
npm (run an npm command)
and clickAdd
- Enter a name such as
install the angular cli
- Enter the npm command as
install
- Enter the arguments as
@angular/cli -g
Install the Project's NPM Packages
- Click
Add Task
, on the left, search fornpm
on the right - Select
npm (run an npm command)
and clickAdd
- Enter a name such as
install packages via npm
- Enter the npm command as
install
Build the Project with the Angular CLI
- Click
Add Task
, on the left, search forcommand line
on the right - Select
Command Line
and clickAdd
- Enter a name such as
build the angular app
- Enter the tool as
ng
- Enter the arguments as
build --prod
Install the Express Server's NPM Packages
- Click
Add Task
, on the left, search fornpm
on the right - Select
npm (run an npm command)
and clickAdd
- Enter a name such as
npm install in the dist folder for express
- Enter the working folder as
dist/
- Enter the npm command as
install
Deploy to Azure
- Click
Add Task
, on the left, search forazure app service deploy
on the right - Select
Azure App Service Deploy
and clickAdd
- Enter a name such as
Azure App Service Deploy: my-app
- Select your Azure subscription
- Select your app service name
- Set the
package or folder
todist/
- Select the checkbox for
Generate Web.config
- Enter the
Web.config parameters
as-Handler iisnode -NodeStartFile index.js -appType node
- Select the checkbox for
Publish using Web Deploy
- Check the box for
Remove additional files at destination
Run this Process on all Commits/Merges to Github
- Go to
triggers
in the upper left andenable
continuous integration - Press the
Save and Queue
button
Then you can queue it and go watch the build's progress!