Project Structure

A React Bricks project generated by the create reactbricks-app CLI includes various files and folders. The specific structure depends on your chosen framework (Next with App Router, Next with Pages Router, Remix, Gatbsy) and template project (Empty project or Website with blog).

Directories and Files

Several directories and files are common to all generated projects:

• admin/* - Content administration routes
• react-bricks/config.tsx - React Bricks configuration file
• react-bricks/pageTypes.tsx - Page Types configuration file
• react-bricks/bricks/* - Bricks folder, usually with subfolders for each theme

Example Project Tree

A typical React Bricks project directory might look like this:

Note

This is the case of a Next.js project with the App Router and Tailwind CSS.
Your app structure may differ.

• Directoryapp

  • Directory[lang]

    • Directory[[…slug]]

      • page.tsx
    • layout.tsx
  • Directoryadmin

    • Directory(sso)/

      • …
    • Directoryapp-settings

      • page.tsx
    • Directoryeditor

      • page.tsx
    • Directorymedia

      • page.tsx
    • Directoryplayground

      • page.tsx
    • layout.tsx
    • page.tsx
    • ReactBricksApp.tsx
  • Directorypreview

    • layout.tsx
    • page.tsx
• Directorycomponents/

  • …
• Directorycss/

  • …
• Directorypublic/

  • …
• Directoryreact-bricks

  • Directorybricks

    • Directorycustom

      • MyHeroUnit.tsx
      • …
    • Directoryreact-bricks-ui/

      • …
    • index.ts
  • config.tsx
  • NextLink.tsx
  • NextLinkClient.tsx
  • pageTypes.ts
• .env.local
• i18n-config.ts
• middleware.ts
• next.config.js
• package.json
• postcss.config.js
• tailwind.config.ts
• tsconfig.json

Let’s explore the key folders and files in the project tree:

react-bricks/

The react-bricks/ folder houses the React Bricks configuration, including:

• Bricks
• Page Types

react-bricks/bricks

This folder contains the bricks. You’ll find pre-made bricks under react-bricks-ui and example custom bricks under custom.

We recommend creating your own folder under /bricks to house bricks that implement your design system.

react-bricks/index.ts

This file imports all bricks and re-exports them in a theme > category structured tree. You can create your own theme and categorize bricks by type (e.g., hero units, calls to action, features).

react-bricks/pageTypes.ts

Here you can configure pageTypes. A pageType can have default content, a subset of usable bricks, custom fields, external data, or even define a full Page Template with Slots.

react-bricks/config.ts

The config.ts contains the React Bricks configuration and imports all bricks and pageTypes.

app/[lang]

This directory contains the “catch-all” routes of the frontend website. The structure here may vary significantly between frameworks, as the app folder is specific for Next.js with the App Router.

app/admin

This directory houses the content administration interface. It’s hosted within your project, alongside the frontend website.

.env.local

This file isn’t committed to the Git repo. The CLI configures it with your App’s credentials (APP_ID, API_KEY, ENVIRONMENT). You can also add other environment variables here, such as an Unsplash API Key.