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 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.
For this tutorial, you will need:
- Load the sample data set as we will need some sample documents from the
sample_mflix.moviescollection.
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 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.
Don't forget to click on
Configure Collection to 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.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:
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. 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:
Click on
LOGIN. You are now authenticated with an anonymous user.
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.
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 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.