Let’s make a series of entries in which we’ll create an application with Angular 8 and Firebase. The application will be a ToDo App, that is, a task manager app. It will use the Cloud Firestore database, and Firebase Authentication for the login system.

Related entries

1. Introduction 
2. Configuring Firebase and Bootstrap in Angular. Understanding Cloud Firestore
3. Creating our first component – Click event  
4. Our first reactive form 
5. Saving and reading data in Cloud Firestore – ngIf and ngFor
6. Introduction to Routing 
7. Login system with Angular and Firebase 
8. Releasing our Angular App in Azure with VS Code <– You are here

As I publish the articles, I will be placing the links here above.

Deploying to Azure

After having developed our first application of angular, we now want to make it known to the world. We want to publish it. We’re going to do it in an Azure App Service.

According to Azure’s official website, Azure is a set of services in the cloud. Basically, Azure encompasses a series of services ranging from web application hosting, virtual machines, DevOps solutions, e-commerce, among many others. For our case, we will use a Web App service to host our Angular application. We will use a free subscription type, so we will not have to pay for the use of hosting.

The first thing you should do is register in Azure, you may need a credit or debit card which has a CCV. They will not charge your card, but you need to register.

After you register, or if you are already registered, we will go to Visual Studio Code and download an extension called “Azure App Service“. With this extension we will be able to publish our Angular application in Azure in a simple way.

Now, let’s login in Azure from VS Code, for that:

• Click on the Azure symbol in VS Code:

• Click on “Sign in to Azure”,
• A window will open
• Login or select your account
• Close the tab

We can now return to VS Code. In the Azure tab you should get your subscriptions. If you do not have one, you can create it for free on the Azure portal, and keep using the free version of the different services that have a free version. In our case, we will use an app service.

Now, let’s go to the Azure page: https://portal.azure.com

The first thing we are going to do is create a new Resource Group:

• Click on Resource Groups
• Click on Add
• Fill out the form with the requested data
• Press Create

Now, let’s create the App Service:

• Go to App Services
• Press Add
• Select Web App
• Press Create
• Fill out the form with the data of the site
  • Use the Resource Group that you created in the previous step
  • For Publish choose Code
  • In Runtime stack choose ASP.NET V4.7
  • In SKU and size choose Free
• Click Create

You may have to wait a few seconds or minutes for the App Service to be created. A notice of when the App Service is ready is posted on the Azure portal. When the App Service is ready, go back to VS Code and go to the Azure tab. You should get the app service under your subscription, if it does not, press refresh:

Once this has been achieved, we can begin the deployment process. The first thing we are going to do is make an angular build, for that, go to a terminal in the directory of your project, and use the following command:

ng build

This is going to compile your project in a folder called dist. Since we are simply doing tests, we are compiling in this way. If we were to compile to deploy in production, we would use:

ng build –prod

Nota: Si haces ng build –prod y no te funciona por un error de firebaseConfig, es posible que sea que no has colocado las credenciales de firebase en tu archivo environment.prod.ts.

Note: If you do ng build –prod and it does not work for you because of a firebaseConfig error, it may be that you have not placed the firebase credentials in your environment.prod.ts file.

You can find the dist folder in the directory of your project, this is what we are going to deploy. Let’s go back to the Azure tab of VS Code to do this:

• Right click on the web app where you want to deploy to
• Select “Deploy to Web App”
• Click on Browse
• Select the folder that is inside the dist folder (not the dist folder, but the one inside of dist)
• Press Deploy

With this, the deployment process will begin, which can take a few minutes.

When the process is finished, click on Browse Website and you will be taken to your Angular application in Azure.

And, although the site works, you can log in and all that. We have an error if we try to directly access a route other than root. For example, if I try to access the site:

https://angulartodowithaccount.azurewebsites.net/todos

I get the error:

“The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.”

To fix it, we need to add a web.config file. Inside your src folder of your Angular project, place the following file:

web.config

Now, we need this file to be placed in the dist folder when we do our ng build, for that, we go to the angular.json file and place this in the assets property:

Now with this, we can do an ng build (or ng build –prod if you prefer), and the web.config file will be placed in the dist. After doing the ng build, re-deploy your project, and now we will not have the previous problem.

Congratulations, you have published your first Angular website!

Regards!