MongoDB Realm - React Quickstart
This guide shows you how to set up a basic React web application that connects to your MongoDB Realm app and authenticates an anonymous user.
We put together a finished version of this quickstart on CodeSandbox. All you have to do is paste in your Realm App ID to connect to your app.
Prerequisites
- This guide assumes that you have already created a MongoDB Realm application and enabled anonymous authentication.
- To create and run this application you will need npm installed on your machine.
- The create-react-app
documentation recommends that you install npx to run
create-react-app
rather than using a version that's installed on your machine.
Procedure
Set up a New React App
Generate a new application template using create-react-app:
Navigate into the new app and install the realm-web
package:
cd realm-web-react-quickstart npm install --save realm-web
Import Dependencies & Connect to Your Realm App
The Realm Web SDK contains everything you need to connect to a MongoDB Realm
application from a browser application. In /src/App.js
, add the following
code to import the Web SDK.
import * as Realm from "realm-web";
Now uses the imported package to instantiate a new Realm.App
.
The app
object represents your Realm app. You'll use it to authenticate
and manage the users that interact with your app.
// Add your App ID const app = new Realm.App({ id: APP_ID });
Run the App
You're now ready to connect to your Realm app and log in! Make sure you've
saved your changes to /src/App.js
and then run the following command from
the project root:
yarn start
This starts a local web server that serves your application. If successful, you should see the following output in your shell:
Compiled successfully! You can now view realm-quickstart-web in the browser. Local: http://localhost:3000
Open http://localhost:3000 in your browser and test that you can successfully log in as an anonymous user.
Summary
If you have successfully completed this guide, you have created a React application that can connect to a MongoDB Realm app and authenticates an anonymous user.