Building an Angular App with Azure Web Apps Service

npm install -g @angular/cli
             

ng new RoutingDemo
             

cd RoutingDemo
             

ng serve --open
             

Step 3: Build an Angular application

To build the angular project, the build command can be used. An optimized build for production is made with the --prod flag.

ng build --prod
             

We can use different options to build the application.

-aot: Build using the ahead of time compiler. The Default value of this option is false.

-bashHref: Base URL of the application to build.

-build-optimizer: This flag --build-optimizer reduces the bundle sizes for the CSS and JavaScript files.

-crossOrigin: This attribute sets the element that provides CORS support. There are none, anonymous, use-credentials vales can be used. The Default value is none.

-allowedCommonJsDependencies: List of commonJs libraries that are allowed to be used without a build time warning.

-deleteOutputPath: delete the path before building.

Once this command runs successfully, a distfolder is created in your project directory. Note that, in some cases, another subfolder with the name of your project will be created. This command will create the dist/RoutingDemo directory containing a minified, transpiled and ready to deploy version of your application. This is due to some settings in the angular.json file.

In the package.json file, the command to be written in the script section.

package.json

{
"name": "routing-demo",
"version": "0.0.0",
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},
"private": true,
"dependencies": {
  "@angular/animations": "~10.0.14",
  "@angular/common": "~10.0.14",
  "@angular/compiler": "~10.0.14",
  "@angular/core": "~10.0.14",
  "@angular/forms": "~10.0.14",
  "@angular/platform-browser": "~10.0.14",
  "@angular/platform-browser-dynamic": "~10.0.14",
  "@angular/router": "~10.0.14",
  "bootstrap": "^4.5.2",
  "rxjs": "~6.5.5",
  "tslib": "^2.0.0",
  "zone.js": "~0.10.3"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.1000.8",
  "@angular/cli": "~10.0.8",
  "@angular/compiler-cli": "~10.0.14",
  "@types/node": "^12.11.1",
  "@types/jasmine": "~3.5.0",
  "@types/jasminewd2": "~2.0.3",
  "codelyzer": "^6.0.0",
  "jasmine-core": "~3.5.0",
  "jasmine-spec-reporter": "~5.0.0",
  "karma": "~5.0.0",
  "karma-chrome-launcher": "~3.1.0",
  "karma-coverage-istanbul-reporter": "~3.0.2",
  "karma-jasmine": "~3.3.0",
  "karma-jasmine-html-reporter": "^1.5.0",
  "protractor": "~7.0.0",
  "ts-node": "~8.3.0",
  "tslint": "~6.1.0",
  "typescript": "~3.9.5"
}
}
            

Building an Angular App with Azure Web Apps Service There are a few ways to create and deploy angular apps like angular with NodeJS, angular with java, etc. Azure static web apps are one of them and it is released by Microsoft Azure. What is Azure? Azure web services are cloud platform services that provide to develop applications across web, APIs, and function. Azure web services accelerate your web development with a frontend development and backend service powered by serverless APIs. It is considered as a Platform as a service [PaaS] and Infrastructure as a service [IaaS]. Creating and Deploying an angular application on the Azure web service with the following steps: Step 1: Create an Azure Web Service Step 2: Create an Angular Project Step 3: Build the Angular Application Step 4: Configure the web service and deploy it Step 1: Create a web App The first thing to do is setup a new web app on the Azure cloud. The Azure CLI or the Azure portal can be used to create a new web app To create a web app: Step 1.1: Click on the Create a resource -> search web app -> Create Step 1.2: Write your application a unique name, you can leave the rest of the field as default. The Application is going to be hosted in a Service plan.It has different plan for that. Once it will be created you can search for your application in the search bar or check your application in the App Service blade. Step 2: Create an Angular Project First of all, we need to install Node.js. To check the installed version of the node.js, open the command prompt, and run the npm -v command. After node.js installed, the next step is to install the Angular CLI using this command. npm install -g @angular/cli g stands for global installation.To check the installed version of angular, open the command prompt and run theng version command. After that installing angular CLI, you can use angular CLI to create a new angular project using the following command. ng new RoutingDemo This command creates a new project with all dependencies and packages. Angular CLI includes a server so that you can serve your project locally.Navigate the newly created directory cd RoutingDemo To run the project, you can use this command. ng serve --open Open flag opens the project in your local browser automatically.Angular supports a live server, so you can see the changes of the project without refreshing your browser’s page. Read More: How Does Change Detection Works In Angular? Step 3: Build an Angular application To build the angular project, the build command can be used. An optimized build for production is made with the --prod flag. ng build --prod We can use different options to build the application. -aot: Build using the ahead of time compiler. The Default value of this option is false. -bashHref: Base URL of the application to build. -build-optimizer: This flag --build-optimizer reduces the bundle sizes for the CSS and JavaScript files. -crossOrigin: This attribute sets the element that provides CORS support. There are none, anonymous, use-credentials vales can be used. The Default value is none. -allowedCommonJsDependencies: List of commonJs libraries that are allowed to be used without a build time warning. -deleteOutputPath: delete the path before building. Once this command runs successfully, a distfolder is created in your project directory. Note that, in some cases, another subfolder with the name of your project will be created. This command will create the dist/RoutingDemo directory containing a minified, transpiled and ready to deploy version of your application. This is due to some settings in the angular.json file. In the package.json file, the command to be written in the script section. package.json { "name": "routing-demo", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~10.0.14", "@angular/common": "~10.0.14", "@angular/compiler": "~10.0.14", "@angular/core": "~10.0.14", "@angular/forms": "~10.0.14", "@angular/platform-browser": "~10.0.14", "@angular/platform-browser-dynamic": "~10.0.14", "@angular/router": "~10.0.14", "bootstrap": "^4.5.2", "rxjs": "~6.5.5", "tslib": "^2.0.0", "zone.js": "~0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1000.8", "@angular/cli": "~10.0.8", "@angular/compiler-cli": "~10.0.14", "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "codelyzer": "^6.0.0", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.0.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~3.3.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~3.9.5" } } Step 4: Configure the web service and deploy it There are multiple ways to go to your web app, you can choose between a Consumption Plan and a Service Plan. Depending on the number of requests and data, you can choose a better option to use. If you don’t have a continu ous load on your service, the Consumption Plan can be a cheaper one. Here we are using an app service. Looking to Hire Angular Developer? Your Search ends here. See here Steps for Deploying the project to Azure: Click Add Task, search for Azure app service deploy on the right Select Azure App Service Deploy and click add Enter the displaying name such as Azure App Service Deploy: RoutingDemo After that, you can select your Azure Subscription After selecting the Azure Subscription, you can select your app service name Select package or folder to dist Select the checkbox to Generate web.config After generating web.config file, enter the web.config parameters Select checkbox for Publish using Web Deploy Select checkbox for Publish using Web Deploy After you have finished entering details, click on Save and queue button. This will save the above options and subsequently runs the pipeline. You will see a message with a hyperlink containing a build number or you can navigate to Pipelines > Builds. Conclusion In this blog, we discussed how to create an angular project and build the project to Azure Web Services with simple steps. Azure web services accelerate your web development with a frontend development and backend service powered by serverless APIs.