Part 1: Getting started with Blazor Server Web App Development using .NET 8

You are reading an article that is part of the article series. In this article series, I'm going to show you how to develop Microsoft Blazor server web application in .NET 8. In the part 1 I will provide quick roadmap, tech stack we are going to use and will get all the prerequisites ready to dive into the code.

If you are reading this article, I assume you are already aware about ASP.NET Core Blazor but if not, you can read a brief introductory article that I posted earlier here. Please follow along with me if you also want to learn building awesome web application using latest .NET 8 and related tech stack.

Articles in this series:

• Part 1: Getting started with Blazor Server Web App Development using .NET 8

• Part 2: How to implement Microsoft Entra ID Authentication in Blazor Server Web App in .NET 8

• Part 3: How to implement Multilanguage UI in Blazor Server Web App in .NET 8

• Part 4: How to use Entity framework Core with MongoDb in .NET 8

• Part 5: How to show Dashboard with Radzen Bar and Pie Chart controls in in Blazor Server Web App

• Part 6: How to support Authorization in blazor server web app when using Microsoft Entra ID authentication

• Part 7: How to implement Radzen Grid Control with dynamic paging, filtering, shorting in in Blazor Server Web App

• Part 8: How to implement Data Entry form in blazor server web app

• Part 9: How to use SignalR to show real time updates in blazor server web app

The Tech Stack:

I'm going to develop a fully working web app (not just a crud operation) that will use below tech stack:

• Database: MongoDb, a popular NoSQL database (Setup instructions below)

• Back-end: .NET 8, ASP.NET Core

• Front-end: C#, Blazor Server (Side Interactive Rendering), radzen components.

Before we start

In order to follow along with this articles, you will need:

• .NET 8 SDK and .NET 8 Runtime installation

• If you are planning to use Visual Studio 2022, make sure you have all latest updates installed (v17.8.2)

• Install MongoDb Community Server, MongoDb Compass, and Mongodb version of Northwind database (Covered in this blog)

• You may need Microsoft Azure (trial will also work) to setup Entra ID App in Azure and configure it to use

If you are fan of command line tools or want to know more about the tooling, see ASP.NET Core Blazor Tooling

How to setup MongoDB for development on windows

If you are not familiar with setting up MongoDB for development on windows, here is a quick walkthrough of what you will need:

• Go to MongoDB download center and download MongoDB Community Server MSI package and install.

• Next you will need MongoDB compass MSI and install it. You will need this tool to connect with your MongoDB Community Server and do the database administration related activities. If you are familiar with Microsoft SQL Server world, MongoDB compass is like SQL Server Management Studio of MongoDB world.

• Next, download MongoDB Command line Database Tool which we will need to import an existing sample database.

• We will be using a sample existing database called Northwind that I've downloaded from here

Import Northwind Mongodb Database

• Open MongoDB Compass and connect to localhost:27017 which is a default port when you install MongoDB Server on windows.

• Click on the databasese in the left navigation and create a new database with name northwind and collection sample.

• Go to github repository here in your browser, click on code in the top right and then download zip menu to download the zip file.

• Extract MongoDB command line database tools zip file

• Open mongo-import.sh inside the root folder and change the mongoimport keyword with the actual full path of mongoimport.exe that is part of MongoDb command line database tools zip file. The resulting line will look like below:
  "C:\temp\import\mongodb-database-tools\bin\mongoimport" -d "$1" -c "$collection" --type json --file "$file"

• Open command prompt and go to root folder where you have mongo-import.sh file and run command ./mongo-import.sh northwind

• If everything is done correctly, you will see console message that displays the json file name and the number of documents imported.

• If you switch back to MongoDB Compass, select northwind database and click on the refresh at the top right corner of the sidebar, you will see collections like customers, employees etc.

We are going to use this sample database to build something interesting that makes sense and has a real-life use cases instead of just a sample table with a few fields.

Conclusion

In this article, we covered the roadmap of the blazor web app development series, the preparation by installing all the needed tools and got our Northwind sample MongoDB database which actually has lots of sample data to try some interesting things with it.