![angular-deployment-to-azure](/posts/angular-deployment-to-azure/thumbnail.png) ![angular-deployment-to-azure](/posts/angular-deployment-to-azure/thumbnail.png) 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](https://azure.microsoft.com/free). - **Azure CLI**: Download and install it from [this page](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli). - **Node.js (18 or higher)** and **Angular CLI**: Make sure you have Node installed, then install Angular CLI globally with: ```bash 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. 1. **Create a New Angular Project**: Open your terminal and run: ```bash 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. 2. **Run the App Locally**: Run the development server with: ```bash 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! 1. **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: ```bash 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. 1. **Log in to Azure**: Open a terminal and log in to your Azure account: ```bash az login ``` 2. **Create a Resource Group**: A resource group is a container that holds related resources for your project. Run this command to create one: ```bash az group create --name myResourceGroup --location "Sweden Central" ``` 3. **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: ```bash 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. 4. **Create the Web App**: Now, let’s create the actual App Service that will host your Angular app: ```bash 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** 1. **Deploy the Production Build**: Run this command from your project root to deploy the files in the `dist/my-angular-app` folder: ```bash az webapp deploy --resource-group myResourceGroup --name myAngularApp --src-path ./dist/my-angular-app ``` 2. **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! 1. **Create a GitHub Workflow File**: In your project repo, create a folder `.github/workflows` and add a file named `deploy.yml`. 2. **Add Deployment Workflow**: Copy and paste this code into `deploy.yml`: ```yaml 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 }} ``` 3. **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. 4. **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. 1. **Create an Azure DevOps Project**: Go to [Azure DevOps](https://dev.azure.com/), create a new project, and add your Angular app repository. 2. **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. 3. **Configure the Pipeline with YAML**: Use the following YAML configuration to set up a build and release pipeline for your Angular app: ```yaml 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: '' appName: 'myAngularApp' package: '$(Build.ArtifactStagingDirectory)/**/*.zip' ``` 4. **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 `` 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** 1. **Create a `web.config` file**: Add a `web.config` file to your `dist/my-angular-app` folder with this content: ```xml ``` 2. **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. 1. **Set Startup Command in Azure:** Go to the **Configuration > Startup Command** for your App Service, and add: ```bash 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: ```bash 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! 🚀