The quickest way of deploying a Blazor Web Assembly app to AWS Amplify
Tags: blazor, dotnet8, awsamplify, webdev
Published: 2024-01-30 15:19:54

[Microsoft Blazor](https://blazor.net) 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](https://visualstudio.microsoft.com/) with [dotNET 8](https://dotnet.microsoft.com/en-us/) and finally deploy to [AWS Amplify](https://aws.amazon.com/amplify/) as a frontend. 

## Getting things ready

1. [You need an AWS account](https://aws.amazon.com/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20Categories=*all)
2. [Visual Studio 2022 installed with latest updates](https://visualstudio.microsoft.com/) (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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ml4k5y2yr1grxi7rrrex.png)

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

![VS 2022 Project Type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5l3odsfqfyigpa30pzj.png)

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

![VS 2022 Project Name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rji8yccvijqof5g4p7pl.png)

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

![VS 2022 dotNet 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3vy5pmyjf6ulugf4rkr.png)
 
- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5f4ifbw4hvryjykq1j0.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bo5frbuab67u4dmkwi8f.png)

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

![AWS Amplify Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k565zuf4i01tm22h2tu2.png)

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

![AWS Amplify Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdud968nrxli7paoo82h.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yc6cmilfpen60a5tifpd.png)

## 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**.

![Windows Explorer Zip File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7u56iky0dbah73it2j5.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4e1aw8k7tuaa1cyqn22d.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3myb08vaxhndkqmlhmgy.png)

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

![AWS Amplify Deployment Done](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qc6dz4qbhnxzryz2pnb3.png)

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

![Edge Running App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxe2bk1rk1bh82ryxeym.png)

You are done and Happy Coding 🙌🍸