DEV Community

Ali Mahdavi
Ali Mahdavi

Posted on

Deploying Blazor WebAssembly Apps on the Flux Network Using Deploy With Git

Blazor WebAssembly offers a powerful way to build interactive web applications with C# that run directly in the browser. Hosting these apps on a decentralized cloud platform like the Flux Network becomes straightforward with the Deploy With Git feature. This guide walks you through deploying a minimal hosted Blazor WebAssembly "Hello World" application from a Git repository. Flux automatically detects the .NET project, handles dependencies, builds the app, and serves it across its global network of nodes for high availability and resilience.

No Docker knowledge or complex CI/CD pipelines are required. Simply push your code to GitHub, and Flux takes care of the rest.

Understanding the Hosted Blazor WebAssembly Model

This deployment example uses the hosted Blazor WebAssembly model. In this setup:

  • An ASP.NET Core server project hosts and serves the compiled WebAssembly client.
  • The client runs in the user's browser, while the server delivers the necessary static files and handles any backend logic if needed.

The server project is responsible for serving the published WebAssembly assets. Flux identifies .NET projects through the presence of .csproj files.

How Flux Handles Blazor WebAssembly Deployment

Flux streamlines the process for .NET applications:

  1. It scans for .csproj files and reads the TargetFramework (this example targets .NET 8.0 LTS).
  2. It installs the matching .NET SDK.
  3. It runs dotnet restore to fetch dependencies.
  4. It executes dotnet publish -c Release -o ./publish to build both the server and the WebAssembly client.
  5. It starts the application using the specified runtime command.

The ASP.NET Core server automatically binds to 0.0.0.0:$PORT using the ASPNETCORE_URLS environment variable provided by Flux. The published app serves the Blazor WebAssembly files as static content.

Important note: Because the publish output folder contains multiple DLLs, you must explicitly set the RUN_COMMAND environment variable to tell Flux which assembly to execute.

Prerequisites

Before starting, ensure you have:

  • A public GitHub repository (or a private repository with a GitHub personal access token).
  • A FluxCloud account.
  • Basic familiarity with Git and .NET project structures.

Step-by-Step Deployment

1. Prepare and Push Your Project to GitHub

Clone or create your repository and push the Blazor WebAssembly project. Keep the repository public for simplicity, or prepare a personal access token with repository read permissions if using a private repo.

2. Register the Application on FluxCloud

  1. Visit the FluxCloud dashboard at https://cloud.runonflux.com/apps/register and select Deploy with Git.
  2. Log in or create a new FluxCloud account.
  3. Choose your preferred plan and click Start Deploying.
  4. Provide the following details:
    • Repository URL
    • Branch name
    • Path to the project (for example, deploy-blazor-wasm/ if located inside a monorepo)
    • GitHub personal access token (only for private repositories)
  5. Click Continue and fill in the configuration form.
  6. Review all settings and click Register.

Flux will build and deploy the application across multiple nodes. Once complete, your app becomes accessible at:

https://YOUR-APP-NAME.app.runonflux.com

Configuration Settings

Configure these fields carefully during registration.

Basic Information

  • Application Name: Use 3 to 32 characters consisting of lowercase letters, numbers, and hyphens only.
  • Contact Email: Provide an email address for deployment notifications and alerts.

Application Port

Set the Application Port to 8080. This value must match the port your ASP.NET Core server listens on so that Flux can configure the proper port mapping.

Custom Domain (Optional)

You can specify your own domain. After registration, configure your DNS records to point to Flux. Detailed instructions are available in the Flux documentation for custom domain setup.

Advanced Options

  • Auto-Update Polling Interval: Controls how frequently Flux checks the repository for updates. The default is 24 hours. For faster updates, configure GitHub webhooks instead.
  • Enterprise App: Enable this for added security. It encrypts your application specification and environment variables and restricts deployment to verified ArcaneOS nodes.

Environment Variables

Set these variables to ensure correct operation:

Variable Name Description Required Default Value
RUN_COMMAND The command to start the app Yes (none)
PORT Port the server listens on No 8080
DOTNET_VERSION .NET SDK version to use No Detected from csproj (8.0)
BUILD_COMMAND Custom build command No dotnet publish -c Release -o ./publish
WEBHOOK_SECRET Secret for GitHub webhook authentication No (none)

Critical requirement: Set RUN_COMMAND to dotnet deploy-blazor-wasm.dll. This points Flux to the correct entry point after publishing.

Enabling Automatic CI/CD with GitHub Webhooks

For instant deployments on every code push:

  1. After your app is running, copy the webhook URL from the Flux app dashboard (it follows the format https://YOUR-APP-NAME-9001.app.runonflux.io/webhook).
  2. In your GitHub repository, go to Settings > Webhooks > Add webhook.
  3. Configure the webhook as follows:
    • Payload URL: Paste the Flux webhook URL.
    • Content type: Select application/json.
    • Secret: Enter the same value you set for the WEBHOOK_SECRET environment variable in Flux.
    • Events: Choose "Just the push event".
  4. Save the webhook.

From now on, every git push to the selected branch triggers an automatic redeployment (typically within about 2 minutes). If the new build fails, Flux automatically rolls back to the previous working version.

Resources

FluxCloud Dashboard: https://cloud.runonflux.com
Deploy With Git Overview: https://docs.runonflux.com/fluxcloud/register-new-app/deploy-with-git/
Deploying .NET Apps on Flux: https://docs.runonflux.com/fluxcloud/register-new-app/deploy-with-git/guides/deploying-dotnet
GitHub Webhooks Guide: https://docs.runonflux.com/fluxcloud/register-new-app/deploy-with-git/ci-cd/github-webhooks
Flux Network: https://runonflux.com

This approach makes deploying Blazor WebAssembly applications simple, scalable, and decentralized. With just a Git repository, you can have a globally distributed Blazor app running in minutes on the Flux Network. Start experimenting today by forking the example repository and deploying your own version.

Top comments (0)