forked from mongodb/docs-realm
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathweb.txt
205 lines (144 loc) · 6.64 KB
/
web.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
:template: product-landing
:hidefeedback: header
:noprevnext:
.. _web-intro:
=============
Realm Web SDK
=============
.. toctree::
:titlesonly:
Install the Realm Web SDK </web/install>
Quick Start </web/quickstart>
Quick Start with React </web/react-web-quickstart>
Atlas App Services </web/atlas-app-services>
User Management </web/users>
Query MongoDB </web/mongodb>
Apollo GraphQL Client (React) </web/graphql-apollo-react>
API Reference </web/api-reference>
Upgrade from Stitch to Realm </web/migrate>
Release Notes <https://github.com/realm/realm-js/releases>
Next.js Integration Guide </web/nextjs>
The Realm Web SDK lets browser-based applications access
data stored in Atlas and interact with App Services services like
Functions and authentication. The Web SDK supports both JavaScript and
TypeScript.
Web apps built with Realm use the :ref:`Atlas GraphQL API <graphql-api>`
or query data stored in Atlas directly from the browser.
Unlike the other Realm SDKs, the Web SDK does not support creating
a local database or using :ref:`Atlas Device Sync <sync>`.
.. kicker:: Learning Paths
Get Started with Realm Web
--------------------------
.. card-group::
:columns: 2
:style: extra-compact
.. card::
:headline: Quick Start
:cta: See Code Examples
:url: https://www.mongodb.com/docs/realm/web/quickstart/
:icon: /images/icons/branding_2022/Technical_ATLAS_Functions3x.png
:icon-alt: Functions Icon
Minimal-explanation code examples of how to work with the Realm Web SDK.
.. card::
:headline: Working Example App
:cta: Explore an Example App
:url: https://www.mongodb.com/docs/atlas/app-services/template-apps/
:icon: /images/icons/branding_2022/Technical_REALM_Mobile3x.png
:icon-alt: Realm Mobile Icon
Learn by example through dissecting a working React app that
uses the Realm Web SDK and Atlas GraphQL API.
.. kicker:: What You Can Do
Develop Apps with Realm Web
---------------------------
Use the Realm Web SDK with Atlas App Services to query MongoDB directly,
query a GraphQL API, invoke serverless functions, manage user authentication,
and more.
.. tabs::
.. tab:: Query MongoDB
:tabid: query-mongodb
.. procedure::
.. step:: Configure Atlas App Services
You can use the Realm Web SDK to query MongoDB Atlas data directly
from the browser. Perform CRUD, aggregation, and listen for database changes.
First, you must :ref:`create an App Services App <create-app-ui>`,
set up :ref:`database rules <rules>`, and :ref:`enable user authentication
<users-and-authentication>`.
.. step:: Connect to an Atlas App Services App
To access your App Services App from the browser, :ref:`initialize the App client
<web-init-appclient>`.
.. step:: Authenticate a User
To authenticate a user, usee one of the :ref:`App Services authentication providers <web-authenticate>`.
App Services includes custom JWT, Facebook, Google, Apple,
anonymous, and built-in email/password authentication providers.
.. step:: Query MongoDB
Query MongoDB directly from the browser using your authenticated user.
The user can only access data that they're authorized to.
For more information, refer to :ref:`Query MongoDB <web-query-mongodb>`.
.. image:: /images/illustrations/Spot_BrightYellow_Query_Tech_Compass.png
:alt: Query MongoDB Illustration
.. tab:: Atlas GraphQL API
:tabid: graphql-api
.. procedure::
.. step:: Configure Atlas GraphQL API
The :ref:`Atlas GraphQL API <graphql-api>` automatically generates
a hosted endpoint with GraphQL queries and mutations based on JSON schemas
for the documents in your database.
Configure App Services Authentication with data access rules to
control which users have access to what data.
Configure the GraphQL API in Atlas App Services.
.. step:: Connect to Atlas App Services
To access your App Services App from the browser, :ref:`initialize the App client
<web-init-appclient>`.
.. step:: Authenticate a User
To authenticate a user, usee one of the :ref:`App Services authentication providers <web-authenticate>`.
App Services includes custom JWT, Facebook, Google, Apple,
anonymous, and built-in email/password authentication providers.
.. step:: Query the GraphQL API
Query the GraphQL API using a GraphQL client from the browser.
Authenticate requests with user credentials.
Learn how to :ref:`query the GraphQL API with the Apollo
Client <graphql-apollo-react>`.
.. image:: /images/illustrations/Connection_Blue.png
:alt: API Integration Image
.. tab:: Build with Atlas App Services
:tabid: app-services
.. container::
Call Serverless Functions
~~~~~~~~~~~~~~~~~~~~~~~~~
You can :ref:`call serverless Functions <web-call-a-function>`
from your client application that run in an App Services backend.
Authenticate Users
~~~~~~~~~~~~~~~~~~
Authenticate users with built-in and third-party :ref:`authentication
providers <web-authenticate>`. Use the authenticated user to
access App Services.
.. image:: /images/illustrations/Spot_MauvePurple_APIs_Tech_RealmApp.png
:alt: App Services Illustration
.. kicker:: Essential Documentation
Recommended Reading
-------------------
.. card-group::
:columns: 3
:style: extra-compact
.. card::
:headline: Realm JavaScript Reference
:cta: Realm JavaScript Reference
:url: https://www.mongodb.com/docs/realm/web/api-reference/
:icon: /images/icons/branding_2022/General_CONTENT_Tutorial3x.png
:icon-alt: Reference Icon
Explore reference docs for the Realm JavaScript SDKs.
.. card::
:headline: Quick Start with React
:cta: Add Realm to React project
:url: https://www.mongodb.com/docs/realm/web/react-web-quickstart/
:icon: /images/icons/react-logo-icon.png
:icon-alt: React Logo Icon
Learn how to add the Realm Web SDK to your React application.
.. card::
:headline: Next.js Integration Guide
:cta: Integrate with Next.js
:url: https://www.mongodb.com/docs/realm/web/nextjs
:icon: /images/icons/nextjs-logo-icon.png
:icon-alt: Next.js Logo Icon
Learn all the ways that you can use the Realm Web SDK with your Next.js
application.