Skip to main content
Version: 4.xx.xx

1. Intro

Now that you have selected the headless option as your UI preference, let's get started!

Using CodeSandbox?

Prefer to go through this tutorial in an online code editor? That's possible!

Follow these instructions, then go directly to "Generate CRUD pages automatically with Inferencer" section!

Set up CodeSandBox

  1. Click here to open the headless template.
  1. Click “Sign in” on the top right to log in using your GitHub credentials.

  2. In the upper right of the CodeSandBox editor window, click the "fork" button to fork the template (save to your own account dashboard).

  1. After the project loads, you will see a live preview of the “refine-headless-boilerplate” starter.

Make Changes

In the files panel, click on src/app.tsx to open it. Afterwards, go to this part of the tutorial to learn how to make changes to this file: Generate CRUD pages automatically with Inferencer

Create a GitHub Repository

  1. Press the "Connect Repository" button at the top of your list of files, enter a new name for your repository, and click "Create repo & push".

  2. When you have changes to be commit to GitHub, a “Commit” button will appear at the top left of your workspace. Clicking on this will allow you to enter a commit message, and update your repository.

What's next?

Now you can navigate to Generate CRUD pages automatically with Inferencer to start building with refine!

Where are we going?

In this unit, we will be covering the following steps:

  • Setting up your development environment.
  • Creating a new project.
  • Generating CRUD pages for your data model.
  • Storing your project in a git repository.
  • Deploying your project to the cloud.

What will we be building? is an interactive tool that lets you create refine apps right in your browser. You can view the app we'll build during the tutorial from this link.

tutorial headless

🏄 If you're a busy developer, you can quickly download the final version of the application by clicking on the "Build & Download" button.