Deploying an Angular application in Azure
Azure gives us the ability to deploy an application in a cloud environment easily and securely. In this article, I explain how to deploy an Angular application in a cloud environment in Azure.
In the previous article, I explain how to start to work with Azure, by creating a subscription, a resource group and some services to deploy a Web API with a database. So if you want to check about that first, you can read this previous article by clicking here.
Creating an APP Service
To deploy the Front-End application, we need to create an “App Service”. In Azure portal, search for “App Services” (this service allows us to deploy our WEB API as software as a service (SaaS):
Then click in “Create”:
Now it’s necessary to configure your app service, by selecting your subscription, your resource group, informing a name for the service, the tech stack, operating system, region and the plan:
TIP: It was not possible to deploy the project in a Linux OS, by the “Azure App Service” for Visual Studio Code. So be sure to select the “Windows” option.
Note that I’m using the plan “Free F1”, because this is a demo. If you want to deploy your application at a production level, I recommend you to use a “Production” plan. You can change that by clicking on this option:
Then click in “Review + create”, confirm the information and click in “Create”. Can take some time until your service is created, you can check the status in the notifications (the bell icon in the top bar).
Deploying the Angular App with “Azure App Service”
To deploy the Angular application, we are going to use the Visual Studio Code, and an extension named “Azure App Service”.
You can download this extension in your Visual Studio Code and use your Azure account to authenticate.
This project uses a back-end application that was already deployed in Azure. So we need to add the URL to the API in the “environment.prod.ts” file:
After that, by a command-line tool, execute the command to build the application to production:
ng build --prodAfter executing this command, you can find some files inside of a folder inside of the “dist” folder. These files are the files that we need to deploy in Azure.
In Visual Studio Code, go to the “Azure App Service” extension and click in “Sign in to Azure…”:
A page in your browser will open and then add your authentication information.
Click in the “Deploy to Web App…” icon:
Click in “Browse”:
Select the folder that is inside of the “dist” folder.
Select the App Service that was created for the front-end application:
After deploying, you should be able to access the application in the browser:
https://demobookstore.azurewebsites.net/
As we already deployed the back-end, we can also see the data that was added:
And we can also add new data:
Deploying the Angular App with “KUDU”
Kudu is the engine behind a number of features in Azure App Service related to source control based deployment, and other deployment methods like Dropbox and OneDrive sync. (Microsoft Documentation)
Another possible way to deploy the Angular application in Azure is by KUDU. This way we can manually add the files by accessing the App Service in the Azure portal and searching for “Advanced tools”:
Click in “Go”:
Another page in the browser will open, then click in “Debug console” > CMD:
You will see this page:
Click in “site” and in “wwwroot”, and click in the “+” icon to add a new folder:
Create a folder for your project:
Open your project local folder, and select all the files in the folder inside in the “dist” folder (after executing the ng build — prod command):
Drag and drop these files into the new folder that you created:
In your App Service in Azure portal, search for “Configuration”:
Click in “New virtual application or directory”, and change from “site\wwwroot\” to “site\wwwroot\BookStore-SPA” (or the name of the folder that you created):
After that remember to save the changes. Now you can also access the application:
Conclusion
These are two different ways to deploy an Angular application in Azure. The first one was using an extension for Visual Studio Code, and the other option using the Advanced Tools in Azure Portal. Deploying your application in a cloud environment as Azure brings many advantages for you since you don’t need to worry about the infrastructure, focusing more on your application. You can check the code of this project here:
https://github.com/henriquesd/DeployingToAzureExampleIf you like this solution, I kindly ask you to give a ⭐️ in the repository.
Thanks for reading!
