Realm Web SDK Tutorial
Rate this quickstart
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 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:
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.
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.
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.
Let’s Give Your Realm-Powered Ionic Web App the Native Treatment on iOS and Android!
Sep 16, 2022