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 🙌🍸
Top comments (0)