How to Build and Deploy an Angular 18 App to Azure App Service (The Easy Way!)

November 15, 2024#Angular 18 #Azure App Service #Deployment #Azure CLI #GitHub Actions #Azure DevOps #Web Hosting #CI/CD #Cloud Deployment #Node.js

Ready to take your Angular 18 application live on Azure? Perfect! Azure App Service is a powerhouse platform that’s scalable, secure, and super friendly for Angular apps. In this guide, we’ll break down everything you need to get your app up and running on Azure in no time. Let’s dive in!

What You’ll Need

Here’s a quick checklist to get started:

Azure Account: If you don’t have one, you can sign up here.
Azure CLI: Download and install it from this page.
Node.js (18 or higher) and Angular CLI: Make sure you have Node installed, then install Angular CLI globally with:
```
npm install -g @angular/cli
```
GitHub Account (optional): Useful for setting up continuous deployment with GitHub Actions or Azure DevOps.

Step 1: Create Your Angular 18 App

First things first, let’s get your Angular app up and running locally.

Create a New Angular Project: Open your terminal and run:
```
ng new my-angular-app
cd my-angular-app
```
The Angular CLI will create a new project with everything you need to build, test, and deploy.
Run the App Locally: Run the development server with:
```
ng serve
```
Open http://localhost:4200 in your browser, and you should see your app in action. This confirms that everything is set up correctly.

Step 2: Build Your Angular App for Production

We want our app to be lean, fast, and optimized before we send it to Azure!

Build a Production-Ready Version: In Angular 18, the ng build command automatically uses production settings by default. In your project’s root folder, run:
```
ng build
```
This command will generate a set of production files in the dist/my-angular-app folder. This is the version of your app that we’ll deploy to Azure!

Step 3: Set Up Your Azure App Service

Now, let’s set up your environment on Azure to host your Angular application.

Log in to Azure: Open a terminal and log in to your Azure account:
```
az login
```
Create a Resource Group: A resource group is a container that holds related resources for your project. Run this command to create one:
```
az group create --name myResourceGroup --location "Sweden Central"
```
Create an App Service Plan: The App Service Plan determines the server’s location and resources. Run the following command to create a basic plan:
```
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku B1 --is-linux
```
The --sku B1 flag specifies a basic pricing tier. You can adjust this based on your needs.
Create the Web App: Now, let’s create the actual App Service that will host your Angular app:
```
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name myAngularApp --runtime "NODE|18-lts"
```
Replace myAngularApp with a unique name—this will be the URL for your app (e.g., https://myAngularApp.azurewebsites.net).

Step 4: Deploy Your Angular App to Azure

Azure makes deploying your app a breeze. Here are three popular methods: Azure CLI, GitHub Actions, and Azure DevOps.

Method 1: Deploy Using Azure CLI

Deploy the Production Build: Run this command from your project root to deploy the files in the dist/my-angular-app folder:
```
az webapp deploy --resource-group myResourceGroup --name myAngularApp --src-path ./dist/my-angular-app
```
Check Your Live Site: Once deployed, open your browser and go to https://myAngularApp.azurewebsites.net (replace with your app’s name). Your app should be live!

Method 2: Deploy Using GitHub Actions (CI/CD)

GitHub Actions automates deployments, which is fantastic for continuous integration!

Create a GitHub Workflow File: In your project repo, create a folder .github/workflows and add a file named deploy.yml.

Add Deployment Workflow: Copy and paste this code into deploy.yml:

name: Deploy Angular App to Azure

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Build the Angular app
        run: npm run build

      - name: Deploy to Azure Web App
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'myAngularApp'
          slot-name: 'production'
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}

Add Publish Profile Secret to GitHub:
- Go to the Azure portal, find your App Service, select Deployment Center > Get publish profile, and download it.
- In your GitHub repo, go to Settings > Secrets and variables > Actions and create a new secret named AZURE_WEBAPP_PUBLISH_PROFILE. Paste the publish profile content there.
Push Your Code: Push changes to your main branch, and GitHub Actions will automatically build and deploy to Azure.

Method 3: Deploy Using Azure DevOps (CI/CD)

Azure DevOps provides a powerful way to build and deploy applications with custom pipelines. Here’s how to set up a pipeline to deploy your Angular app.

Create an Azure DevOps Project: Go to Azure DevOps, create a new project, and add your Angular app repository.
Set Up a New Pipeline: In your Azure DevOps project, go to Pipelines and create a new pipeline. Select GitHub (or Azure Repos Git if your code is there) as your source, and choose your Angular app’s repository.
Configure the Pipeline with YAML: Use the following YAML configuration to set up a build and release pipeline for your Angular app:

  trigger:
    branches:
      include:
        - main

  pool:
    vmImage: 'ubuntu-latest'

  steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '18.x'

    - script: |
        npm install
        npm run build
      displayName: 'Install dependencies and build'

    - task: CopyFiles@2
      inputs:
        contents: 'dist/my-angular-app/**'
        targetFolder: '$(Build.ArtifactStagingDirectory)'

    - task: PublishBuildArtifacts@1
      inputs:
        pathToPublish: '$(Build.ArtifactStagingDirectory)'
        artifactName: 'drop'
        publishLocation: 'Container'

    - task: AzureWebApp@1
      inputs:
        azureSubscription: '<Your-Azure-Subscription>'
        appName: 'myAngularApp'
        package: '$(Build.ArtifactStagingDirectory)/**/*.zip'

Deploy Automatically on Push:: Every time you push to the main branch, this pipeline will:.
- Install dependencies and build your Angular app.
- Archive the build output from the dist/my-angular-app folder into a .zip file.
- Deploy the .zip package to your Azure App Service using the AzureWebApp task.

Update the <Your-Azure-Subscription> field with your name of your service connection

Step 5: Configure Angular Routing on Azure App Service

Does your Angular app use routing? Here’s how to make sure it works smoothly on Azure!

For Windows App Service

Create a web.config file: Add a web.config file to your dist/my-angular-app folder with this content:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="../../index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Redeploy: Deploy your app again, making sure web.config is included. This file will allow Angular routing to work on a Windows-based App Service.

For Linux App Service

To ensure Angular’s client-side routing works correctly on a Linux App Service, we can use pm2 with a simple configuration.

Set Startup Command in Azure: Go to the Configuration > Startup Command for your App Service, and add:

pm2 serve /home/site/wwwroot/browser --no-daemon --spa

Here’s a quick breakdown:

pm2 serve tells pm2 to serve static files
/home/site/wwwroot/browser is the path to your Angular app's production files. Adjust this if your build output is in a different location. The files you should see in the folder looks something like these:
```
- favicon.ico
- index.html
- main-ZGHW2HPE.js
- polyfills-FFHMD2TL.js
- styles-5INURTSO.css
```
--no-daemon ensures that pm2 runs in the foreground, which is needed for Azure App Service
--spa configures pm2 to handle single-page application routing, so that Angular’s routes work seamlessly.

Alternative: Using npx serve: Instead of pm2, you could use npx serve as an alternative command for quickly serving static files:

npx serve /home/site/wwwroot/my-angular-app/browser --single

While this works for small projects or development, it’s generally not recommended for production. serve is a lightweight static file server that lacks the robustness and scalability features of pm2, such as process management, automatic restarts, and load balancing. For production environments, pm2 is the better choice to ensure reliability and performance.

npx serve is a lightweight static file server that lacks the robustness and scalability features of pm2, such as process management, automatic restarts, and load balancing. For production environments, pm2 is the better choice to ensure reliability and performance.

2. Deploy Your Application:

After setting the startup command, deploy your Angular app as usual. This setup will allow Azure App Service to serve your app with full client-side routing support without requiring any additional configuration files.

You’re Live!

And that’s it—your Angular 18 app is now live on Azure! 🎉 With Azure’s flexible App Service, your app can scale as needed, stay secure, and you can even set up more integrations with other Azure services. Plus, if you went the GitHub Actions route, you’ve got a smooth CI/CD pipeline to handle future updates.

Happy coding and deploying! 🚀