How to manually deploy an Angular app to Azure App Service

Artículo en español / Spanish article

Welcome, this guide aims to teach what you need to know about how to manually deploy an Angular app from Visual Studio Code to Azure App Service, in just 11 steps.

Requirements:

• An Azure subscription you can get started with Azure for free.
• Visual Studio Code
• Node.js LTS version
• Angular CLI
• Git

Let’s start:

Step 0: When you’re working on an Angular project, it’s crucial to verify that you have the correct versions of Node.js and the Angular CLI installed to ensure compatibility and a smooth development and deployment process.

open your terminal or command prompt and run:

ng version

This command will display detailed information about the Angular CLI, Node js and Npm version installed.

You will see something like this

Step 1: Create an Angular Application in the Directory of Your Selection

open your terminal or command prompt and run:

ng new testAngularInAAS --strict false

“testAngularInAAS” can be replaced by the required/wished angular app name.

Step 2: Test your Angular app locally: Run It on your local server

open your terminal or command prompt and run:

cd testAngularInAAS
ng serve –o

You will have something like this if everything goes well.

your app will be available at http://localhost:4200/ by default.

Step 3: Build Your Angular Project for Deployment

open your terminal or command prompt and run:

ng build

or can be

npm run build

It is a productive project

ng build –prod

For Angular projects, ng build is the preferred and easier option, while npm run build is more flexible and suitable for custom scenarios.

You will have something like this if everything goes well.

Step 4: Provision an Azure App Service for Angular projects

search App Services

Click on “Create” => “Web App”

Step 5: Configure the basics about your web app

Create a Resource Group and Apply Naming Convention to the end “-RG”

Can be Linux to.

For testing: Opt for the F1 Pricing Plan, but feel free to choose otherwise as needed.

Step 6: Configure the tags about your web app

You can write all your tags needed.

You will have something like this at the end of the configuration.

You will have something like this if the provision an Azure App Service goes well.

Step 7: Open the project from your Visual Studio Code, later install the following extensions.

Azure Account

Azure App Service

Azure Resources

Step 8: Sign in to your Azure account

you complete your credentials , after that you will see your resources on azure, especially the App Services created on the step 6.

Click TestAngularApps properties

Click on Deploy to Web App

Click on Browse

We have two way to deploy this angular app at the azure app service

Short way

Long way

Step 9: Short way

select the folder inside the dist, usually with the name of the angular project.

click on Deploy button

Everything looks fine now , your angular app were deployed to Azure App Services successfully

Step 10: Long way

select dist folder

yes, deploy

Look like if you can’t see the site.

Step 10.1: Change the configutation about path mappings in your app service.

click on Path mappings

Click on Edit button

Now you will need to verify the name of your Angular app at the package.json

the name is “test-angular-in-aas”

You will add that name to your default physical path: from site\wwwroot to site\wwwroot\test-angular-in-aas

site\wwwroot => site\wwwroot\test-angular-in-ass

You’ll need to restart you app service.

Everything looks fine now, your angular app was deployed to Azure App Services successfully

Use the way preferred by you.

If you prefer a LinkedIn article take a look here.

Note: Prioritize Your azure Account Security: a friendly reminder

One essential practice to uphold is signing out of your Azure account once you’ve completed your deployments and administrative tasks.

Please, let me know your feedback because I can grow with it, thank you very much.

My apologies for any inadvertent errors with my English skills, Im learning how to speak my second language.