Realm Web SDK Tutorial

Maxime BeugnetPublished Feb 05, 2022 • Updated Sep 23, 2022

Realm JavaScript

FULL APPLICATION

Rate this quickstart

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:

A free tier Atlas M0 cluster (or higher).
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

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

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

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

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.

const APP_ID = '<YOUR-REALM-APPID>';
const ATLAS_SERVICE = 'mongodb-atlas';
const app = new Realm.App({id: APP_ID});

// Function executed by the LOGIN button.
const login = async () => {
    const credentials = Realm.Credentials.anonymous();
    try {
        const user = await app.logIn(credentials);
        $('#user').empty().append("User ID: " + user.id); // update the user div with the user ID
    } catch (err) {
        console.error("Failed to log in", err);
    }
};

// Function executed by the "FIND 20 MOVIES" button.
const find_movies = async () => {
    let collMovies;
    try {
        // Access the movies collection through MDB Realm & the readonly rule.
        const mongodb = app.currentUser.mongoClient(ATLAS_SERVICE);
        collMovies = mongodb.db("sample_mflix").collection("movies");
    } catch (err) {
        $("#user").append("Need to login first.");
        console.error("Need to log in first", err);
        return;
    }

// Retrieve 20 movie titles (only the titles thanks to the projection).
    const movies_titles = await collMovies.find({}, {
        "projection": {
            "_id": 0,
            "title": 1
        },
        "limit": 20
    });

// Access the movies div and clear it.
    let movies_div = $("#movies");
    movies_div.empty();

// Loop through the 20 movie title and display them in the movies div.
    for (const movie of movies_titles) {
        let p = document.createElement("p");
        p.append(movie.title);
        movies_div.append(p);
    }
};

The first line of data.js needs your App ID. You can find it here:

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 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

Don't forget to review and deploy your modification!

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

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".

Click on LOGIN. You are now authenticated with an anonymous user.

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.

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

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.

Rate this quickstart

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