MongoDB Realm Web SDK Tutorial
Rate this quickstart
In this tutorial blog post, you will learn how to retrieve data from a MongoDB Atlas cluster using the
MongoDB Realm Web SDK
and display it in a very basic website hosted in MongoDB Realm Static Hosting
.But wait... If we query our MongoDB cluster directly from the front-end code, isn't that super unsafe?
Usually, applications are designed using the
3-tier architecture
with a back end that can act as a gatekeeper for the database. This ensures that the queries are authenticated correctly and that appropriate business rules are applied. Also, it avoids sharing your database connection string (with the username and password...) publicly in the front-end code, which is kind of a good idea if you don't want to share your entire database publicly.No worries! MongoDB Realm is here to save the day! The web SDK actually uses a Realm Application as a serverless back end to solve all the problems I just mentioned.
So in this tutorial, we will build a minimalistic website that will be able to retrieve movie titles from your MongoDB Atlas database and display them in the browser. For this, we will:
- Create a basic Realm Application to handle the anonymous authentication and set the access rules for our movies collection.
- Create the website with just one HTML file and one JavaScript file.
For this tutorial, you will need:
- Load the sample data setas we will need some sample documents from the
sample_mflix.movies
collection.

We will also use
jQuery
(to keep things as simple as possible) and the Realm Web SDK
but it's just a couple of imports in the JavaScript code. You don't need anything else.Access Realm by clicking the link at the top in your MongoDB Atlas UI, above your cluster.

Create a Realm application. If possible, keep it close (same region) to your Atlas Cluster.

Our Realm Web SDK needs to authenticate users to work properly. In this tutorial, we will use the
anonymous authentication
to keep it simple.
We need to tell our Realm application what our authenticated users can do with each collection. In this case, we want them to access the
sample_mflix.movies
collection for reads only.
Don't forget to click on
Configure Collection
to validate this choice. You also need to deploy these modifications.
Now that our Realm application is ready, we can create a mini website to retrieve 20 movie titles from our
sample_mflix.movies
collection in MongoDB Atlas and display them in our website.Create a new folder and a new file
index.html
.In the same folder, create a file
data.js
.The first line of
data.js
needs your Realm APPID. You can find it here:
In my case, my first line looks like this, but please use your own APPID:

Upload your two files
index.html
and data.js
using the UPLOAD FILES
button. Realm will tell you that you are overwriting ./index.html
. This is the expected result.
Don't forget to review and deploy your modification!

At this point, you should be able to access your website with the provided link, but the DNS can take up to 15 minutes to propagate.

Try to open the provided link and if that doesn't work yet, feel free to open your local index.html file in your preferred web browser. You should see something like this:

Click on
LOGIN
. You are now authenticated with an anonymous user.
You can find this user in your Realm application in the
App Users
menu in MongoDB Realm. Of course, you could use a better authentication provider
to secure your application correctly.
If you click on the
FIND 20 MOVIES
button, you should now see a bunch of movie titles that come from your MongoDB Atlas sample collection.
In this tutorial, you learned how to set up your first website using MongoDB Realm Web SDK. We used jQuery for this simple example, but any recent and popular JavaScript front-end technology like React, Angular, or Vue.js would also work.
- Web SDK<== We are here
If you have any question, please reach out on the
MongoDB Community Forum in the Realm SDKs category
.