JavaScript
MongoDB Developer Center
chevron-right
Developer Topics
chevron-right
Languages
chevron-right
JavaScript
chevron-right

MongoDB Realm Web SDK Tutorial

Maxime BeugnetPublished Feb 05, 2022 • Updated May 13, 2022
RealmJavaScript
FULL APPLICATION
facebook icontwitter iconlinkedin icon
random alt
Rate this quickstart
star-empty
star-empty
star-empty
star-empty
star-empty

Introduction

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.

Getting Set Up

For this tutorial, you will need:
  • Load the sample data set
    as we will need some sample documents from the sample_mflix.movies collection.
Import the sample data set menu in MongoDB Atlas
Import the sample data set menu in MongoDB Atlas
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.

Create a Realm Application

Access Realm by clicking the link at the top in your MongoDB Atlas UI, above your cluster.
Access Realm in the MongoDB Atlas UI
Access Realm in the MongoDB Atlas UI
Create a Realm application. If possible, keep it close (same region) to your Atlas Cluster.
Create the Realm Application
Create the Realm Application
Our Realm Web SDK needs to authenticate users to work properly. In this tutorial, we will use the
anonymous authentication
to keep it simple.
Activating the anonymous authentication in the Realm application
Activating the anonymous authentication in the Realm application
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.
Allow read-only access in the collection rules to the sample_mflix.movies collection
Allow read-only access in the collection rules to the sample_mflix.movies collection
Don't forget to click on Configure Collection to validate this choice. You also need to deploy these modifications.
Click review draft & deploy to deploy the modifications we did to our realm application
Click review draft & deploy to deploy the modifications we did to our realm application

Create a Mini Website with the Realm Web SDK

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:
Retrieve the Realm AppID in the Realm UI
Retrieve the Realm AppID in the Realm UI
In my case, my first line looks like this, but please use your own APPID:

Deploy the Website in MongoDB Realm Static Hosting

MongoDB Realm - Hosting website feature in the UI
MongoDB Realm - Hosting website feature in the UI
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.
Result of the upload of the 2 files in the MongoDB Realm UI
Result of the upload of the 2 files in the MongoDB Realm UI
Don't forget to review and deploy your modification!
Click review draft & deploy to deploy the modifications we did to our realm application
Click review draft & deploy to deploy the modifications we did to our realm application
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.
Link to the hosted website and DNS warning message
Link to the hosted website and DNS warning message
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:
The website with 2 buttons "login" and "find 20 movies".
The website with 2 buttons "login" and "find 20 movies".
Click on LOGIN. You are now authenticated with an anonymous user.
The website now displays the user ID.
The website now displays the user ID.
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.
The same user ID in the Realm UI.
The same user ID in the Realm UI.
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.
The website now displays 20 movies titles
The website now displays 20 movies titles

Wrapping Up

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.
MongoDB Realm provides a
number of SDKs
that can also be useful for your project:
If you have any question, please reach out on the
MongoDB Community Forum in the Realm SDKs category
.

Copy Link
facebook icontwitter iconlinkedin icon
Rate this quickstart
star-empty
star-empty
star-empty
star-empty
star-empty
Related
Code Example
Connect to a MongoDB Database Using Node.js

May 24, 2022
Tutorial
Application Deployment in Kubernetes with the MongoDB Atlas Operator

Aug 16, 2022
Article
Using AWS Rekognition to Analyse and Tag Uploaded Images

May 12, 2022
Article
Currency Analysis with Time Series Collections #3 — MACD and RSI Calculation

May 16, 2022
Table of Contents