Decoupled Studio - The JAMStack IDE

• Decoupled Studio is a VSCode-based IDE for modern web apps that understands frameworks, infrastructure and services in depth.
• It provides a better experience than individual extensions because it understands complete projects.

• Issues on Github

Redwood.js Support

• Redwood.js is a React + GraphQL + Prisma + JAMStack web framework with a strong focus on conventions and productivity.
• Decoupled Studio provides deep support for Redwood.js and related technologies.

Getting Started

• Open any Redwood project with VSCode. Decoupled Studio will look for a redwood.toml in the root. (Note: Only one Redwood.js project per workspace supported for now).

Redwood Outline / Explorer

• Explore your project with a Redwood-aware outline. Convenient access to routes/pages, generators, dev server, live previews, and more!

Generators

• Redwood provides Ruby-Style generators for every aspect of the framework via the redwood generate <type> <name> command (or rw g)
• Decoupled Studio brings generators closer to the VSCode experience by augmenting them in a few ways:
  • Exposes generators via VSCode commands, code lenses, and other native affordances
  • Makes sure generated code plays nicely with open/unsaved editors and undo/redo
  • Enriches the generation logic with extra validations and information. For example, by listing the available Models in the schema.prisma file, or detecting duplicate routes, potential overwrites, etc.

For example:

• Command: Redwood: Generate...

Semantic Validation for Routes.js

• Syntactic and Semantic Validation for paths

Live Preview

• TODO: Jump from code (ex: Routes file or Page components) to live previews.
• TODO: HMR/Live editing with VSCode's internal browser (TODO) and an external browser
• Page thumbnails :)

Full-Stack + Multi-Language Semantic Checks

• Redwood.js relies extensively on conventions to eliminate boilerplate and APIs
• Decoupled Studio understands and enforces some of these rules across layers and languages

• For example: Linking GraphQL SDLs + JS Service Implementations

Commands

• Redwood: Show Project Outline
  • Show Outline
• Redwood: Generate...
  • $ redwood generate...
• Redwood: Interactive CLI...
  • $ redwood ...
• Redwood: Open Dev Server
  • Starts dev server and opens the default browser
  • $ redwood dev --open
• Redwood: Open Dev Server on Current Page/Component
  • $ redwood dev --open=/about-us
• Redwood: Open Storybook
  • $ redwood storybook --open
• Redwood: Open Storybook on current Page/Component
  • $ redwood storybook --open=MyComponent
• Redwood: Open GraphQL playground

Netlify Support

netlify.toml

• Semantic and Syntactic Validation
• TODO: Integration with Redwood.js workflows (Ex: moving a page and creating a redirect)

Netlify Dev

• TODO: Explain