Skip to content

Commit 94d9c31

Browse files
adityaoberaiadityaoberai
authored
Merge pull request #2010 from appwrite/add-dev-keys-blog
Add dev keys blog + new image formats to docs
2 parents bd4d3c5 + f37535e commit 94d9c31

File tree

4 files changed

+125
-1
lines changed

4 files changed

+125
-1
lines changed

‎src/routes/blog/post/improve-devex-dev-keys/+page.markdoc

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
---
2+
layout: post
3+
title: Improve your Appwrite developer experience with dev keys
4+
description: Learn how you can create a dev key on Appwrite and use it in a web project to improve your developer experience.
5+
date: 2025-05-21
6+
cover: /images/blog/improve-devex-dev-keys/cover.png
7+
timeToRead: 7
8+
author: aditya-oberai
9+
category: tutorial
10+
featured: false
11+
callToAction: true
12+
---
13+
14+
When building applications with Appwrite, developers often need a way to test and debug services repeatedly over short periods. Sometimes, this can become a hassle, as Appwrite enforces strict rate limits on client apps to prevent abuse. Developers needed a way to bypass these rate limits in their test environments and CI/CD workflows to ensure the robustness of their app functionalities.
15+
16+
And this is the exact problem **dev keys** are here to solve!
17+
18+
# What are dev keys?
19+
20+
Dev keys are a type of secret used by Appwrite's client SDKs. They allow the developer to bypass any rate limits enforced by Appwrite and suppress any CORS errors caused by not using a configured hostname. A developer can configure the expiration date of a dev key to any of the three preset options (1 day, 7 days, or 30 days).
21+
22+
Dev keys should never be used in production environments, as they can make your app more susceptible to abuse and security breaches.
23+
24+
# Try out dev keys in an app
25+
26+
To test dev keys, I created a simple demo web app that sends 200 requests to create a new document in an Appwrite database. To set this app up, you must complete the following steps:
27+
28+
## Step 1: Setup Appwrite project
29+
30+
First, create an [Appwrite Cloud](https://cloud.appwrite.io) account or [self-host Appwrite 1.7](/docs/advanced/self-hosting). Create a project (which will lead you to the project overview page) and head to the **Databases** page from the left sidebar. Create a new database with the ID `testDb` and a new collection with the ID `testCollection`. Store both of these IDs for future usage. In this collection, add the following attribute:
31+
32+
| Name | Type | Required |
33+
| --- | --- | --- |
34+
| `number` | Integer | True |
35+
36+
Then, head to the **Settings** tab of the collection, scroll down to the **Permissions** section, and add the following permissions:
37+
38+
| | Create | Read | Update | Delete |
39+
| --- | --- | --- | --- | --- |
40+
| Any | False | False | False | False |
41+
42+
Lastly, return to the project overview page, head to the **Settings** page from the left sidebar, and copy your **API endpoint** and **project ID** for future usage.
43+
44+
## Step 2: Create web app
45+
46+
Next up, we'll create our test app. This will require us to create two files in our working directory:
47+
48+
- `index.html`
49+
50+
```html
51+
<!DOCTYPE html>
52+
<html lang="en">
53+
<head>
54+
<meta charset="UTF-8">
55+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
56+
<title>Dev keys demo</title>
57+
</head>
58+
<body>
59+
<h1>Dev keys demo</h1>
60+
<p>Click on this button to add 200 documents to the database in less than 1 minute.</p>
61+
<button type="button">Add documents</button>
62+
63+
<!-- Appwrite Web SDK -->
64+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
65+
66+
<!-- Our app's script -->
67+
<script src="app.js"></script>
68+
</body>
69+
</html>
70+
```
71+
72+
- `app.js`
73+
74+
```js
75+
const client = new Appwrite.Client()
76+
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1') // Your API Endpoint
77+
.setProject('<YOUR_PROJECT_ID>'); // Your project ID
78+
79+
const database = new Appwrite.Databases(client);
80+
81+
document.querySelector('button').addEventListener('click', async () => {
82+
const promises = [];
83+
for (let i = 0; i < 200; i++) {
84+
const promise = database.createDocument(
85+
'testDb', // Your database ID
86+
'testCollection', // Your collection ID
87+
Appwrite.ID.unique(),
88+
{ number: i + i }
89+
);
90+
promises.push(promise);
91+
console.log('Request initiated:', i+1);
92+
}
93+
94+
await Promise.all(promises);
95+
});
96+
```
97+
98+
If you open the HTML page in your browser and click on the `Add documents` button, you will notice numerous errors in the console with the HTTP code `429`, as Appwrite's rate limits allow one client to create 120 requests per minute for this API endpoint.
99+
100+
## Step 3: Create dev key
101+
102+
Head back to your Appwrite project. On the overview page, select the **Dev keys** tab under the Integrations section and create a new dev key. You can add whatever name and expiry date you like.
103+
104+
![Dev key](/images/blog/improve-devex-dev-keys/dev-key.png)
105+
106+
After creating this dev key, head to the `app.js` file and update the Appwrite client to the following:
107+
108+
```js
109+
const client = new Appwrite.Client()
110+
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
111+
.setProject('<YOUR_PROJECT_ID>')
112+
.setDevKey('<YOUR_DEV_KEY>'); // Your dev key
113+
```
114+
115+
## Step 4: Test the app
116+
117+
Reopen the HTML page in your browser. Clicking the `Add documents` button will allow all 200 requests to execute successfully.
118+
119+
# Next steps
120+
121+
And with that, you have successfully tested dev keys! Learn more about Appwrite by visiting the docs and joining the Discord community.
122+
123+
- [Appwrite dev keys docs](/docs/advanced/platform/dev-keys)
124+
- [Appwrite Discord server](/discord)

‎src/routes/docs/products/storage/images/+page.markdoc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ Below you can find all the different parameters offered by the preview endpoint
3232
| opacity | Set opacity for the output image. Accepts a float value between `0-1`, where `0` makes it transparent. Only works with output formats supporting alpha channels like `png`. |
3333
| rotation | Rotate the output image by a degree. Accepts an integer between `-360` to `360`. |
3434
| background | Set a background-color. Accepts any valid hex color value without the leading `#`. Only works with output formats supporting alpha channels like `png`. |
35-
| output | Set the output image format. If not provided, will use the original image's format. Supported formats are: `jpg`, `jpeg`, `png`, `gif`, and `webp` |
35+
| output | Set the output image format. If not provided, will use the original image's format. Supported formats are: `jpg`, `jpeg`, `png`, `gif`, `webp`, `avif`, and `heic` |
3636

3737
# Examples {% #examples %}
3838
Here are some examples using [Client SDKs](/docs/sdks#client).

‎static/images/blog/improve-devex-dev-keys/cover.png

165 KB
Loading

‎static/images/blog/improve-devex-dev-keys/dev-key.png

114 KB
Loading

0 commit comments

Comments
 (0)