How to deploy Angular on Azure

February 5, 2018
934 Views

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.

 

Prerequisites

We need something to serve the assets such as Node.js. Be sure you have a Node.js server in your Angular project.

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

  1. Go to the Build and Release menu and select Builds
  2. Click the New button to create a new build
  3. Start with an empty process

 

Get Your Code

  1. Under Process, click on Get Sources
  2. Select Github, enter your authorization, and select your repository and branch

 

Install the Angular CLI

  1. Click Add Task, on the left, search for npm on the right
  2. Select npm (run an npm command) and click Add
  3. Enter a name such as install the angular cli
  4. Enter the npm command as install
  5. Enter the arguments as @angular/cli -g

 

Install the Project’s NPM Packages

  1. Click Add Task, on the left, search for npm on the right
  2. Select npm (run an npm command) and click Add
  3. Enter a name such as install packages via npm
  4. Enter the npm command as install

 

Build the Project with the Angular CLI

  1. Click Add Task, on the left, search for command line on the right
  2. Select Command Line and click Add
  3. Enter a name such as build the angular app
  4. Enter the tool as ng
  5. Enter the arguments as build --prod

 

Install the Express Server’s NPM Packages

  1. Click Add Task, on the left, search for npm on the right
  2. Select npm (run an npm command) and click Add
  3. Enter a name such as npm install in the dist folder for express
  4. Enter the working folder as dist/
  5. Enter the npm command as install

 

Deploy to Azure

  1. Click Add Task, on the left, search for azure app service deploy on the right
  2. Select Azure App Service Deploy and click Add
  3. Enter a name such as Azure App Service Deploy: my-app
  4. Select your Azure subscription
  5. Select your app service name
  6. Set the package or folder to dist/
  7. Select the checkbox for Generate Web.config
  8. Enter the Web.config parameters as -Handler iisnode -NodeStartFile index.js -appType node
  9. Select the checkbox for Publish using Web Deploy
  10. Check the box for Remove additional files at destination

 

Run this Process on all Commits/Merges to Github

  1. Go to triggers in the upper left and enable continuous integration
  2. Press the Save and Queue button

Then you can queue it and go watch the build’s progress!

 

Author: John Papa

Source : https://johnpapa.net/deploy-angular-to-azure-vsts-angular-cli/

License : Attribution 4.0 International

 

You may be interested

Top 15 resources for learning JavaScript
Articles
120 views
Articles
120 views

Top 15 resources for learning JavaScript

simoneadmin - December 23, 2018

HTML, cascading stylesheets (CSS), and JavaScript have experienced massive growth and evolution over the past two decades, which should come…

How to create a Blockchain using Node.js
Articles
157 views
Articles
157 views

How to create a Blockchain using Node.js

simoneadmin - December 22, 2018

In this article, I will talk about the basics of Blockchain. We will discuss the fundamental concepts of the blockchain.…

Introduction to PWA and Angular 6
Angular
175 views
Angular
175 views

Introduction to PWA and Angular 6

simoneadmin - October 19, 2018

Progressive web apps are the new standard for web development. using Html , Css and JavaScript web apps can feel…

Leave a Comment

Your email address will not be published.