Deploying a Blazor Server-Side Application to Azure App Service Using GitHub Actions
Tags: azure, blazor, git, webdev
Published: 2022-10-03 13:27:15

---
title: Deploying a Blazor Server-Side Application to Azure App Service Using GitHub Actions
published: true
date: 2022-10-03 10:30:47 UTC
tags: azure, blazor, git, webdev
canonical_url: https://www.syncfusion.com/blogs/post/deploying-blazor-server-application-to-azure-app-service-using-github-actions.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udfrq47t5dxe41aizfqg.png
---

GitHub Actions is a CI/CD platform that helps us to automate the deployment process of applications using the GitHub repository. We can build, test, and deploy our applications to the Azure App Service using GitHub Actions. This blog will demonstrate the procedure to deploy a Blazor server-side app to the Azure App Service using GitHub Actions.

## Prerequisites

Before starting to create and deploy the Blazor application, you need to have the following tools installed:

- [Visual Studio 2022](https://visualstudio.microsoft.com/vs/ "Visual Studio 2022")
- [GitHub Account](https://github.com/ "GitHub Repository")
- [Azure Subscription](https://azure.microsoft.com/en-in/free/ "Azure Portal")
- [.NET SDK 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0 ".NET SDK 6.0")

## Step 1: Create Azure Web App in Azure App Service

[Microsoft’s Azure App Service](https://azure.microsoft.com/en-in/services/app-service/ "Microsoft's Azure App Service") is a [platform as a service](https://en.wikipedia.org/wiki/Platform_as_a_service "Wikipedia page for Platform as a service") (PaaS) solution. We can use it to host web apps, REST APIs, and backend services for mobile apps. In this blog, we use Azure App Service to host a Blazor server-side application as a web app.

First, open the Azure portal and select Azure App Service. Then, click **Create** to create an Azure web app.

After that, you need to enter several details to finalize the Azure web app.

![Creating Azure Web App in Azure App Service](https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/Creating-Azure-Web-App-in-Azure-App-Service.gif)

In the previously pictured form, select the resource group first. If there isn’t a resource group, create a resource group by clicking **Create New**. Second, provide a unique name for the app. Third, select the runtime stack to build and run the application. For this example, I select **.NET 6** as the runtime stack for the Blazor server-side application, **Linux** as the operating system, and **East Asia** as the region.

Once the application is created, click on the application name. Now, you will see an option named **Get publish profile**. Make sure to download the published profile from there and save it locally, since we will use it in one of the next steps with the GitHub Repository.

## ![Click on Get publish profile](https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/Blazordemo-git.png)

## Step 2: Create the Blazor Server-Side Application

In this step, we create a Blazor server-side application using Visual Studio 2022. First, open Visual Studio and create a new project with the [Blazor Server App template](https://docs.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=windows&view=aspnetcore-6.0 "Tooling for ASP.NET Core Blazor documentation"). Then, select  **.NET 6** as the framework for this project.

![Creating the Blazor Server-Side Application](https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/Creating-the-Blazor-Server-Side-Application.png)

After creating the project, run it, and check that everything is working.

## Step 3: Configure the YAML File for GitHub Workflow

Now, we create the YAML file to create the GitHub workflow for GitHub Actions. First, navigate to the Blazor application project folder created in the previous step. Then, create a directory named **.github** followed by a directory named **workflows** inside the **.github** directory.

After that, create a YAML file named **demo.yml** inside the workflows directory and update it with the following code.

```js
name: Build and deploy Blazor App
# use this 'on' to trigger the workflow
on:
  push: # trigger when pushing the commits into main branch
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: windows-latest # OS or machine to run each job
    steps: # steps - series of tasks to run the job
      - uses: actions/checkout@v2#Setup .NET Core SDK
      - name: Set up .NET Core
        uses: actions/setup-dotnet@v1
        with:# Use latest version of dotnet 6
          dotnet-version: '6.0.x'# include pre-release of dotnet
          include-prerelease: true
       
      - name: Build with dotnet# run the command for build the dotnet app
        run: dotnet build --configuration Release

      - name: dotnet publish# run the command to pack the build files and dependencies into folder for deployment
        run: dotnet publish -c Release -o ${{env.DOTNET_ROOT}}/myapp

      - name: Upload artifact for deployment job#Reference a specific upload artifact
        uses: actions/upload-artifact@v2

        with:
          name: .net-app
          path: ${{env.DOTNET_ROOT}}/myapp

  deploy:
    runs-on: windows-latest
    needs: build #contains the output from the build job#set environment
    environment:
      name: 'Production'# use deploy-to-webapp step in the job and look at the output of the dependent job. Then find the webapp-url and set it for URL in the environment
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job#Reference a specific download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: .net-app

      - name: Deploy to Azure Web App
        id: deploy-to-webapp# Reference the deploy web app
        uses: azure/webapps-deploy@v2
        with:#use app name
          app-name: 'blazordemo-git'
          slot-name: 'Production'#use publish profile from the GitHub secrets
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE }}
          package: .
```

In the previous script, the name property in the first line is issued to define the GitHub workflow name. Then, the trigger conditions are defined to execute the workflow. Based on these configurations, the workflow will be triggered when a commit is pushed into the main branch.

After that, a new job is initialized to build the Blazor server-side application. We include the necessary commands to build the application. Finally, a new deployment job is created to deploy the application to the Azure App Service as a web app. In this example, I have used secrets from the  **publish profile**. I will show you how to create this in the next step. The publish profile contains information and settings used to deploy the application to Azure.

## Step 4: Configure the Secrets and Deploy the Application

In this step, we create a GitHub repository for the Blazor application and add secret data to it. For this, we need to use the publish profile downloaded in step 1.

![Configuring the Secrets](https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/Configuring-the-Secrets-and-Deploying-the-Application.png)

After adding the secret data, we push the changes to the GitHub repository. Then, the action will trigger and start the GitHub workflow. It will run two jobs, one to build and another to deploy the application. You can check the status of the action in the Action tab, as shown in the following screenshot.

![Push the changes to the GitHub repository](https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/Deploying-the-application.png)

Once the application is deployed, go to the portal and check the created web app.

![Check the created web app](https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/Checking-the-created-web-app.png)  
You will see the status is running. If you need to stop this application, click Stop.

Click the URL to check the website.  
 ![Deploying Blazor server-side application to Azure App service using GitHub Actions](https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/BlazorAzureApp.png)

## Conclusion

This article discussed how to deploy a Blazor server-side application to the Azure App Service using GitHub Actions. With the increasing popularity of GitHub Actions and Blazor applications, it is an advantage to understand how to automate your CI/CD process by combining them.

I hope this article helps you in your next Blazor project. Thank you for reading.

Syncfusion’s [Blazor](https://www.syncfusion.com/blazor-components "Blazor UI Components") component suite offers over 70 UI components. They work with both server-side and client-side (WebAssembly) hosting models seamlessly. Use them to build marvelous apps!

If you have any questions or comments, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Simple Steps to Integrate a Blazor WebAssembly Project with an Existing ASP.NET Core Application](https://www.syncfusion.com/blogs/post/integrate-blazor-webassembly-in-asp-net-core-application.aspx "Blog: Simple Steps to Integrate a Blazor WebAssembly Project with an Existing ASP.NET Core Application")
- [A Full-Stack Web App Using Blazor WebAssembly and GraphQL: Part 6](https://www.syncfusion.com/blogs/post/a-full-stack-web-app-using-blazor-webassembly-and-graphql-part-6.aspx "Blog: A Full-Stack Web App Using Blazor WebAssembly and GraphQL: Part 6")
- [Download Files from Azure Blob Storage with Blazor WebAssembly and ASP.NET Web API](https://www.syncfusion.com/blogs/post/download-files-from-azure-blob-storage-with-blazor-webassembly-and-asp-net-web-api.aspx "Blog: Download Files from Azure Blob Storage with Blazor WebAssembly and ASP.NET Web API")
- [CRUD Operations Using Blazor and MongoDB [Webinar Show Notes]](https://www.syncfusion.com/blogs/post/crud-operations-using-blazor-and-mongodb-webinar-show-notes.aspx "Blog: CRUD Operations Using Blazor and MongoDB [Webinar Show Notes]")