Skip to main content
Version: Next

Dev Studio

Devvit's Developer Studio lets you do real-time testing and debugging of your app on your local machine. Get your app running on production data and use your web browser’s developer tools to set breakpoints and inspect execution of your app in real-time.

note

Developer Studio currently has some (temporary) limitations:

  • POST requests to reddit.com do not work, even when you're using the Reddit API Client or Fetch.
  • Schedulers and Triggers can't be tested. :::

Start Developer Studio​

Navigate into your App's directory.

Make sure you are logged in to Devvit.

devvit login

Navigate to into the the top-level directory for your app.

your-app-name     # <- you should be here
├── devvit.yaml
├── package.json
├── src
│   └── main.ts
├── tsconfig.json
├── yarn.lock

Run the following command to start Developer Studio:

devvit start

This will create a local web server accessible via http://localhost:3000. The -o flag will automatically open this in your default browser.

Select a subreddit​

Your app can change production data on Reddit from Developer Studio. As a safety precaution, we require you to select a test subreddit with fewer than 10 followers before you can start using Developer Studio. Developer Studio will pull data in from this subreddit by default. This can be changed at any time by opening Developer Studio and clicking "change" in the upper-right of the UI.

studio sub select

Your app can still change data on other communities for which you have moderator permissions. Be careful!

:::

Test your app​

Click on "Main" in the left nav. You will see something like the following:

studio main

A few features to point out:

  • Interfaces. Shows the entrypoints and plugins your app is using. This is the main screen for testing your app. Developer Studio will pull in a subset of real data from your test subreddit here (for example, the top post and comment).
  • Build log. Lists any errors encountered during the build process.
  • Plugins. Provides UIs you can use to test and explore functionality without writing code. For example, the Key Value store plugin allows you to read and modify the current Key Value store associated with your test subreddit.

Set breakpoints​

You can use your web browser's developer tools to set breakpoints, inspect objects, and debug your code. Your app's code is located under main.node > localhost:3000 > src > main.ts. The image below shows where this is in Chrome's Developer Tools.

set breakpoints