In this lesson, we'll explore the folder structure of a Webiny project. Understanding the organization of files and folders will help you navigate the codebase efficiently and know where to place your custom code and extensions.

The Webiny Project Structure

Webiny projects have a clean and simple structure that's easy to navigate and understand.

A typical Webiny project structure looks like this:

my-webiny-project/
├── extensions/          # Your custom extensions and code
│   └── README.md
├── node_modules/        # Dependencies
├── public/              # Public assets for Admin app
│   ├── favicon.ico
│   ├── global.css
│   ├── index.html
│   └── robots.txt
├── eslint.config.js     # ESLint configuration
├── package.json         # Project dependencies
├── tsconfig.json        # TypeScript configuration
├── webiny.config.tsx    # Main configuration file
├── webiny-env.d.ts      # TypeScript environment types
└── yarn.lock            # Locked dependencies

webiny.config.tsx - The Entry Point

The webiny.config.tsx file is where you configure your Webiny project. This is where you declare extensions, set infrastructure options, and customize your Webiny instance.

Here's what a basic configuration looks like:

This minimal configuration:

• Sets the AWS region
• Enables Cognito for authentication

The extensions/ Folder

The extensions/ folder is where all your custom code lives. This is where you'll spend most of your development time.

When you reference an extension in webiny.config.tsx, you point to a file in this folder:

Types of extensions you can create:

• API Extensions - Add GraphQL schemas, custom business logic, lifecycle hooks
• Admin Extensions - Customize the Admin UI with themes, white-label branding, custom views
• Infrastructure Extensions - Modify Pulumi infrastructure code
• CLI Extensions - Create custom CLI commands for your workflows

Other Important Files

package.json

Your root package.json file contains all project dependencies. Here are the key Webiny-related packages:

The webiny package is the unified API that provides all the building blocks for extensions, @webiny/cognito provides the default identity provider, and @webiny/cli provides the command-line tools for development and deployment.

tsconfig.json

The TypeScript configuration file for the entire project. This file controls how TypeScript compiles your code and provides type checking across all extensions.

public/ Folder

Contains public assets for the Admin application:

• favicon.ico - Browser favicon
• global.css - Global CSS styles
• index.html - HTML entry point for the Admin app
• robots.txt - Search engine crawling rules

webiny-env.d.ts

TypeScript type definitions for environment-specific types used throughout your project.

Summary

The Webiny project structure is designed to be simple, clear, and maintainable:

• webiny.config.tsx is your configuration entry point
• extensions/ contains all your custom code
• public/ holds Admin app assets
• Everything is declarative and type-safe

This clean structure makes it easier to understand, maintain, and upgrade your projects. In the next lesson, we'll explore how local development works with this structure.