Friday, March 29, 2024
HomeC#Deploying a Blazor Server-Aspect Software to Azure App Service Utilizing GitHub Actions

Deploying a Blazor Server-Aspect Software to Azure App Service Utilizing GitHub Actions


GitHub Actions is a CI/CD platform that helps us to automate the deployment means of purposes utilizing the GitHub repository. We are able to construct, check, and deploy our purposes to the Azure App Service utilizing GitHub Actions. This weblog will reveal the process to deploy a Blazor server-side app to the Azure App Service utilizing GitHub Actions.

Stipulations

Earlier than beginning to create and deploy the Blazor utility, you want to have the next instruments put in:

Step 1: Create Azure Net App in Azure App Service

Microsoft’s Azure App Service is a platform as a service (PaaS) answer. We are able to use it to host net apps, REST APIs, and backend companies for cell apps. On this weblog, we use Azure App Service to host a Blazor server-side utility as an internet app.

First, open the Azure portal and choose Azure App Service. Then, click on Create to create an Azure net app.

After that, you want to enter a number of particulars to finalize the Azure net app.

Creating Azure Web App in Azure App Service

Within the beforehand pictured kind, choose the useful resource group first. If there isn’t a useful resource group, create a useful resource group by clicking Create New. Second, present a singular title for the app. Third, choose the runtime stack to construct and run the appliance. For this instance, I choose .NET 6 because the runtime stack for the Blazor server-side utility, Linux because the working system, and East Asia because the area.

As soon as the appliance is created, click on on the appliance title. Now, you will notice an choice named Get publish profile. Be certain to obtain the printed profile from there and put it aside regionally, since we’ll use it in one of many subsequent steps with the GitHub Repository.

Click on Get publish profile

Step 2: Create the Blazor Server-Aspect Software

On this step, we create a Blazor server-side utility utilizing Visible Studio 2022. First, open Visible Studio and create a brand new challenge with the Blazor Server App template. Then, choose .NET 6 because the framework for this challenge.

Creating the Blazor Server-Side Application

After creating the challenge, run it, and verify that every thing 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 utility challenge folder created within the earlier step. Then, create a listing named .github adopted by a listing named workflows contained in the .github listing.

After that, create a YAML file named demo.yml contained in the workflows listing and replace it with the next code.

title: Construct and deploy Blazor App
# use this 'on' to set off the workflow
on:
  push: # set off when pushing the commits into major department
    branches:
      - major
  workflow_dispatch:

jobs:
  construct:
    runs-on: windows-latest  # OS or machine to run every job
    steps: # steps - collection of duties to run the job
      - makes use of: actions/checkout@v2#Setup .NET Core SDK
      - title: Arrange .NET Core
        makes use of: actions/setup-dotnet@v1
        with:# Use newest model of dotnet 6
          dotnet-version: '6.0.x'# embrace pre-release of dotnet
          include-prerelease: true
       
      - title: Construct with dotnet# run the command for construct the dotnet app
        run: dotnet construct --configuration Launch

      - title: dotnet publish# run the command to pack the construct information and dependencies into folder for deployment
        run: dotnet publish -c Launch -o ${{env.DOTNET_ROOT}}/myapp

      - title: Add artifact for deployment job#Reference a selected add artifact
        makes use of: actions/upload-artifact@v2

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

  deploy:
    runs-on: windows-latest
    wants: construct #accommodates the output from the construct job#set atmosphere
    atmosphere:
      title: 'Manufacturing'# use deploy-to-webapp step within the job and have a look at the output of the dependent job. Then discover the webapp-url and set it for URL within the atmosphere
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - title: Obtain artifact from construct job#Reference a selected obtain artifact from construct job
        makes use of: actions/download-artifact@v2
        with:
          title: .net-app

      - title: Deploy to Azure Net App
        id: deploy-to-webapp# Reference the deploy net app
        makes use of: azure/webapps-deploy@v2
        with:#use app title
          app-name: 'blazordemo-git'
          slot-name: 'Manufacturing'#use publish profile from the GitHub secrets and techniques
          publish-profile: ${{ secrets and techniques.AZUREAPPSERVICE_PUBLISHPROFILE }}
          bundle: .

Within the earlier script, the title property within the first line is issued to outline the GitHub workflow title. Then, the set off circumstances are outlined to execute the workflow. Based mostly on these configurations, the workflow will likely be triggered when a commit is pushed into the primary department.

After that, a brand new job is initialized to construct the Blazor server-side utility. We embrace the required instructions to construct the appliance. Lastly, a brand new deployment job is created to deploy the appliance to the Azure App Service as an internet app. On this instance, I’ve used secrets and techniques from the publish profile. I’ll present you easy methods to create this within the subsequent step. The publish profile accommodates data and settings used to deploy the appliance to Azure.

Step 4: Configure the Secrets and techniques and Deploy the Software

On this step, we create a GitHub repository for the Blazor utility and add secret information to it. For this, we have to use the publish profile downloaded in step 1.

Configuring the Secrets

After including the key information, we push the modifications to the GitHub repository. Then, the motion will set off and begin the GitHub workflow. It can run two jobs, one to construct and one other to deploy the appliance. You’ll be able to verify the standing of the motion within the Motion tab, as proven within the following screenshot.

Push the changes to the GitHub repository

As soon as the appliance is deployed, go to the portal and verify the created net app.

Check the created web app
You will notice the standing is operating. If you want to cease this utility, click on Cease.

Click on the URL to verify the web site.

Deploying Blazor server-side application to Azure App service using GitHub Actions

Conclusion

This text mentioned easy methods to deploy a Blazor server-side utility to the Azure App Service utilizing GitHub Actions. With the rising recognition of GitHub Actions and Blazor purposes, it is a bonus to grasp easy methods to automate your CI/CD course of by combining them.

I hope this text helps you in your subsequent Blazor challenge. Thanks for studying.

Syncfusion’s Blazor part suite presents over 70 UI elements. They work with each server-side and client-side (WebAssembly) internet hosting fashions seamlessly. Use them to construct marvelous apps!

When you have any questions or feedback, you possibly can contact us via our help boardshelp portal, or suggestions portal. We’re all the time completely satisfied to help you!

Associated blogs

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments