Realm Web SDK Tutorial
Maxime BeugnetPublished Feb 05, 2022 • Updated Jan 26, 2023
Rate this quickstart
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.
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
Access Realm by clicking the link at the top in your MongoDB Atlas UI, above your cluster.
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.moviescollection for reads only.
Don't forget to click on
Configure Collectionto validate this choice. You also need to deploy these modifications.
Now that our application is ready, we can create a mini website to retrieve 20 movie titles from our
sample_mflix.moviescollection in MongoDB Atlas and display them in our website.
Create a new folder and a new file
In the same folder, create a file
The first line of
data.jsneeds your App ID. You can find it here:
In my case, my first line looks like this, but please use your own APPID:
Upload your two files
UPLOAD FILESbutton. App Services 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:
LOGIN. You are now authenticated with an anonymous user.
You can find this user in your application in the
App Usersmenu in Atlas. Of course, you could use a better authentication provider to secure your application correctly.
If you click on the
FIND 20 MOVIESbutton, you should now see a bunch of movie titles that come from your MongoDB Atlas sample collection.
Realm provides a number of SDKs that can also be useful for your project:
- Web SDK <== We are here
If you have any question, please reach out on the MongoDB Community Forum in the Realm SDKs category.
Currency Analysis with Time Series Collections #2 — Simple Moving Average and Exponential Moving Average Calculation
May 16, 2022