Building a Crypto News Website in C# Using the Microsoft Azure App Service and MongoDB Atlas
Rate this tutorial
Who said creating a website has to be hard?
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.
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.
- . 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 developmentworkload as we will be deploying with this later. If you already have an installed version of Visual Studio, go into the Installer and click
modifyto find it.
Now that the pre-requisites are out of the way, let's start by creating a new project.
Locationof you liking. I like to have the solution and project in the same directory but you don't have to.
Choose your currently installed .NET framework (as described in
Pre-requisites) and leave the rest on default.
Createand you are good to go!
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.
Another message you come across might be the following license agreements, which you need to accept to be able to work with those libraries.
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.
The final step of creating a new cluster is to think about security measures by going through the
Passwordfor the database user that will access this cluster during the tutorial. For the
Access List, we need add
0.0.0.0/0since 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.
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
Let's add some sample data for our website! Click on
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!
Since there is no data yet, you will see an empty list of databases and collections. Click on
Add My Own Datato add the first entry.
The database name and collection name can be anything, but to be in line with the code we'll see later, call them
newsrespectively, and hit
This should lead to a new entry that looks like this:
Next, click on
There are a couple things going on here. The
_idhas 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
titleand set its value to whatever you like. The screenshot shows an example you can use. Choose
Stringas the type on the right. Next, add a
Dateas the type on the right.
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.
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 . A connection string is a URI that contains username, password, and the host address of the database you want to connect to.
Databaseson the left to get back to the cluster overview.
This time, hit the
Connectbutton 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/0as the IP address so that the Azure deployment can access the cluster later on.
If you have never used Blazor before, just hit the
Runbutton 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
Pagesfolder. Right-click it and add a
Razor Component. Those are files that combine the HTML of your page with C# code.
Now, replace the content of the file with the following code. Explanations can be read inline in the code comments.
Above, you'll notice the
Newsclass, which still needs to be created. In the
Datafolder, add a new C# class, call it
News, and use the following code.
Now it's time to look at the result. Hit
The website should open automatically. Just add
/newsto the URL to see your new News page.
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
Azure, and the
Azure App Service (Windows).
When you registered for Azure earlier, a free subscription should have already been created and chosen here. By clicking on
Create newon the right, you can now create 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
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.
/newsto it to get to the News page.
Go ahead and add some more data. Add more fields or style the website a bit more than this default table.