Skip to content
Docs

Getting Started

In this section we’ll see how to create a new React Bricks project from scratch in just a few minutes, following two simple steps:

  1. Sign up for a free account
  2. Start a new project using the create reactbricks-app CLI command

Prerequisites

  • Node.js - v18 or higher.
  • Text editor - We recommend VS Code with our React Bricks snippets extension.
  • Terminal - To be able to launch the React Bricks command-line interface (CLI) and start the Next.js, Remix or Gatsby projects.

React Bricks CLI

  1. Run the following command in your terminal to start our handy install wizard:

    Terminal window
    # create a new project with npm
    npm create reactbricks-app@latest

    You can run create reactbricks-app in your root development directory. There’s no need to create a new empty directory for your project beforehand, as the wizard will create one for you automatically.

  2. Answer the questions and follow the instructions of the CLI wizard. You’ll be able to authenticate, choose an existing App or creating a new one, choose a project name, a template and pick your preferred framework (Next.js with App or Pages router, Remix or Gatsby).

  3. If successful, you will see a success message followed by recommended next steps. Once your project is created, you can cd into your new project directory and start your app. The command to start it depends on your chosen framework (for example, if you chose Next.js, it is npm run dev).

Here you can see a video of the CLI in action:

Try editing content

Once your project has started, open it in your browser (usually at http://localhost:3000) and click the “Edit content” button (or go to the /admin folder).

You’ll enter the content administration area of React Bricks, where you can log in (using the credentials you chose during registration) and try visually editing some pages.

Edit your project

To make changes to your project, open your project folder in your code editor. Working in development mode with the dev server running allows you to see updates to your site as you edit the code.

As a first step, explore the directory structure. You’ll find the admin folder containing the content management interface and the react-bricks folder with the configurations. Inside react-bricks, there is a bricks folder where you’ll find some pre-made content blocks and where you’ll be able to create your own bricks to match your corporate design system.

Next steps

Congratulations! You’ve just created your first React Bricks project! 🎉
You are now ready to start building something beautiful!

Before diving in, we recommend learning the basics of React Bricks through one of our many resources: video tutorials, step-by-step guides, documentation, or how-tos!