Skip to content

removed experimental from devvit web #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
stacy-qqq wants to merge 1 commit into
base: main
Choose a base branch
from
Open

removed experimental from devvit web #40

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 19 additions & 18 deletions versioned_docs/version-0.12/capabilities/devvit-web/devvit_web_overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import DevvitWebArch from '../../assets/devvit_web/devvit_web_arch.png';
import DevvitWebArch from "../../assets/devvit_web/devvit_web_arch.png";

# Devvit Web

Expand All @@ -23,21 +23,19 @@ In addition, since you’re working with standard web technologies your apps sho

Visit [https://developers.reddit.com/new](https://developers.reddit.com/new) and choose one of our templates or take a look at the github repositories:

* [React](https://github.com/reddit/devvit-template-react)
* [Phaser](https://github.com/reddit/devvit-template-phaser)
* [Three.js](https://github.com/reddit/devvit-template-threejs)
* [Hello World](https://github.com/reddit/devvit-template-hello-world)
- [React](https://github.com/reddit/devvit-template-react)
- [Phaser](https://github.com/reddit/devvit-template-phaser)
- [Three.js](https://github.com/reddit/devvit-template-threejs)
- [Hello World](https://github.com/reddit/devvit-template-hello-world)

## Limitations

As with most experimental features, there are some caveats.

| Limitation | What it means |
| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Serverless endpoints | The node server will run just long enough to execute your endpoint function and return a response, which means you can’t use packages that require long-running connections like streaming. |
| Limitation | What it means |
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Serverless endpoints | The node server will run just long enough to execute your endpoint function and return a response, which means you can’t use packages that require long-running connections like streaming. |
| Package limitations | Developers cannot use `fs` or external native packages. For now, we recommend using external services over the native dependencies, such as [StreamPot](https://streampot.io/) (instead of ffmpeg) and [OpenAI](https://platform.openai.com/docs/guides/embeddings) (instead of @xenova/transformers) . |
| Single request and single response handling only | Streaming or chunked responses and websockets are not supported. Long-polling is supported if it’s under the max request time. |
| No external requests from your client | You can’t have any external requests other than the app's webview domain. All backend responses are locked down to the webview domain via CSP. (Your backend can make external fetch requests though.) |
| Single request and single response handling only | Streaming or chunked responses and websockets are not supported. Long-polling is supported if it’s under the max request time. |
| No external requests from your client | You can’t have any external requests other than the app's webview domain. All backend responses are locked down to the webview domain via CSP. (Your backend can make external fetch requests though.) |

Devvit Web still has the same technical requirements:

Expand All @@ -47,7 +45,6 @@ Devvit Web still has the same technical requirements:
- Max response size: 10MB
- HTML/CSS/JS only


## Devvit Web components

Devvit Web uses endpoints between the client and server to make communication similar to standard web apps. A Devvit Web app has three components:
Expand All @@ -59,10 +56,10 @@ Devvit Web uses endpoints between the client and server to make communication si
Devvit Web templates all have the same file structure:

```tsx
- src
- client / // contains the webview code
- server / // endpoints for the client
- devvit.json; // the devvit config file
-src -
client / // contains the webview code
-server / // endpoints for the client
-devvit.json; // the devvit config file
```

Now, instead of passing messages with postMessage (old way), you’ll define `/api/endpoints` (new way).
Expand All @@ -83,7 +80,11 @@ We also provide an authentication middleware so you don’t have to worry about
All server endpoints must start with `/api/` (e.g. `/api/get-something` or `/api/widgets/42`).
:::

<img src={DevvitWebArch} alt="devvit web architecture" style={{ maxWidth: '300px', display: 'block', margin: '0 auto' }} />
<img
src={DevvitWebArch}
alt="devvit web architecture"
style={{ maxWidth: "300px", display: "block", margin: "0 auto" }}
/>

### Configuration in `devvit.json`

Expand Down