React Bricks

Starter projects


The best way to get you started with React Bricks is using one of the starter projects we created for Gatsby and Next.js.

The first part of the documentation explains how to use React Bricks with a starter project, while the "API Reference" section contains all the library documentation you need to create a project from scratch.

1Choose your starter

Choose your starter project and set it up on your development machine.

Framework
CSS
Language
FrameworkCSSLanguageNameGo to repo
gatsbytailwindjavascriptGatsby + Tailwind CSSStart now »
nextjstailwindjavascriptNext.js + Tailwind CSSStart now »
gatsbyjavascriptGatsbyStart now »
nextjsjavascriptNext.jsStart now »
reactjavascriptVanilla ReactStart now »
The Next.js starters leverage the new Next.js 9.3 Static Site Generation features!

We are currently creating also the TypeScript version of the starters.

2Create a React Bricks app

Create a new account if you haven't yet or add a new app on the React Bricks dashboard. When you sign up a new app is created for you and you are assigned Admin privileges to it. You will receive your credentials, appId and apiKey.

3Configure the starter project

In your starter project root, open the credentials.config.js file and fill in your app's appId and apiKey.

4Discover the dashboard

  • Start your project: yarn develop (for Gatsby) or yarn dev (for Next.js)
  • Open your site: usually http://localhost:8000 for Gatsby and http://localhost:3000 for Next.js.
  • Open the Admin Dashboard: http://localhost:port/admin
  • Log in using your credentials and look around
At this point we suggest you to read through the next chapters to understand configuration, user roles and the main features of the Dashboard.

5Create your content bricks

When you are at ease with the Dashboard, you may start creating your content bricks.