Explore Developer Center's New Chatbot! MongoDB AI Chatbot can be accessed at the top of your navigation to answer all your MongoDB questions.

MongoDB Developer
C#
plus
Sign in to follow topics
MongoDB Developer Centerchevron-right
Developer Topicschevron-right
Languageschevron-right
C#chevron-right

Building a Crypto News Website in C# Using the Microsoft Azure App Service and MongoDB Atlas

Dominic Frei9 min read • Published Apr 17, 2023 • Updated Jun 13, 2023
.NETAzureMongoDBC#
FULL APPLICATION
Facebook Icontwitter iconlinkedin icon
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
Who said creating a website has to be hard?
Writing the code, persisting news, hosting the website. A decade ago, this might have been a lot of work. These days, thanks to Microsoft Blazor, Microsoft Azure App Service, and MongoDB Atlas, you can get started in minutes. And finish it equally fast!
In this tutorial, I will walk you through:
  • Setting up a new Blazor project.
  • Creating a new page with a simple UI.
  • Creating data in MongoDB Atlas.
  • Showing those news on the website.
  • Making the website available by using Azure App Service to host it.
All you need is this tutorial and the following pre-requisites, but if you prefer to just read along for now, check out the GitHub repository for this tutorial where you can find the code and the tutorial.

Pre-requisites for this tutorial

Before we get started, here is a list of everything you need while working through the tutorial. I recommend getting everything set up first so that you can seamlessly follow along.
  • Download and install the .NET framework. For this tutorial, I am using .NET 7.0.102 for Windows, but any .NET 6.0 or higher should do.
  • Download and install Visual Studio. I am using the 2022 Community edition, version 17.4.4, but any 2019 or 2022 edition will be okay. Make sure to install the Azure development workload as we will be deploying with this later. If you already have an installed version of Visual Studio, go into the Installer and click modify to find it.

Creating a new Microsoft Blazor project that will contain our crypto news website

Now that the pre-requisites are out of the way, let's start by creating a new project.
Visual Studio Get started screen
I have recently discovered Microsoft Blazor and I absolutely love it. Such an easy way to create websites quickly and easily. And you don't even have to write any JavaScript or PHP! Let's use it for this tutorial, as well. Search for Blazor Server App and click Next.
Project template list in Visual Studio
Choose a Project name and Location of you liking. I like to have the solution and project in the same directory but you don't have to.
Project Configuration screen in Visual Studio
Choose your currently installed .NET framework (as described in Pre-requisites) and leave the rest on default.
Hit Create and you are good to go!
Additional information for the project

Adding the MongoDB driver to the project to connect to the database

Before we start getting into the code, we need to add one NuGet package to the project: the MongoDB driver. The driver is a library that lets you easily access your MongoDB Atlas cluster and work with your database. Click on Project -> Manage NuGet Packages... and search for MongoDB.Driver.
File Menu in Visual Studio
During that process, you might have to install additional components, like the ones shown in the following screenshot. Confirm this installation as we will need some of those, as well.
Preview of the packages that are about to be installed.
Another message you come across might be the following license agreements, which you need to accept to be able to work with those libraries.
Licenses for the libraries that are about to be installed.

Creating a new MongoDB Atlas cluster and database to host our crypto news

Now that we've installed the driver, let's go ahead and create a cluster and database to connect to.
When you register a new account, you will be presented with the selection of a cloud database to deploy. Open the Advanced Configuration Options. For this tutorial, we only need the forever-free shared tier. Since the website will later be deployed to Azure, we also want the Atlas cluster deployed in Azure. And we also want both to reside in the same region. This way, we decrease the chance of having an additional latency as much as possible.
Here, you can choose any region. Just make sure to chose the same one later on when deploying the website to Azure. The remaining options can be left on their defaults.
Cluster chooser for MongoDB Atlas Advanced options for creating a MongoDB Atlas cluster
The final step of creating a new cluster is to think about security measures by going through the Security Quickstart.
Security Quickstart for the MongoDB Atlas cluster creation
Choose a Username and Password for the database user that will access this cluster during the tutorial. For the Access List, we need add 0.0.0.0/0 since we do not know the IP address of our Azure deployment yet. This is okay for development purposes and testing, but in production, you should restrict the access to the specific IPs accessing Atlas.
Atlas also supports the use of network peering and private connections using the major cloud providers. This includes Azure Private Link or Azure Virtual Private Connection (VPC), if you are using an M10 or above cluster.
Now hit Finish and Close.
Creating a new shared cluster happens very, very fast and you should be able to start within minutes. As soon as the cluster is created, you'll see it in your list of Database Deployments.
Let's add some sample data for our website! Click on Browse Collections now.
Atlas Data Services Overview
If you've never worked with Atlas before, here are some vocabularies to get your started:
  • A cluster consists of multiple nodes (for redundancy).
  • A cluster can contain multiple databases (which are replicated onto all nodes).
  • Each database can contain many collections, which are similar to tables in a relational database.
  • Each collection can then contain many documents. Think rows, just better!
  • Documents are super-flexible because each document can have its own set of properties. They are easy to read and super flexible to work with JSON-like structures that contain our data.

Creating some test data in Atlas

Since there is no data yet, you will see an empty list of databases and collections. Click on Add My Own Data to add the first entry.
Collections overview for your Atlas cluster
The database name and collection name can be anything, but to be in line with the code we'll see later, call them crypto-news-website and news respectively, and hit Create.
Create Database pop-up
This should lead to a new entry that looks like this:
Newly created database and collection.
Next, click on INSERT DOCUMENT.
There are a couple things going on here. The _id has already been created automatically. Each document contains one of those and they are of type ObjectId. It uniquely identifies the document.
By hovering over the line count on the left, you'll get a pop-op to add more fields. Add one called title and set its value to whatever you like. The screenshot shows an example you can use. Choose String as the type on the right. Next, add a date and choose Date as the type on the right.
Inserting a new document into the collection.
Repeat the above process a couple times to get as much example data in there as you like. You may also just continue with one entry, though, if you like, and fill up your news when you are done.

Creating a connection string to access your MongoDB Atlas cluster

The final step within MongoDB Atlas is to actually create access to this database so that the MongoDB driver we installed into the project can connect to it. This is done by using a connection string. A connection string is a URI that contains username, password, and the host address of the database you want to connect to.
Click on Databases on the left to get back to the cluster overview.
This time, hit the Connect button and then Connect Your Application. If you haven't done so already, choose a username and password for the database user accessing this cluster during the tutorial. Also, add 0.0.0.0/0 as the IP address so that the Azure deployment can access the cluster later on.
Copy the connection string that is shown in the pop-up.
Retrieving the connection string for the cluster.

Creating a new Blazor page

If you have never used Blazor before, just hit the Run button and have a look at the template that has been generated. It's a great start, and we will be reusing some parts of it later on.
Let's add our own page first, though. In your Solution Explorer, you'll see a Pages folder. Right-click it and add a Razor Component. Those are files that combine the HTML of your page with C# code.
Context menu for creating a new Razor Component Choosing a type and name for the new component.
Now, replace the content of the file with the following code. Explanations can be read inline in the code comments.
1@* The `page` attribute defines how this page can be opened. *@
2@page "/news"
3
4@* The `MongoDB` driver will be used to connect to your Atlas cluster. *@
5@using MongoDB.Driver
6@* `BSON` is a file format similar to JSON. MongoDB Atlas documents are BSON documents. *@
7@using MongoDB.Bson
8@* You need to add the `Data` folder as well. This is where the `News` class resides. *@
9@using CryptoNewsApp.Data
10@using Microsoft.AspNetCore.Builder
11
12@* The page title is what your browser tab will be called. *@
13<PageTitle>News</PageTitle>
14
15@* Let's add a header to the page. *@
16<h1>News</h1>
17
18@* And then some data. *@
19@* This is just a simple table contains news and their date. *@
20@if (_news != null)
21{
22 <table class="table">
23 <thead>
24 <tr>
25 <th>News</th>
26 <th>Date</th>
27 </tr>
28 </thead>
29 <tbody>
30 @* Blazor takes this data from the `_news` field that we will fill later on. *@
31 @foreach (var newsEntry in _news)
32 {
33 <tr>
34 <td>@newsEntry.Title</td>
35 <td>@newsEntry.Date</td>
36 </tr>
37 }
38 </tbody>
39 </table>
40}
41
42@* This part defines the code that will be run when the page is loaded. It's basically *@
43@* what would usually be PHP in a non-Blazor environment. *@
44@code {
45
46 // The `_news` field will hold all our news. We will have a look at the `News`
47 // class in just a moment.
48 private List<News>? _news;
49
50 // `OnInitializedAsync()` gets called when the website is loaded. Our data
51 // retrieval logic has to be placed here.
52 protected override async Task OnInitializedAsync()
53 {
54 // First, we need to create a `MongoClient` which is what we use to
55 // connect to our cluster.
56 // The only argument we need to pass on is the connection string you
57 // retrieved from Atlas. Make sure to replace the password placeholder with your password.
58 var mongoClient = new MongoClient("YOUR_CONNECTION_STRING");
59 // Using the `mongoCLient` we can now access the database.
60 var cryptoNewsDatabase = mongoClient.GetDatabase("crypto-news-database");
61 // Having a handle to the database we can furthermore get the collection data.
62 // Note that this is a generic function that takes `News` as it's parameter
63 // to define who the documents in this collection look like.
64 var newsCollection = cryptoNewsDatabase.GetCollection<News>("news");
65 // Having access to the collection, we issue a `Find` call to find all documents.
66 // A `Find` takes a filter as an argument. This filter is written as a `BsonDocument`.
67 // Remember, `BSON` is really just a (binary) JSON.
68 // Since we don't want to filter anything and get all the news, we pass along an
69 // empty / new `BsonDocument`. The result is then transformed into a list with `ToListAsync()`.
70 _news = await newsCollection.Find(new BsonDocument()).Limit(10).ToListAsync();
71 // And that's it! It's as easy as that using the driver to access the data
72 // in your MongoDB Atlas cluster.
73 }
74
75}
Above, you'll notice the News class, which still needs to be created. In the Data folder, add a new C# class, call it News, and use the following code.
1using MongoDB.Bson;
2using MongoDB.Bson.Serialization.Attributes;
3
4namespace CryptoNewsApp.Data
5{
6 public class News
7 {
8 // The attribute `BsonId` signals the MongoDB driver that this field
9 // should used to map the `_id` from the Atlas document.
10 // Remember to use the type `ObjectId` here as well.
11 [BsonId] public ObjectId Id { get; set; }
12
13 // The two other fields in each news are `title` and `date`.
14 // Since the C# coding style differs from the Atlas naming style, we have to map them.
15 // Thankfully there is another handy attribute to achieve this: `BsonElement`.
16 // It takes the document field's name and maps it to the classes field name.
17 [BsonElement("title")] public String Title { get; set; }
18 [BsonElement("date")] public DateTime Date { get; set; }
19 }
20}
Now it's time to look at the result. Hit Run again.
The website should open automatically. Just add /news to the URL to see your new News page.
Local Website showing news
If you want to learn more about how to add the news page to the menu on the left, you can have a look at more of my Blazor-specific tutorials.

Deploying the website to Azure App Service

So far, so good. Everything is running locally. Now to the fun part: going live!
Visual Studio makes this super easy. Just click onto your project and choose Publish....
Context menu to publish the app
The Target is Azure, and the Specific target is Azure App Service (Windows).
Choosing a publishing target Choosing a specific target
When you registered for Azure earlier, a free subscription should have already been created and chosen here. By clicking on Create new on the right, you can now create a new App Service.
Creating a new App Service
The default settings are all totally fine. You can, however, choose a different region here if you want to. Finally, click Create and then Finish.
App Service settings Final overview before publishing the new app
When ready, the following pop-up should appear. By clicking Publish, you can start the actual publishing process. It eventually shows the result of the publish.
Publishing summary Publishing result
The above summary will also show you the URL that was created for the deployment. My example: https://cryptonewsapp20230124021236.azurewebsites.net/
Again, add /news to it to get to the News page.
News website deployed on Azure App Service

What's next?

Go ahead and add some more data. Add more fields or style the website a bit more than this default table.
The combination of using Microsoft Azure and MongoDB Atlas makes it super easy and fast to create websites like this one. But it is only the start. You can learn more about Azure on the Learn platform and about Atlas on the MongoDB University.
And if you have any questions, please reach out to us at the MongoDB Forums or tweet @dominicfrei.

Facebook Icontwitter iconlinkedin icon
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
Related
Tutorial

Sending and Requesting Data from MongoDB in a Unity Game


Sep 09, 2024 | 8 min read
Tutorial

MongoDB Geospatial Queries in C#


May 12, 2022 | 11 min read
Article

The C# Driver Version 3.0 is Here! What Do You Need to Know?


Nov 04, 2024 | 5 min read
Tutorial

Integrating MongoDB with TensorFlow and C#


Sep 05, 2024 | 8 min read
Table of Contents