Deploying a C# .Net Blazor WebAssembly app to Dfinity Internet Computer

This guide will walk you through all the steps that are needed to deploy a Blazor WebAssembly app to the Internet Computer.

Prerequisites

You have installed the Dfinity Internet Computer SDK
For Windows, use Ubuntu 20 with the Windows Subsystem for Linux
You have some Cycles to run your project in the cloud. You can get free cycles from the faucet at https://faucet.dfinity.org/
You know how to create a new Blazor project

Steps

Create a new Blazor WebAssembly project using Visual Studio.
This creates a new blank project. You can of course also use an existing project.
Create dfx.json In dfx.json you define which canisters you need. More info about this file can be found here: https://sdk.dfinity.org/docs/developers-guide/customize-projects.html In this case, we only want to deploy the frontend assets to a canisters. The dfx.json file looks like this:

	{
	  "version": 1,
	  "dfx": "0.8.1",
	  "canisters": {
	    "blazor_assets": {
	      "type": "assets",
	      "source": [
	        "publish/MyProject.Blazor/wwwroot"
	      ]
	    }
	  },
	  "defaults": {
	    "build": {
	      "packtool": "",
	      "args": ""
	    }
	  },
	  "networks": {
	    "local": {
	      "bind": "127.0.0.1:8000",
	      "type": "ephemeral"
	    }
	  }
	}

We have defined the source path of our assets as publish/MyProject.Blazor/wwwroot. Make sure you modify this path or let the Blazor publish task publish to this location.
Run dfx start --background To start the local dfx hosting project to run in the background.
Run dfx deploy This creates the canisters and deploys the files to your local instance.
Test your local deploy using the url: http://localhost:8000/?canisterId=[YOUR_CANISTER_ID]
You can find your canisterId in the output of dfx deploy. Look for the asset canister.
Is everything working locally? Now deploy to the decentralized Internet Computer!
Run dfx deploy --network ic
Your Blazor WebAssembly app is now running in the cloud. Access it by going to https://MAINNET_CANISTER_ID.ic0.app/
Note: your canisterId on the mainnet will be different than the local canisterId!

Read more about my experience with hosting SkyDocs on the Internet Computer https://www.michielpost.nl/posts/hosting-skydocs-on-dfinity-internet-computer

Prerequisites

Steps

More