DEV Community

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

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

  1. You need an AWS account
  2. 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.

VS 2022 New Project

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

VS 2022 Project Type

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

VS 2022 Project Name

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

VS 2022 dotNet 8

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

Edge Browser Blazor App Running

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.

AWS Console Amplify

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

AWS Amplify Studio

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

AWS Amplify Studio

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

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

Envoirnments Screen

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
Enter fullscreen mode Exit fullscreen mode
  • 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 .
Enter fullscreen mode Exit fullscreen mode
  • 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.

Windows Explorer 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.

AWS Amplify Deploy

  • 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.

AWS Amplify Deploy

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

AWS Amplify Deployment Done

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

Edge Running App

You are done and Happy Coding 🙌🍸

Top comments (0)