-
Notifications
You must be signed in to change notification settings - Fork 305
/
Copy pathdexie-cloud-landing-page.html
237 lines (222 loc) · 11 KB
/
dexie-cloud-landing-page.html
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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
---
prismStyle: 'vscode-dark'
---
<!DOCTYPE html>
<html>
{% include head.html %}
<body class="dexie-cloud-landing-page">
{% include navbar.html %}
{% include dexie-cloud-header.html %}
<main class="container">
{% include signup-forms.html %}
<div class="shoutouts">
<p>
Create awesome offline-first apps that syncs
</p>
<p>
Keep writing client-side code. We provide the server.
</p>
<p>
Multi user access control
</p>
<p>
Sharded and scalable
</p>
<p>
Eager sync and collaboration when online
</p>
<p>
Periodic sync when app not active
</p>
<!-- <ul>
<li>Online collaboration</li>
<li>Offline email clients</li>
<li>Calendars</li>
<li>Enterprise collaboration</li>
<li>Offline Warehousing</li>
<li>Diaries</li>
<li>Todos</li>
<li>Games</li>
<li>...and more</li>
</ul>-->
</div>
<hr />
<div id="callouts">
<div class="row">
<div class="col-md-3">
<h2>Almost Zero Config</h2>
<p>
Create your <span style="font-weight: bold;">database</span> in the cloud by just running a simple <span style="font-weight: bold;">npx</span> command!
Use the new <span style="font-weight: bold;">dexie-cloud-addon</span> to connect your Dexie database with the cloud and enjoy multi-user bidirectional sync.
</p>
<p>
<a class="btn btn-success" onclick="typeof ga !== undefined && ga('send', 'event', 'buttons', 'click', 'cloud-get-started-btn')" href="#getting-started" role="button"
>Get started »</a
>
</p>
</div>
<div class="col-md-3">
<h2>Authentication</h2>
<p>
Passwordless email OTP is part of the service so you don't have to deal with setting up auth.
Have auth already? Skip our default auth and use your own instead!
</p>
<p>
<a class="btn btn-success" href="docs/authentication" role="button"
>Read more »</a
>
</p>
</div>
<div class="col-md-3">
<h2>Access Control</h2>
<p>
A per-object access model lets your users keep their synced private data for
themselves or shared with their teams or friends. Build your access control models
using simple javascript objects.
</p>
<p>
<a class="btn btn-success" href="docs/access-control" role="button"
>Read more »</a
>
</p>
</div>
<div class="col-md-3">
<h2>Consistent Sync</h2>
<p>
Dexie Cloud doesn't just sync individual CRUD operations - it syncs the where-expressions along with the operations, making it possible to keep related data consistent.
</p>
<p>
<a class="btn btn-success" href="docs/consistency" role="button"
>Read more »</a
>
</p>
</div>
</div>
</div>
<hr/>
{% include testimonials.html %}
<h1 id="what-it-is">What it is:</h1>
<ul style="padding: 32px; list-style-type: none; max-width: 90%; font-size: 12pt;">
<li style="margin: 16px 0">
<i class="fa fa-hand-o-right" aria-hidden="true" style="margin-left: -24px; width: 24px;"></i>Think plain Dexie.js but also with online sync. Write completely Offline-First apps using Dexie.js
as your sole storage model. Then let Dexie Cloud sync your data with the cloud.
</li>
<li style="margin: 16px 0">
<i class="fa fa-hand-o-right" aria-hidden="true" style="margin-left: -24px; width: 24px;"></i>The data in the cloud is protected using authentication and authorization to
prohibit unauthorized access.
</li>
<li style="margin: 16px 0">
<i class="fa fa-hand-o-right" aria-hidden="true" style="margin-left: -24px; width: 24px;"></i>Data can be shared between multiple or individual users, making it possible to
build reactive online collaboration apps hosted on a static web page without bothering about a server. And of course: with offline support so there's no problem sending a chat
messages or look at the latest conversation while the network is down.
</li>
</ul>
<!-- {% include nice-pricing-table.html %}
<script>
document.querySelectorAll('.pricing-box.free').forEach(box => box.onclick = () => {
document.getElementById('getting-started').scrollIntoView({behavior: 'smooth'});
history.pushState(null, null, '#getting-started');
});
</script> -->
<hr/>
<h2 id="getting-started">Get started</h2>
<p>This guide assumes you're already using Dexie.js and now want to connect it to Dexie Cloud.
</p>
<div class='row'>
<div class='col-md-6'>
<h3 class="widescreen">1. Create your database in the cloud</h3>
<h3 class="slimscreen">1. Create your db in the cloud</h3>
<pre class="command-line language-bash" data-prompt="~/my-web-app $" data-filter-output="(out)"><code style="margin:0;">npx dexie-cloud create</code></pre>
<p>You'll be prompted for email verification. Then <span style="font-weight: bold;">the URL of your database</span>
will output to the console and stored in a new local file <span style="font-family: monospace;">dexie-cloud.json</span>.
<span style="font-style: italic;">See the <a href="/cloud/docs/cli">CLI docs</a>.</span></p>
<h3>2. Whitelist your app origin(s)</h3>
<pre class="command-line language-bash" data-prompt="~/my-web-app $"><code style="margin:0;">npx dexie-cloud whitelist http://localhost:3000</code></pre>
<h3>3. Upgrade dexie + install dexie-cloud-addon</h3>
<pre class="command-line language-bash" data-prompt="~/my-web-app $"><code style="margin:0;">npm install dexie@latest
npm install dexie-cloud-addon</code></pre>
</div>
<div class='col-md-6'>
<h3>4. Update your DB declaration</h3>
<pre><code class="language-javascript" id="update-db-declaration" style="margin:0;"> import Dexie from "dexie";
import dexieCloud from "dexie-cloud-addon";
const db = new Dexie('SyncedFriends', {addons: [dexieCloud]});
db.version(1).stores({
friends: '++id, name, age' // '++' = auto-incremented ID
friends: '@id, name, age' // '@' = auto-generated global ID
});
// Connect your dexie-cloud database:
db.cloud.configure({
databaseUrl: "https://<yourdatabase>.dexie.cloud",
requireAuth: true // optional
});</code></pre>
<script>
prismHighlight('update-db-declaration', [
'import dexieCloud from "dexie-cloud-addon";',
"{addons: [dexieCloud]}",
{text: "friends: '++id, name, age' // '++' = auto-incremented ID", action: 'strikethrough'},
"friends: '@id, name, age' // '@' = auto-generated global ID",
///(\/\/.*)/g, // line comments
/db\.cloud\.configure\(\{(.|\n)*\}\)\;/g
]);
</script>
<ul style="padding-left: 0; list-style-type: none;">
<li style="font-style: italic;"><i class="fa fa-hand-o-right" aria-hidden="true"></i> The <span style="color: #ce9178;">'@'</span> character is optional and makes the primary key auto-generated unique string.</li>
<li style="font-style: italic;"><i class="fa fa-hand-o-right" aria-hidden="true"></i> <span style="font-family: monospace; color: #6f9db8;">databaseUrl</span> is the one printed out in step 1.</li>
</ul>
</div>
</div>
<!--<button style="width: fit-content" id="sign-up-beta-btn" class='sign-up-beta-btn getstarted btn btn-success btn-lg' href='/cloud/#getting-started' role='button'>
<span class='glyphicon glyphicon-flash'></span>
<span>Try it now!</span>
</button>-->
<h3>5. Done!</h3>
<p>Enjoy.</p>
<p>
With this very simple and default setup, users will be requested to login using passwordless email OTP the very first time they visit your app
from a device or browser. Learn how to customize <a href="/cloud/docs/authentication">authentication</a> if you already have another authentication in place,
or want to integrate with the authentication of your choice.
</p>
<p>Use your <span style="font-family: monospace">db</span> with the simple <a href="/docs/API-Reference">Dexie API</a> you are used to
for mutating and querying data.
IDs marked <span style="color: #ce9178;">'@'</span> gets auto-generated keys similar to Dexie's <a href="/docs/Version/Version.stores()#schema-syntax">++</a>
but with a globally unique string rather than an auto-incremented number.
</p>
<p>Changes sync instantly with the cloud in both directions. When offline, changes are queued until next time user goes online.
When online, changes will be synced eagerly in both directions.
If user is idle for a time, the client will go over to periodic sync strategy instead of the eager sync.
As soon as user starts interact with the application (mouse moves or key strokes), the app will go over to eager sync mode again.
</p>
<p>Without taking advantage of the <a href="/cloud/docs/access-control">access control</a> features, all data
will be regarded private for the end user and stored on a per-user basis.
Improve your app by allowing users to <a href="/cloud/docs/access-control#example-sharable-todo-list">share things to their team or friends</a>.
</p>
</div>
<hr />
{% include presentation-free.html %}
<hr />
{% include presentation-prod.html %}
<hr />
{% include presentation-silver.html %}
<hr />
{% include presentation-gold.html %}
<hr />
{{ content }}
</main>
{% include footer.html %}
<script src="/assets/js/prism-2020.js"></script>
<script src='/assets/js/jquery.min.js'></script>
<script src='/assets/js/bootstrap.min.js'></script>
<script src="/assets/js/anime.min.js"></script>
<script src="/assets/js/shoutouts.js"></script>
<script>
document.addEventListener("DOMContentLoaded", prismHighlight.highlight);
</script>
<script src="/assets/js/scroll-to-anchor.js"></script>
{% include google-analytics.html %}
<!-- Include dexie for people wanting to open devtools to laborate -->
<script async src="https://unpkg.com/dexie"></script>
<!-- Highlight anchors the same way as github wiki works -->
<script defer src="/assets/js/highlight-anchors.js"></script>
</body>
</html>