Live Chat Icon For mobile
Live Chat Icon

Blazor FAQ - Host and deploy

Find answers for the most frequently asked questions
Expand All Collapse All

Heroku is a cloud platform as a service that enables you to deploy, build, and run applications in the cloud. Following are the steps to deploy a Blazor WebAssembly application to Heroku.

  1. Prerequisites:
    • Blazor WebAssembly app in your GitHub
    • Heroku account
    Deploy a Blazor WebAssembly app in Heroku

  2. Go to the Heroku dashboard and create a new app.

  3. Provide the app name and create an app.

  4. Now the new app is created. Next connect your GitHub Blazor WebAssembly app repository to Heroku for deployment.

  5. By default, Heroku does not support .NET apps for deployment. So, we add third-party build packs to enable the .NET app deployment support. Go to the settings tab and click Add buildpack.

  6. Now the dialog box will open. Copy the link below, paste it into the Buildpack URL section, and save your changes.

  7. The build pack has been added. Go to the Deploy tab and deploy the repository manually. The Blazor app starts building now.

  8. Now the Blazor app is deployed. Click View to run the deployed application.

  9. The deployed application opens in the default browser. See the following image for reference.

Permalink

Follow the steps below to deploy a Blazor WebAssembly application to GitHub Pages.

  1. Prerequisites:

    • .NET Core 3.1/.NET 5.0

    • GIT

    • GitHub Account

  2. Create a Blazor WebAssembly project using the below command in the CLI.

    mkdir BlazorGitHubPagesDemo
    cd BlazorGitHubPagesDemo
    dotnet new blazorwasm

  3. Add the .gitignore file to ignore the bin/obj files.

    dotnet new gitignore

  4. Now, create a new GitHub repository according to GitHub’s instructions and run the following commands in the CLI to push an existing repository to the created GitHub repository page.

    // Create the Git repository
    git init

    // Track all files that are not ignore by .gitignore
    git add –all

    // Commit all changes to the repository
    git commit -m “Initial commit”

    // Push the changes to the existing repo master branch
    git remote add origin https://github.com/{{GitHub_User_Name}}/BlazorGitHubPagesDemo.git

    git push -u origin master


    Now the changes have been committed in the newly created GitHub repository.

  5. After the source code has been pushed to the created GitHub repository, create a new GitHub action workflow to build the project, commit the output, and push the published code to a separate branch. To deploy in GitHub, GitHub Pages will use a separate branch (named gh-pages) as the static files for your site.

    To achieve this, navigate to the Action tab in the GitHub repository and click the set up a workflow yourself option to create a new GitHub workflow action.

    Workflow Template

  6. Clicking set up a workflow yourself will navigate to the Edit new file page. This file will instruct GitHub actions to build and deploy your project using YAML. Refer to “GitHub Actions” for the workflow of YAML files.

    Copy this code and paste it in your YML file.

    [main.yml]

    name: Deploy to GitHub pages

    # Run workflow on every push to the master branch
    on:
    push:
    branches: [ master ]

    jobs:
    deploy-to-github-pages:
    # Use Ubuntu-latest image to run steps on
    runs-on: ubuntu-latest
    steps:
    # Uses GitHub’s checkout action to check out code from the master branch
    – uses: actions/checkout@v2

    # Sets up .NET Core SDK 3.1
    – name: Setup .NET Core SDK
    uses: actions/setup-dotnet@v1
    with:
    dotnet-version: 3.1

    # Publishes the Blazor project to the release folder
    – name: Publish .NET Core Project
    run: dotnet publish BlazorGitHubPagesDemo.csproj -c Release -o release –nologo

    # Changes the base tag in index.html from ‘/’ to ‘BlazorGitHubPagesDemo’ to match the GitHub Pages repository subdirectory
    – name: Change base-tag in index.html from / to BlazorGitHubPagesDemo
    run: sed -i ‘s/<base href=”\/” \/>/<base href=”\/BlazorGitHubPagesDemo\/” \/>/g’ release/wwwroot/index.html

    # Copy index.html to 404.html to serve the same file when a file is not found
    – name: copy index.html to 404.html
    run: cp release/wwwroot/index.html release/wwwroot/404.html

    # Add the .nojekyll file to tell GitHub pages to not treat this as a Jekyll project. (Allow files and folders starting with an underscore)
    – name: Add .nojekyll file
    run: touch release/wwwroot/.nojekyll

    – name: Commit wwwroot to GitHub pages
    uses: JamesIves/github-pages-deploy-action@3.7.1
    with:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    BRANCH: gh-pages
    FOLDER: release/wwwroot


    Now that all steps are in place, commit the file.


    BlazorGitHubpagesDemo

  7. Navigate back to the GitHub Actions overview page by clicking the Actions tab.

    Create Main.yml

  8. You can now find your GitHub Action Workflow and the workflow runs on this page. Click on the first run that was automatically created when you committed the workflow, and watch it publish your project to the gh-pages branch.

  9. Once completed, you can see the result by navigating to the gh-pages branch in your repository.

  10. To enable GitHub pages in the repository settings, navigate to the settings by clicking on the Settings tab. Scroll down to the “GitHub Pages” section and select the gh-pages branch in the Source dropdown.

  11. Now, the GitHub Pages site should be available at in the below link. ‘[YOUR_USERNAME].github.io/[YOUR_REPOSITORY_NAME]’.

Refer to “How to deploy ASP.NET Blazor WebAssembly to GitHub Pages” for more details.

Permalink

Follow the steps below to deploy a Blazor Server application to Azure app service.

  1. Create a Blazor Server application

    To create a blazor Server Application using the following steps

    1. Open Visual Studio 2019 and create a new project.

      Create-a-Blazor-Server-Application

    2. Once Blazor App is selected, click Next button to configure the project name and location.

    3. Save the application, and then click Create.

    4. Select Blazor Server App and click Create to complete the application creation.

      Create a Blazor Server Application

  2. Deploying to Azure app service

    To Deploying the Azure App Service using the following steps.

    1. If you don’t have a login for Azure, sign up to access the Azure portal.

    2. Click Create a resource in Azure to create a resource group.

      Deploying-to-Azure-App-Service-2

    3. Select the Web App Azure application service.

       Deploying-to-Azure-App-Service-3

    4. Once Web App is selected, select the following options:

      • Select Free Trial as the subscription.

      • Create a resource group name, such as “Blazor.”

      • Update the Instance Details:

        1. Name: blazor-publish. The application hosted will be available in this URL: blazor-publish.azurewebsites.net.

        2. Select the Code radio button for Publish.

        3. Choose the .NET Core 3.1 LTS runtime stack and Windows operating system.

        4. Select the region in which to publish the app. Central US was chosen for this demo.

      • The app service plan with the Free F1 option will be selected by default, but this can be modified.

      • Once this is done, click Review + create.

        Deploying-to-Azure-App-Service-4

    5. After configuring the Web App Service, get the publish profile for the Web App Service to host the Blazor Server application. Select the created web app service (blazor-publish).

      Deploying-to-Azure-App-Service-5

    6. Navigate to the overview section and click Get publish profile, and the save the profile locally.

      Deploying-to-Azure-App-Service-6

  3. Publish a Blazor Server application in Azure

    • Using import-profile option

      To using import-profile option using the following steps.

      1. Right-click the project and click Publish in the context menu.

        Using-import-profile-option-1

      2. Choose Import Profile and click Next button. Then, locate the downloaded publish profile for the web app service.

        Using-import-profile-option-2

      3. Finally, publish the application by clicking Publish. The application will be deployed and will be available in the URL https://blazor-publish.azurewebsites.net/.

        Using-import-profile-option-3

    • Using Azure account login

      To using Azure account login using the following steps.

      1. In Visual Studio 2019, right-click on the project and click Publish in the context menu.

        Using-Azure-account-login-1

      2. Select Azure as the target.

        Using-Azure-account-login-2

      3. Select Azure App Service (Windows) as the specific target.


        Using-Azure-account-login-3

      4. You need to log in to your Azure account and choose the web app service.

        Using-Azure-account-login-4

      5. Now click publish to deploy the application.

        Using-Azure-account-login-5

      6. Now, the application will be deployed and will be available in the following URL. https://blazor-publish.azurewebsites.net/

Refer to “Publish an ASP.NET Core app to Azure with Visual Studio” for more details.

Permalink

Follow the steps below to deploy a Blazor WebAssembly application to Azure App Service.

  1. Prerequisites:

    • .NET Core 3.1/.NET 5.0

    • Visual Studio 2019 or a more current version, which should include Azure and ASP.NET as well as web development workloads.

    • Azure App Service account.

  2. Create a Blazor WebAssemby Application

    To create a blazor WebAssembly Application using the following steps

    1. Open Visual Studio 2019 and create a new project.

      Create a Blazor WebAssemby Application -1

    2. Once Blazor App is selected, click Next button to configure the project name and location.

    3. Save the application, and then click Create button.

    4. Select Blazor WebAssembly App and click Create button to complete the application creation.

      Create a Blazor WebAssemby Application

  3. Deploying to Azure App Service

    To Deploying the Azure App Service using the following steps.

    1. If you don’t have a login for Azure, sign up to access the Azure portal.

    2. Click Create a resource in Azure to create a resource group.

    3. Select the Web App Azure application service.

    4. Once Web App is selected, select the following options:

      • Select Free Trial as the subscription.

      • Create a resource group name, such as “Blazor.”

      • Update the Instance Details:

        1. Name: blazor-publish. The application hosted will be available in this URL: blazor-publish.azurewebsites.net.

        2. Select the Code radio button for Publish.

        3. Choose the .NET Core 3.1 LTS runtime stack and Windows operating system.

        4. Select the region in which to publish the app. Central US was chosen for this demo.

      • The app service plan with the Free F1 option will be selected by default, but this can be modified.

      • Once this is done, click Review + create.

    5. After configuring the Web App service, get the publish profile for the Web App service to host the Blazor WebAssembly application. Select the created web app service (blazor-publish).

    6. Navigate to the overview section, click on Get publish profile, and save the profile locally.

  4. Publish a Blazor WebAssembly application in Azure

    • Using import-profile option

      To using import-profile option using the following steps.

      1. Right-click the project and click Publish in the context menu.

        Using-import-profile-option

      2. Choose Import Profile and click Next. Then, locate the downloaded publish profile for the web app service.

        Using import-profile option

      3. Finally, publish the application by clicking Publish. The application will be deployed and will be available in the URL https://blazor-publish.azurewebsites.net/.

        Using-import-profile-option-3

    • Using Azure account login

      To using Azure account login using the following steps.

      1. In Visual Studio 2019, right-click on the project and click Publish in the context menu.

      2. Select Azure as the target.
        Using-Azure-account-login-2

      3. Select Azure App Service (Windows) as the specific target.

      4. You need to log in to your Azure account and choose the web app service.
        Using-Azure-account-login-4

      5. Now click Publish to deploy the application.
        Using-Azure-account-login-5

      6. Now, the application will be deployed and will be available in the following URL. https://blazor-publish.azurewebsites.net/

Refer to “Publish an ASP.NET Core app to Azure with Visual Studio” for more details.

Permalink

The Blazor application can be deployed to IIS using Visual Studio or you can also configure manually. Find the steps to deploy the Blazor application.

Deploy an app from Visual Studio to IIS

  1. Install the .NET Core Runtime Hosting Bundle in  your device.
  2. Create a Blazor application
  3. Publish the application using context menu from the Solution Explorer in Visual Studio.
Publish
  1. Click Publish. If there is no error, your application will be published successfully.

Manual Deployment to IIS

You can publish the Blazor application using “dotnet publish” command. Please refer to the document dotnet publish for additional commands.

IIS config

  1. Open the IIS.
  2. Right click  the defaultApp site and create a new website.
  3. Insert the site name and physical path (published folder path).
Add Physical Path
  1. Click Ok .
  2. Now, config the site in ApplicationPool, and you can browse the site.
Permalink

You must update the virtual app path or app base path in index.html to resolve this issue.

That is, the hosted application expects the assets from root folder of the web server. So, you have to update the subfolder name in index.html to serve the files from the path.

For example, if I am hosting an application in http://example.com/blazor/, the index.html looks like the following.

  <base href="/blazor/" />   

For more information, refer to this link for updating app-base-path.

Permalink

Share with

Share on twitter
Share on facebook
Share on linkedin

Couldn't find the FAQs you're looking for?

Please submit your question and answer.