The quickest way of deploying a Blazor Web Assembly app to AWS Amplify

Fiqri Ismail — Tue, 30 Jan 2024 15:19:54 +0000

Microsoft Blazor is a web frontend framework built on top of dotNET. It's total solution to build fullstack web applications using C#. You don't need a single line of JavaScript to build a total solution using Blazor.

In this tutorial I will be going through step by step on how to create a Blazor Web Assembly project using Visual Studio 2022 with dotNET 8 and finally deploy to AWS Amplify as a frontend.

Getting things ready

You need an AWS account
Visual Studio 2022 installed with latest updates (Community Edition, all that you need)

Creating the Blazor App

First you need to create a Blazor Web Assembly Standalone App. Here we go with the steps.

Launch Visual Studio 2022 and select Create a new project from the dialog box.

Now from the list select Blazor Web Assembly Standalone App" from the list and click **Next.

Now give it a project name (ex: BlazorWasmAmplified) and select a folder to save and then click Next.

Select .NET 8.0 (Long Term Support) as the framework from the drop down. Leave the defaults and click Create.

Now you should have a Blazor Project. Press F5 to execute the application. If you see this screen. You have a working Blazor App.

Creating a frontend app in AWS Amplify

For this we will be using the Amplify Studio. Follow these steps to create the Amplify App.

Login the AWS Console.
Select your region.
Under Services Select AWS Amplify. You should see the getting started screen.

Scroll down and under Getting Started section click the Get Started button under Amplify Studio.

Now give an application name (ex: BlazorAmplified ) and click Confirm deployment.

This will take a few minutes until the frontend is provisioned. After that you will be presented with a screen with two tabs.

Hosting environments (which will be your frontend deployed)
Backend environments (for your backend)

Publish and Deploy

Open the terminal and go inside the project root folder. You must be inside where the csproj file is available.
Now type the following command to compile the release.



dotnet publish -c Release -o release

This will create a release of your Blazor application. Now type the following command to open the File Explorer in the current folder.



explorer.exe .

Now double click on the release folder and then wwwroot folder.
Select all files and click right mouse button and select Compress to ZIP file.

Give a proper name to your zip file (ex: blazorapp).
Now go back to AWS Amplify Studio. And click on the Hosting environments and select Deploy without Git provider.

Click Connect branch button.
Select Drag drop in the screen and type a name for your environment (ex: staging).
Now drag and drop the zip file you created.
Click Save and deploy button.

After a successful deployment, you should see this screen with a link to click for your frontend.

Finally under Domain click the link to see the Blazor App up and running.

You are done and Happy Coding 🙌🍸

DEV Community: Fiqri Ismail

The quickest way of deploying a Blazor Web Assembly app to AWS Amplify

Getting things ready

Creating the Blazor App

Creating a frontend app in AWS Amplify

Publish and Deploy