Today, .NET celebrates its 20th birthday. According to Microsoft blog, today there are over five million developers who use .NET for there development projects. That is a huge number. If not the single largest community, this is definitely one of the top largest communities. 13th February, 2002 is when .NET was officially launched along side Visual Studio .NET. I was around 12 years old then. I didn't know what .NET is, or what Microsoft does apart from faintly knowing that they make the Word application that I use for my school projects. I didn't know .NET will become such a huge part of my life, or that I will write a blogpost about it on its 20th birthday. But that is life, and here I am.

I am one of those developers who started real coding directly with C#. Yes, I studied C++ in University, and before that C in highschool, so I had some background in this, but I never really coded in any of those two languages. My journey of coding started as C# and .NET developer, and thus this framework holds special place in my heart. I recently read a COOL fact about C# (Pun intended). The original proposed name of C# was - COOL. Which is abbrivation for C-Like Object Oriented Language. From what I have read, they feared trademark issues, and thus decided to go for C++++, which translated to # (Matrix of four + signs) and became C#. But that is just half of the story. The original story is that .NET's C# is the second C# at Microsoft. There is a great article by Rico Mariani about this from 2018. The original C# was concived at Microsoft in 1988, today the OG peeps from Microsoft call it C#88.
Apparently originally it was written to run the Project Omega, which we now know as Microsoft Access. Eventually for various other reasons, they had to kill the OG C#88 but it still survived as parts in different projects of Microsoft Ecosystem. A lot of cool features from original Visual Studio have their roots in original C#.

From being a close knit, walled framework to being open source, .NET has come a long way. A lot of people, specially the ones who worked with .NET in 2000s and later switched to other frameworks don't realise .NET is no more the guarded framework that they knew from early 2000s. Developers who haven't been in touch with .NET since 2010s usually get really surprised or are outright in denial when I tell them .NET repositories are in top 30 most engaged open source repositories on GitHub since last five years.

I was reading through all the stories and tweets on Twitter with #dotNETLovesMe and I read so many interesting stories of people writing their journeys of developing with .NET for last 20 years. There are people sharing their first .NET code written in 2003, people who have old installation CDs from 2005, screencaps of first videos of The .NET show and what not. It just makes me realise the huge impact a successful framework can have on society. If data is the new oil, software frameworks are the steel that builds those huge ass refineries and pipes to extract and transport that oil. And I think .NET is and will be ruling this space.

I have been working with .NET for some time now, and I intend to do so for the foreseeable future. I have built Web, Front-End, Android apps, iOS apps, IoT solutions, Raspberry Pi apps, HoloLens apps, Middleware solutions, Windows Forms, Windows Phone Application, WebJobs, CRON Jobs, and of course plain old console apps. I have wrote .NET code on Windows 7,8,10,11, on MacOS, and on Linux. I want to code in .NET for all the possible platform on all the possible platforms. I am excited to see what .NET brings out in future. Aren't you?

When starting with Machine Learning, there are couple of "Hello World" template algorithms that helps beginner understand how basic concepts of ML work. Linear Regression is one of them. In this blogpost we are going to see how to write a linear regression program in Python.

As a beginner you should still know the basics of python and python libraries such as numpy, matplotlib, pandas etc., as we are going to use these libraries for writing our algorithm.

First, let's start with an example. We have here a dataset, that looks like following -
age,speed
5,99
7,86
8,87
7,88
2,111
17,86
2,103
9,87
4,94
11,78
12,77
9,85
6,86

This data is in a csv file called - cardata.csv. Each row of the dataset represents a car. In age column, we have the age of the car, i.e. how old the car is. Under speed column, we have avg. high speed this car can achieve. As it is visible from data, car that is not so old, e.g. age 2 Years, has higher avg. high speed, and car that is older, has lower avg. high speed. Our task is for algorithm to predict the avg. speed of the car based on it's age.

To do that, let's create a new python class - regression.py.
We import numpy, pyplot (For plotting the result), pandas (For reading the data from csv file, and scipy for doing the linear regression.

import numpy as np
import matplotlib.pyplot  as plot
import pandas as pa
from scipy import stats

Then we read the csv values in a variable, and write the feature (that is age of the cars), and labels (i.e. avg. high speed of the car) in two separate variables -

pd = pa.read_csv("regression.csv")
features = pd["age"]
labels = pd["speed"]

Now use stats library from scipy to calculate the linear regression.

slope, intercept, r, p, std_err = stats.linregress(features, labels)

linregress method calculates slope, intercept, correlation cofficient, p-value, and standard error. Using the slope from this, we now calculate line function with the formula - Y = mX + c; where m is slope and c is constant which in our case is intercept.

def lineFunc(x):
  return slope * x + intercept

Now using this line function, we can plot a line classifying our dataset.

lineY = list(map(lineFunc, features))
print(lineY)

plot.scatter(features,labels)
plot.plot(features,lineY)
plot.show()

Which looks like this -

By looking at this graph we can see the line is pretty much reflecting the data. Now let's use this to predict speed of a car which is 6 years old -

speedY = lineFunc(6)
print(speedY)

result -
92.59823399558499

And that is basically all of it. :)
You can find the complete code on my GitHub Repo

So, as every six months, Angular team is back with a newer version, an update to Angular 12, with version 13. Angular 13 is the latest in the arsenal of Angular framework, a web framework used not only to build Websites and Web-Apps but also cross-platform mobile applications.

In this blog, we are going to look at the 5 things that are changed/newly introduced in latest version of Angular framework - Angular 13.

1. Full Ivy support - Ivy support has been in there in Angular for a while now. Ivy is the complete rewrite of the Angular's rendering engine. Actually to be more accurate, it is the fourth rewrite of the Angular's rendering engine, and third since Angular 2 - a version that redefined Angular completely. Since Angular 8, Ivy is available to be used in your projects, but Angular still had backward compatibility with older rendering engine - View Engine. In Angular 8, you had to explicitly Opt-In for the Ivy Engine, since Angular 9, Ivy became standard, and starting with Angular 13, it will be the ONLY rendering engine Angular supports. Meaning, if you are upgrading to Angular 13 and are still using View Engine in your project, you have no other option but to also switch to Ivy.

2. IE 11 Support is removed - I am surprised, Angular kept the IE11 support until so long, but given that a lot of Enterprise applications are written using Angular Framework, they probably had no choice but to support it. Nonetheless, starting Angular 13, the support for IE11 is now officially removed. This is a breaking change and will affect you if your userbase is not yet switched to new Edge or other modern browsers.
If your website/web-app is predominantly used on IE, it is better not to update to Angular 13.

3. Support to enable Built-in validators dynamically - This is honestly a feature that is going to be very useful for me in my projects. You can now enable or disable the built-in validators like min, max, minLength maxLength, email dynamically, meaning no need to write custom workarounds for this. So you can use the validators in the same form conditionally in different use-cases.

4. New type for Forms - For Angular Forms, a new type FormControlStatus has been introduced. It is a union of all the status strings possible for form control. Also the old AbstractControl.status has change of type. From previous type string, it is now shifted to this new type FormControlStatus. Additionally, the StatusChange is now of type Observable instead of old Observable

5. Improvements of Component API - With update to ViewContainerRef.createComponent API, it has become now easier to create a dynamic component in your Angular App. This will also require now less boilerplat code. This means, with new API, you don't need to use ComponentFactoryResolver in order to create a component dynamically. There is no need to pass the componentFactory to the componentRef anymore.

I hope this list helps you in deciding if the new Angular update is worth the trouble, specially if you are already on Version 12. For me personally, version 13 brings a lot of exciting changes, and I cannot wait to update my project..!

Indraneel Pole

This issue made my life hell.! Yes I can sum up this problem in this one line. So first of all, I am one of those very few developers around the globe who use Sencha/Ext for a mobile application. It is an old application that needs to be supported from time to time for both Android and iOS.

In December 2020, we realized that suddenly after updating to iOS 14, one of the features that uses html canvas not working anymore on iPhone and iPads. The first thought was something is broken on Canvas, because we couldn't draw anything on it. So I started debugging the part of code where I am initializing and using Canvas. Everything looks good. On top of it, it works fine for Android. So the next thought came to mind was something specific to iOS libraries is not working. But it was plain html css code that wasn't working. I couldn't figure out why.

An extensive debugging revealed that issue was with paint event of EXT JS. It wasn't being fired. Thus code written inside this Paint Event subscription wasn't reached.
Now why does paint events are not triggered? NO IDEA WHY.
But it was one step closer to the solution. Finally after fiddling through Stack Overflow, I found this question that saved my life.
Actually this is a css issue. Just add following code to your app.css and it works

.x-paint-monitor.cssanimation { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

For webkit, with new iOS update something is going wrong with css animation that cannot be triggered which creates a problem with paint event triggers. Yeah, talk about strange issues.

When I read a little bit more about animation-fill-mode, found following explanation - >

Setting animation-fill-mode: forwards means that after the animation has completed execution, the animation will hold at final properties until it is removed.

Which would mean that EXTJS is expecting some animation state to fire the paint event that was probably changed in webkit-webview.

I didn't get time to delve deep into iOS changeset. But if I get any time, I will update this blogpost for the same.

Till then. I hope this helps someone like me in distress. :)

How to create your first Angular project from scratch?

So today, we are going to take a look at how to create your first Angular project from scratch. But before that, couple of things that you need to keep in mind. Angular is a web-app development framework. Which means, learning Angular is basically learning the framework. To learn the framework, it is implied that you know the basics of web development such as programming languages, HTML, CSS, Javascript/Typescript, as well as basics of web hosting and development tools such as IDE (I use Visual Studio Code mostly for my needs), Source Control such as GitHub, and a bit of DevOps.

If you are absolutely new to development and not well versed with even basics of HTML or CSS, I would suggest that you first get to know how and what HTML and CSS is before you dive into a full fledged Web Framework. You can find some excellent online resources for this e.g. W3Schools.

Now to create an absolutely new project, you have to do following things ->

1. Set up your development environment
2. Create a workspace
3. Create the project
4. Install libraries
5. Serve the project and lastly
6. Test it locally

To set up your environment, First install Node.js. You will need the active or maintained LTS version of Node. Find out about them here.
Once you have the node environment on your system, you need Node Package Manager. Angular library comes as different packages, such as Angular CLI, Angular Core etc. On top of that, when you need some new library in project, you again have to install them as a package in your project. These packages are maintained and delivered through Node Package Manager. If you are coming from .NET background (Like me), think of it as NuGet Package Manager. Node Package Manager (Henceforth written as NPM) is usually installed together with Node.js. To check that you have the npm client installed, run npm -v in a terminal window. You will see something like this -

Now run a new command->
ng new <your-project-name>

This will create a new angular project for you. But before that Angular will ask you couple of questions to start with. For example,

So because we are going to use routing for navigation, let's select y

Then it will also ask you what type of styling format you would prefer?

Because I am more comfortable with scss, I always prefer it.
Once you select it, Angular will install all the required framework libraries and node modules.

And that is it basically.
Now you have to run ng serve or ng s to compile the project. Once it is compiled, go to browser and type localhost:4200 and voila. Your first angular website is on ready.

Now what all can you do with this website? We will see in next post..!

Till then :)

SPA, Web Frameworks, and History of Angular..!

I know, I know, another Angular app blogpost. Aren't there already tens of thousands of such blogposts out there? Sure, there are. But the thing with blogposts is, that you don't know how and when they might help someone despite of there being thousands such blogposts already exisitng on internet. For example, just the other day, I was checking on one of my old blogposts about some drag and drop Javascript component, I am sure there are already multiple such code blocks exists on Github or wherever, but still I saw there were four new comments asking for code block that I shared in my blogpost. So I was sure, there are at least four more people reading my blog ;)

Another reason to write this post is, I am working in Angular space for almost 4 years now. I have seen Angular evolving from AngularJS to Angular 10 (And now v11) with all the quirks and workarounds, and bugs and change requests. I have built couple of Enterprise web applications using Angular framework, as well as web app that is now serving tens of thousands of users every month. And still, I haven't shared the knowledge I have gained in all these years as much as I should have.

So this is (hopefully) start of a series of blogposts, that I am planning to write about Angular Framework. After reading this series, the reader should be able to have a basic understanding of Angular framework, and should be able to build a basic CRUD app using Angular.

So enough of introduction. Let's dive into the topic. Angular.

Before you start with creating your first app with Angular, you should know couple of things about Angular. Angular is a SPA, meaning Single Page Application. Single Page Applications are basically web apps that renders a single page on your browser and routes to other components or views inside this single page. This means, techincally you just have one view or one page as your application. Of course you can emulate going to other views or URLs and have different views, but this is done by your framework for you. You don't technically have different HTML page for each of your route. (You can configure your Angular application to do that as well using Angular Universal which is a server side rendering technique, but we will talk about that later in this series, and will update this blogpost with the link of it as and when I do it.)

Here is what Wikipedia has to say about SPAs -

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.
In a SPA, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does it transfer control to another page, although the location hash or the HTML5 History API can be used to provide the perception and navigability of separate logical pages in the application.

Image source : https://msdn.microsoft.com/en-us/magazine/dn463786.aspx

There are of course advantages and disadvantages of using Single Page Application frameworks. Biggest advantages are for example, all the required assets including Javascript, CSS, HTML and everything else is fetched and loaded in the browser when the page loads for the first time. Then once everything is loaded, the view change and page change can happen on user interaction, but because everything is already loaded in the browser, you don't have to reload new code assets to load other views or URLs. This makes the transition to other views within the web apps much faster.
This can however also be one of the disadvantages, for example if your application is really big or a monolith, then the initial load can be a little longer, resulting into slower page speed results and poor rankings. This can be solved by framework specific configurations such as Ahead of Time (AoT) Compilation and Lazy Loading. We will talk about them further in this series. (And I will be updating the links in this blogpost as and when I reach that point).
Another disadvantage is, because we are using a Javascript framework, it is difficult for search engines to index the website for SEO, that could result in poor SEO ranking for your website if you are not careful enough. Although Google has started indexing and crawling Javascript websites since around 2015, but it still doesn't give as good result as pure HTML web pages. And because Angular Framework complies Javascript code to HTML on runtime in Browser, it is difficult for Search Engines like Google or Bing to crawl your website correctly for Search Rankings and results. It is possible to overcome this hurdle by using Server Side Rendering which is called Angular Universal in Angular's world. As I said above we will talk about this later.

There are other such SPA frameworks like Angular, and each one of them have their positives and negatives when it comes to web development. Some of them are React, Ember, Vue, ExtJS, Knockout, Meteor etc. You can read about them just by googling about them. For now they are not part of our scope to learn more about Angular.

Angular started with AngularJS which was in pure Javascript. Then it was kind of rewritten and since then if you are using Angular framework, you have to use TypeScript as main language of your coding and development. TypeScript is basically a typed version of Javascript. It is developed and maintained by Microsoft. Here is what Wikipedia has to say about TypeScript ->

TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for development of large applications and transcompiles to JavaScript. As TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs.

This breaking change of switching to different approach with moving from AngularJS to Angular 2, created a kind of unique problem for Angular developers. As you know, a big part of developer's advance skillset is to be able to aquire the art of googling the correct solution of your problem on Stack Overflow. (Yes, you read it correctly, because most of us google the problem, and search the Stack Overflow links. I don't even know why Stack Overflow has built their own search) ;) Now if you google for some problem related to Angular, you have to specify something like "XYZ with AngularJS" or "XYZ with Angular 2+" Otherwise you might get mixed results and would be difficult to find the correct solution.

So, all in all, Angular is as good a web framework as any with its advantages and disadvantages. Personally for me, the learning curve is good enough and there is enough support on internet to get you going without getting stuck.

I hope this introductory blogpost gives you, the reader, a bird eyeview of Angular. If you are starting afresh in this framework, this should give you a base of understanding on Angular.

In further blogposts, I will talk about creating new App in Angular from start.
Till then.

So if you are living in Europe and/or working for a company that has the business in Europe, your life as a web developer is already quite messy thanks to Cookie Law and GDPR.
If you are building a web app, you need to keep in mind to implement a proper Cookie policy that tells your customer that you are storing their session cookies to give them the better web experience. You might also consider giving them opt-out or in more advanced case, explicit opt-in.

Copyright: Hrvoje Jurisic

Moreover, this can be always more irritating, as this is not your primary use case on the website. Thanks to some awesome people and awesome libraries such as CookieConsent, the life of a normal web developer is made quite easy.

In today's blogpost, I am going to write about how to implement cookie banner in Angular Application using cookie-consent.

Cookie consent although has made our lives really really simple, but to correctly implement it in Angular application is a little bit tricky. Specially when you want to use Localisation and envrionment variables for the dynamic links. Of course, there is a plugin for this (Isn't there always a plugin?) But as I am gaining more and more experience in web development, my will to use a third party plugin is going down and down.

So back to our topic, how to implement cookie-consent in an Angular app?
Quite simple. First, take these two references in your index.html file -

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>

These will download relevant javascript and css files from CDN at the time of loading website. Alternatively, you can also download them, and host them inside your application.

Then go to your app.component.ts and write following lines of code inside ngOnInit function -

       let cc = window as any;
       cc.cookieconsent.initialise({
         palette: {
           popup: {
             background: "#164969"
           },
           button: {
             background: "#ffe000",
             text: "#164969"
           }
         },
         theme: "classic",
         content: {
           message: this.cookieMessage,
           dismiss: this.cookieDismiss,
           link: this.cookieLinkText,
           href: environment.Frontend + "/dataprivacy" 
         }
       });

Using this, you can localise your message string, and even add environment specific link for more information hyperlink.
You can further customise it with your own styles, text, and everything you wish to do.
The final result is, something as beautiful as this -

That's it. You can make your Angular application Cookie Law compliance in less then 15 minutes.
Happy Coding. :)

So Angular's new release is already here, for people like me who are working on the long running Angular projects it might feel that Angular versions are getting released really fast, but for a web framework, this speed seems normal.

I took a quick look last night after it's release, and here is a quick the good, the bad, and the ugly report of new version of Angular - Angular 7

1. Application Performance - Angular 7 comes with better application performance thanks to new tweaks in pollyfills.ts file.

With version 7, now you can also use bundle budget with CLI by setting the bundle size limit. By default you get warning at 2MB, and Error at 5MB. This can be change in angular.json this way -

"budgets": [{
  "type": "initial",
  "maximumWarning": "6mb",
  "maximumError": "10mb"
}]

2. Virtual Scroll, Drag and Drop via Material and CDK - Material has already received a big update in 2018. With version 7, you get some new additional features such as drag and drop and virtual scroll.

3. Documentation Updates - Honestly, as a developer who is using Angular since the time of AngularJS, I hate Angular documentation. This is because it is confusing, frustrating to find, and extremely basic at times. Thankfully, it is improving with every update. With Angular 7 as well, you get improved developer guide and reference material for Angular CLI.

4. Dependency Updates - Also, the dependecy updates come as expected on the following libraries -
TypeScript 3.1
RxJS 6.3
Node 10 along with on going support for Node 8

5. Angular CLI Prompts - This one is my most favorite one. I love Angular CLI. It is a major help for faster developement. However, without prompts, the learning curve is a little bit steeper. But thanks to update, now you can see the CLI prompts. Yaay.

Update to latest version

This is always the pain. But to be up to date, you have to do it, no matter what. update.angular.io provides better documentation on this. However, if you are already on version 6, following commands should be enough for you -
ng update @angular/cli @angular/core

So that's all for now.
Happy coding!

Recently in a project, I had to create a drag and drop component. Now usually, for everything there is already an existing library in Angular framework, and I found couple of them as well. If you are using Angular Material, your life is even more simplified as Material already has "drag and drop" feature. However, I have two problems with Libraries.

1. If it is a third party library, you have to be dependent upon the creator's wish for bug fixing and updates. I recently had a problem with another library for multi-select checkboxes, where I used a certain library for multi-select checkboxes which has absolutely beautiful rendition of multi-select checkboxes with absolutely great styles and design. The only problem - when I tried to build it using AoT build, it failed because there were some AoT compilation errors in the library itself. My build server is configured to build using AoT and I couldn't build this application because of this issue. I created a bug with the said library in GitHub, but I don't know when the developer of this library going to take this bug on the priority and fix it.
2. The customization options become quite limited for the component if you chose to use a third party library instead of writing it on your own. Sure, some developers give you option to use custom styles, but they also end up giving you limited scope of customization more often than not.

Thus, considering these issues, I decided to write my own "Drag & Drop" component instead of using a library for it. This blogpost will explain you the steps to do it yourself.

So here we go -

1. The HTML part is quite simple to be honest. I have created a drop zone container where user can drop the files. Inside this drop zone, I have an option given to browse the file for those who don't know or want to use the drag and drop feature. Look at the following html code -
   

2. Now, we need to show this drop zone as a real drop zone. This we are going to with css styles. Check the stylesheet -

.hcentered {
    text-align: center;
}

.container-row {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
}

.mediaInput {
    margin: 20px;
}

.progressheader {
    display: inline;
}

.refreshicon {
    margin-bottom: 5px;
    margin-left: 10px;
}

h3 {
    text-align: left;
    font-weight: 500;
}

.box-dragndrop,
 {
    display: none;
}

.box.has-advanced-upload {
    outline: 2px dashed #92b0b3;
    outline-offset: -10px;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
}

.box.has-advanced-upload .box-dragndrop {
    display: inline;
}

.box {
    font-size: 1.25rem;
    background-color: #f4f8fc;
    position: relative;
    padding: 50px 20px;
}

.box-icon {
    font-size: 6em;
    fill: #92b0b3;
    display: block;
    margin-bottom: 40px;
    text-align: center;
}

.box-button {
    text-align: center;
    display: block;
    margin: 20px auto 0;
}

.box-file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    text-align: center;
}

.box-file-label-text {
    text-align: center;
    font-size: 1.3em;
}

.box-file-label {
    max-width: 80%;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    &:hover {
        color: #e05048;
    }
}

.is-dragover {
    outline-offset: -20px;
    outline-color: #c8dadf;
    background-color: #cdcdcd;
}

3. And now, it is time to handle the events. To do so, see the html code above. I have registered three events on the drop zone - (drop), (dragover), and (dragleave). On dragover event I am preventing the browser from performing its default action on the dragged object, and then setting a flag to true, which I am using in html to conditionally apply the styles.

public onDragOver(event): void {
  event.preventDefault();
  this.isDragged = true;
}

On dragleave event, I am setting this same flag to false.

public onDragLeave(event): void {
    this.isDragged = false;
  }

And then, most importantly, I am catching the files that are dragged with (drop) event as below -

public onDrop(event: DragEvent): void {
    event.preventDefault();
    this.isDragged = false;
    if (event.dataTransfer.items) {
      // Use DataTransferItemList interface to access the file(s)
      for (var i = 0; i < event.dataTransfer.items.length; i++) {
        // If dropped items aren't files, reject them
        if (
          event.dataTransfer.items[i].kind === "file" &&
          event.dataTransfer.items[i].type == "application/x-zip-compressed"
        ) {
          var file = event.dataTransfer.items[i].getAsFile();
          this.files.push(file);
         }
      }
    }
  }

As you can see, I am only selecting the files that are zip and pushing them to list of files.

And basically that's it. You have the drag and drop component in your Angular app.

So Node.js is really cool if you have to do the rapid prototyping, and that is why I decided to use it in our demo for the Vivatech TechCrunch Hackathon at Paris.

Altough I have never used Node before, I was quickly able to setup a new Node.js project and get it running. I was also able to integrate Express framework for all the routing and server logic.

However, when I decided to deploy the app to Azure app service, I found it really hard and confusing to do so. In fact it took me almost more time to deploy this tiny app than finish all the initial setup and coding. To start with, the documentation is really confusing and do not provide a simpler way to do the deployment. On the top of it, if you are not following the Microsoft documentation to create the node.js app, and you have done it on your own, it is almost impossible to be able to deploy the service to cloud.

However, after couple of trial and errors, I found the most optimum way to do the deployment, and avoid all the possible pitfalls, and have decided to write a blogpost about it.

If you are here to see how to write your first Node.js express app, this is the wrong place to lurk in. This blog post is only about deploying the service to Azure app service using Visual Studio Code.

Actually doing this is really easy, once you know how to do it. And that's the catch!

So first, Install Azure App Services plugin in Visual Studio Code!

Once you install it, you will see the Azure icon on left side (Might need to close and open the VS Code). Open the tab, and connect to azure subscription. Once you are connected to azure subscription, you see your subscription.
Add a new app to your subscription, it will take you through the whole process of creating resrouce group, app service plan, and yada yada yada!!

Once you do it, it is really easy to deploy your code to app, just by right clicking on the new app service, and saying deploy to app. this will pop up a box on top and ask you the folder to select. BUT BEFORE YOU DO THAT!
THERE IS A CATCH!
You need to make sure you have added the web.config file to your project. Without adding this file, your app will show you strange error such as app is unavailable. I copied the file from the github samples nodejs-docs-hello-world-master

Another Tip: Make sure to use process.env.PORT || 3000 in your app.listen function inside server.js instead of hardcoded 3000. This environmental variable you can set to application settings, either from VS Code or Portal. Just the hard coded port number, does not work in cloud!

And that's it. You are done!