webiny-full-stack-architect

Scaffolds full-stack Webiny extensions spanning API and Admin with shared domain layers.

8.0k|673|Updated Jan 9, 2018
One-click install
npx skills add https://github.com/webiny/webiny-js --skill webiny-full-stack-architect
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: webiny-full-stack-architect
Source: https://github.com/webiny/webiny-js/tree/main/skills/user-skills/full-stack-architect
Command: npx skills add https://github.com/webiny/webiny-js --skill webiny-full-stack-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building a Webiny extension that spans both the API (Lambda) and Admin (browser) runtimes requires coordinating two separate entry points, a shared domain layer, and build-time configuration — mistakes in registration or imports cause build failures or missing DI containers at runtime.

Core Features & Use Cases

  • Extension Skeleton: Defines the package structure with shared/, api/, and admin/ directories plus a top-level component registering <Api.Extension> and <Admin.Extension> entry points.
  • Registration Rules: Enforces correct use of src props with full file paths, export default for entry-point files, and prohibits mounting admin/api code outside entry-point components.
  • BuildParam Configuration: Declares <Api.BuildParam> and <Admin.BuildParam> inside the extension component so configuration flows from webiny.config.tsx into both runtimes without using process.env in deployed code.
  • Use Case: Create a lead-management extension where the API side handles GraphQL and domain logic in Lambda while the Admin side renders UI in the browser, sharing entity types and constants from one package.

Quick Start

Ask the AI to scaffold a new full-stack Webiny extension with API and Admin entry points, a shared domain layer, and BuildParam declarations.

Frequently Asked Questions about webiny-full-stack-architect

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a full-stack Webiny extension with API and Admin parts?

Create a top-level React component that registers both sides using <Api.Extension src={...}> and <Admin.Extension src={...}>, each pointing to a separate entry-point file. Put shared types and constants in a shared/ directory used by both runtimes.

How do I pass configuration from webiny.config.tsx into a Webiny extension?

Declare <Api.BuildParam> and <Admin.BuildParam> inside the extension's top-level component, exposing values as React props. Read them in webiny.config.tsx from process.env, then consume them via DI on the API side or useBuildParams() on the Admin side.

Why does my Webiny extension fail to build when registering Admin code?

Admin and API code cannot be mounted directly in webiny.config.tsx or child components — they must go through <Admin.Extension> and <Api.Extension> entry points. Also ensure the src prop includes the full file path with extension and the entry file uses export default.

Can a deployed Webiny API read process.env for configuration?

No, a deployed API must never use process.env. Configuration must flow through BuildParam declarations in the extension component, which are injected at build time and read via the BuildParams service through dependency injection.

What is the difference between extensions/ and packages/ in Webiny?

Extensions in extensions/ import from webiny/api and webiny/admin and register via Extension components in webiny.config.tsx. Core packages in packages/ import from @webiny scoped modules and register features programmatically with createFeature.