Webiny Project Structure
Webiny project layout, webiny.config.tsx anatomy, and extension registration.
Install
npx skills add webiny/webiny-js --skill webiny-project-structure -g -a claude-code -y- Repository
- webiny/webiny-js8.1k
- Category
- Engineering
- Updated
- 5d ago
- License
- See repository
- Context cost
- Mediumabout 1,998 tokens
- Runs scripts
- No, instructions only
What it does
Webiny project layout, webiny.config.tsx anatomy, and extension registration. Use this skill when the developer asks about folder structure, where custom code goes, how to register extensions, what webiny.config.tsx does, or how the project is organized. Also use when they need to understand the relationship between extensions/, webiny.config.tsx, and the different extension types (Api, Admin, Infra, CLI).
Webiny Project Structure
TL;DR
A Webiny project has a flat structure centered around webiny.config.tsx -- the single configuration file where all extensions are registered. Custom code lives in the extensions/ folder. Extensions are registered as React components (<Api.Extension>, <Admin.Extension>, <Infra.*>, <Cli.Command>) and can be conditionally loaded per environment.
Project Layout
my-webiny-project/
├── extensions/ # All custom code -- API, Admin, Infra, CLI extensions
│ └── README.md
├── public/ # Static assets for the Admin app
│ ├── favicon.ico
│ ├── global.css
│ ├── index.html
│ └── robots.txt
├── package.json # Single package.json for the whole project
├── tsconfig.json # Single TypeScript config
├── webiny.config.tsx # Main configuration -- all extensions registered here
├── webiny-env.d.ts # TypeScript environment types
└── yarn.lock
Key points:
- Single
package.json-- no monorepo, no workspaces needed. - Single
tsconfig.json-- straightforward TypeScript setup. webiny.config.tsx-- the entry point for everything. All extensions, infrastructure options, and project settings are declared here.extensions/-- where all your custom code lives. Organize with subfolders as needed (e.g.,extensions/contactSubmission/,extensions/AdminBranding/).
The webiny.config.tsx File
This file exports a single React component called Extensions. It uses JSX to declaratively register all configuration:
// webiny.config.tsx
import React from "react";
import { Admin, Api, Cli, Infra, Project, Security } from "webiny/extensions";
import { Cognito } from "@webiny/cognito";
export const Extensions = () => {
return (
<>
{/* Infrastructure configuration */}
<Infra.Aws.DefaultRegion name={"us-east-1"} />
<Infra.Core.OpenSearch enabled={true} />
<Infra.Aws.Tags tags={{ OWNER: "me", PROJECT: "my-project" }} />
