JavaScript
MongoDB Developer Centerchevron-right
Developer Topicschevron-right
Languageschevron-right
JavaScriptchevron-right

Realm Web SDK Tutorial

Maxime BeugnetPublished Feb 05, 2022 • Updated Sep 23, 2022
RealmJavaScript
FULL APPLICATION
Copy Link
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 Realm Web SDK and display it in a very basic website hosted in Atlas App Services Static Hosting.
But wait... If we query our MongoDB Atlas 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! Atlas App Services is here to save the day! The Web SDK actually uses a separate layer 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 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 an Atlas App Services 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 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 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 App ID. You can find it here:
Retrieve the 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 Atlas App Services Static Hosting

MongoDB Atlas App Services - 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. App Services 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 application in the App Users menu in Atlas. 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 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.
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
EnSat

Jul 07, 2022
Article
MongoDB & Mongoose: Compatibility and Comparison

Sep 23, 2022
Tutorial
Creating a User Profile Store for a Game With Node.js and MongoDB

Sep 23, 2022
Tutorial
Tutorial: Build a Movie Search Application Using Atlas Search

May 31, 2022
Table of Contents