React Bricks CLI

The CLI is the fastest way to start with React Bricks.

Launch the CLI

npx create-reactbricks-app

With Yarn > 0.25 you can also use yarn create reactbricks-app

Once you signed up for a free trial, you can launch the CLI, which will guide you step-by-step in the creation of your first React Bricks app.

The steps the CLI will follow are:

  1. Authenticate
  2. Choose an App or create a new one
  3. Enter Project name and folder name
  4. Choose a Starter project

When the CLI has finished

Once the CLI has completed the scaffolding of your project, you'll be prompted to enter the project directory and run it (usually yarn start or yarn dev based on the environment).

When the app starts, we suggest that you explore the Admin Dashboard, going to the /admin path or clicking on the "Edit content" button in the header menù.

Explore the directory structure

Take a minute to explore the folder structure of your project. It is different based on the starter project that you chose, but you should find:

  • The react-bricks folder with the config.ts file (which contains almost all the configuration object passed to the <ReactBricks /> component, but for the color mode management, which needs to use hooks, so it's where the <ReactBricks /> component is rendered, inside _app.tsx for Next.js and gatsby-browser / gatsby-ssr for Gatsby)
  • The components/bricks folder with an example content block (and imported react-bricks-ui blocks for Tailwind-based projects)

First configuration steps

  • The first configuration step could be setting your logo for the Admin header. See Configuration
  • Then you could start creating your first content blocks (bricks). See What is a brick