Introducing Redwood Studio

Get Help and Help Others Show & Tell
1

Introducing Redwood Studio

A Welcome Note from DT

Many years ago, I visited friends in Portland and when I arrived was told that I’d be staying in their “boffudio” — their “bedroom, office, studio”. They explained that this was a place they could rest, work, and be creative.

And - that’s what Redwood Studio is: a place to enjoy where you can be productive, and build.

I want Studio to be an essential tool for every RedwoodJS developer.

  • It aids in collaboration, visualization, and measurement of your application.

  • It provides a seamless experience, enhancing the enjoyment and insightfulness of developing with RedwoodJS.

  • It can serve as a hub for your team, facilitating calls and meetings to demonstrate and discuss new features as they are built, used, and improved.

  • It also acts as a gateway to the community and documentation, enabling quick assistance without significant context shifting.

Features

Here are the features that make Studio a productive and enjoyable tool for creating with RedwoodJS.

Dashboard

Untitled
Untitled1920×1394 72.4 KB

A quick overview of your app.

  • Monitor Database, GraphQL, API, and Network performance in real-time.
  • Instantly view the most executed SQL and GraphQL Operations.

Monitoring

Untitled 1
Untitled 11920×1394 93.4 KB

Studio leverages OpenTelemetry data sent from your Redwood app.

  • Observe what traces and spans indicate about your app’s health.
  • Found a problem? Make adjustments and then compare the difference to assess the improvement.

GraphQL

Untitled 2
Untitled 21920×1394 66 KB

Explore your GraphQL API with ease.

  • Visualize your GraphQL Schema.
  • Evaluate GraphQL Operations and performance.
  • Test your GraphQL API effortlessly in a fully-integrated GraphiQL Playground.
  • Supports authenticated User Impersonation.

Database

Untitled 3
Untitled 31920×1394 79.5 KB

Enhance your understanding and usage of your Database and SQL.

  • Visualize your Prisma database diagram.
  • Explore your data model and its relations.
  • Evaluate the performance of SQL statements in detail.

Mailer

Untitled 4
Untitled 41920×1394 63.8 KB

Redwood Studio is closely integrated with Redwood Mailer.

  • Intercept emails during development.
  • Monitor the emails being sent and received.
  • Test and preview your email templates.

Community Search

Untitled 5
Untitled 51920×1394 96.8 KB

We’re always here to help.

  • Quickly search the RedwoodJS Community, Documentation, and more.
  • Get help to build your app faster.
  • Just Command-K and go!

Built with RedwoodJS

Did you know that Studio is built with RedwoodJS?

It showcases:

  • Realtime GraphQL to update data

  • Cells for data fetching

  • Routing for navigation

  • Authentication

  • … and more.

Get Started

To begin using Redwood Studio simply execute the following command from your applixcation’s root directory:


yarn rw studio

The first time you run this command, it will install the Studio package, which may take a bit of time. Future launches won’t require additional installations.

To start using, visit: [http://localhost:4318](http://localhost:4318)

What’s Next

We’re super excited about the future versions of Studio. Based on your valuable feedback and needs, we’re planning to refine and expand Studio’s features even further.

Keep an eye out for enhanced monitoring capabilities and even more integrations with your favorite tools and platforms.

Stay tuned, we’ve got some cool updates and features in the pipeline.

Troubleshooting

We hope you don’t encounter any issues, but here are some ways to troubleshoot Studio. As always, you can find us on Discourse Forums or GitHub issues to report problems.

Concurrency Limit Reached

If you see an ‘OpenTelemetry concurrency limit reached’ error in your logs, consider increasing the concurrencyLimit value in your OpenTelemetry configuration.


// api/src/opentelemetry.ts

// ...

const studioPort = getConfig().studio.basePort

const exporter = new OTLPTraceExporter({
  // Update this URL to point to where your OTLP compatible collector is listening
  // The redwood development studio (`yarn rw studio`) can collect your
  // telemetry at `http://127.0.0.1:<PORT>/.redwood/functions/otel-trace`
  // (default PORT is 4318)
  url: `http://127.0.0.1:${studioPort}/.redwood/functions/otel-trace`,
  concurrencyLimit: 64, // <- increase 
})

// ...

Timeouts

If your application experiences any timeouts while sending telemetry data to Studio, you can increase the timeout by adding a timeoutMillis value (the default is 10 seconds).


// api/src/opentelemetry.ts

// ...

const studioPort = getConfig().studio.basePort

const exporter = new OTLPTraceExporter({
  // Update this URL to point to where your OTLP compatible collector is listening
  // The redwood development studio (`yarn rw studio`) can collect your
  // telemetry at `http://127.0.0.1:<PORT>/.redwood/functions/otel-trace`
  // (default PORT is 4318)
  url: `http://127.0.0.1:${studioPort}/.redwood/functions/otel-trace`,
  concurrencyLimit: 64,
  timeoutMillis: 30000, // <-- set a timout greater than 10 seconds
})

// ...

Connection Refused

If your application cannot connect to Studio, please ensure the following:

  • Studio should be running before you launch your app’s development server.

  • If you stop Studio while your app is running in development mode, remember to restart your app after restarting Studio.

Thank You’s

Many thanks to

9 Likes
3

Absolutely tremendous effort! I love the Studio but I’m experiencing a small bug with the mailer part.

image
image1138×461 10.3 KB

I don’t see any previews as the docs suggest. Mails work and they render properly. I can even see them coming in and view them in the Inbox, however the Template page doesn’t show them and interestingly the Renderer says “no renderers found”. This is on 8.0.0-rc with the latest packages as well.

mailer.ts

import { Mailer } from '@redwoodjs/mailer-core'
import { ResendMailHandler } from '@redwoodjs/mailer-handler-resend'
import { ReactEmailRenderer } from '@redwoodjs/mailer-renderer-react-email'

import { logger } from 'src/lib/logger'

export const mailer = new Mailer({
  handling: {
    handlers: {
      resend: new ResendMailHandler({
        apiToken: process.env.RESEND_API_KEY,
      }),
    },
    default: 'resend',
  },

  rendering: {
    renderers: {
      reactEmail: new ReactEmailRenderer(),
    },
    default: 'reactEmail',
  },

  logger,
})

Also quick mention in regards to the mailer package. In order to deploy mailer functionality I noticed that I HAD to include the development and test defaults in mailer.ts. Otherwise my api complained on startup.

Importing Server Functions... 
{"level":40,"time":1723256858261,"pid":1,"hostname":"adba65fea651","module":"mailer","msg":"No test handler specified and could not load the '@redwoodjs/mailer-handler-in-memory' handler automatically, this will prevent mail from being processed in test mode"}
/auth 748 ms
...Done importing in 749 ms
{"level":40,"time":1723256858262,"pid":1,"hostname":"adba65fea651","module":"mailer","msg":"No development handler specified and could not load the '@redwoodjs/mailer-handler-studio' handler automatically, this will prevent mail from being processed in development mode"}

Furthermore, at least on 8.0.0-rc when I run yarn install I notice that react-dom and react are expected packages for the api side. So I had to add those to make react-email work in mailer.ts (on the API package.json).

  • This is only for my deployment environment. In local dev I didn’t have to add react and react-dom. I’m building my app as explained in my coolify docker guide.
1 Like