skills.rest
webiny
webinyOFFICIAL
Explore all skills by this author →
Website𝕏@WebinyCMSGitHub

webiny-project-structure

Explains Webiny project layout and extension registration in webiny.config.tsx.

8.0k|673|Updated Jan 9, 2018
Search Tags:#AWS#extensions#Configuration#webiny#Project Structure#webiny.config.tsx#serverless cms
One-click install
npx skills add https://github.com/webiny/webiny-js --skill webiny-project-structure
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webiny-project-structure
Source: https://github.com/webiny/webiny-js/tree/main/skills/user-skills/project-structure
Command: npx skills add https://github.com/webiny/webiny-js --skill webiny-project-structure

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers new to Webiny often struggle to understand where custom code belongs, how the project is organized, and how extensions connect to the framework. This Skill explains the flat project structure, the role of webiny.config.tsx, and how to register API, Admin, Infra, and CLI extensions correctly.

Core Features & Use Cases

  • Project Layout Guidance: Describes the single-package structure with extensions/, public/, and webiny.config.tsx as the central configuration file.
  • Extension Registration: Documents JSX-based registration via <Api.Extension>, <Admin.Extension>, <Infra.*>, and <Cli.Command> components, including required file extensions and default export rules.
  • Environment-Conditional Config: Shows how to use <Infra.Env.Is> and build parameters to vary configuration per deployment environment.
  • Use Case: A developer wants to add a custom GraphQL content model and an Admin UI column. This Skill tells them to place files under extensions/ and register them with <Api.Extension> and <Admin.Extension> in webiny.config.tsx.

Quick Start

Ask the AI to explain where custom code goes in a Webiny project and how to register a new API extension in webiny.config.tsx.

Frequently Asked Questions about webiny-project-structure

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

FAQPage Schema
How do I register an extension in a Webiny project?▼

Register extensions in webiny.config.tsx using JSX components like <Api.Extension src="/extensions/MyModel.ts" /> for backend code or <Admin.Extension> for frontend code. The src prop must include the full file path with the .ts or .tsx extension.

Where does custom code go in a Webiny project?▼

All custom code lives in the extensions/ folder at the project root, organized into subfolders as needed. The project uses a single package.json and tsconfig.json, with webiny.config.tsx as the central registration point.

Why does my Webiny extension fail to build?▼

Build failures commonly occur when the src prop omits the .ts or .tsx file extension, or when a file targeted directly by an Extension src uses a named export instead of export default for the createImplementation() call.

Can Webiny config vary per deployment environment?▼

Yes, wrap components in <Infra.Env.Is env="prod"> to load extensions or infrastructure settings only in specific environments. You can also pass an array of environments to target multiple stages.

How do I pass configuration values to Webiny extensions?▼

Use <Api.BuildParam> or <Admin.BuildParam> inside the extension's own Extension.tsx file, exposed as typed React props. The consumer in webiny.config.tsx then supplies the value from environment variables or hardcoded config.

Related Skills

Explore More Software Engineering Skills→
clinecline
19

dr-bedrock

Diagnose AWS Bedrock authentication and region configuration errors for the Cline CLI.

Official
Advanced
wesleyegbertowesleyegberto
3

nodejs-backend-patterns

Automate Node.js backend construction with Express or Fastify patterns.

Community
Advanced
joyz0joyz0

dependency-injection-design

Creates a structured dependency injection system for TypeScript projects.

Community
Advanced
sharkitect-solutionssharkitect-solutions

shopify-development

Develop Shopify apps, themes, and extensions using Shopify CLI and GraphQL Admin API.

Community
Intermediate