Webiny Project Structure

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";