Skip to main content
Version: 3.xx.xx
    Current Framework

    1. Intro

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

    Using Stackblitz?

    Prefer to finish 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 StackBlitz

    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 left of the StackBlitz editor window, click to “fork” the template (save to your own account dashboard).

    1. Wait for the project to load, and you will see a live preview of the “refine-headless-boilerplate” starter.

    Make Changes

    In the file pane, you should see src/app.tsx. Click to open it, and follow Generate CRUD pages automatically with Inferencer to make a change to this file.

    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 committed back 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.

    Deploy your App

    If you’d like to deploy to Netlify, skip to Deploy your app to the web. Otherwise, skip 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.
    • Store your project in a git repository.
    • Deploy your project to the cloud.

    As you make changes to your project, you can commit them to your GitHub repository. Netlify listens for changes to your GitHub repository to automatically rebuild and deploy your application on every commit. This allows anyone to access and view your website updates as you make them.