Quick Start Guide

refine works on any environment you can run React (incl. CRA, Next.js, Remix, Vite etc.)

Although you could take the time to manually set up your environment and install refine packages afterwards, the smart way to get started with refine is using the project starter tool.

create refine-app provides built-in templates for CRA, Next.js and Remix environments so you can bootstrap a refine project in a couple of minutes. It also offers a wide range of options that you can automatically configure for your UI framework, i18n, router, Auth. and data provider settings.

To get started, please run the following command. The CLI wizard will assist you for the rest of the setup process:

npm create refine-app@latest my-project

It will create your refine project and install the required packages according to your selections. After completing the setup, navigate to the project folder and start your application with:

npm run dev

You can now view refine application at http://localhost:3000:

Quick Start Example​

We will show how you can use the CLI to bootstrap a refine app with Ant Design and React. You can also use Material UI, Chakra UI and Mantine as well.

npm create refine-app@latest  my-antd-project

Select the following options to complete CLI wizard:

? Select your project type: 
❯ refine-react

? Do you want to use a UI Framework?:
❯ Ant Design

? Do you want a customized theme?:
❯ Default theme

? Router Provider:
❯ React Router v6

? Data Provider:
❯ REST API

? Auth Provider:
❯ None

? Do you want to add example pages? 
❯ Yes

? Do you want a customized layout?
❯ No

INFORMATION

We only show important options for this example. You can prefer to select other options like Kbar and i18n. Different options selections may be result in a different project structure.

Once the setup is complete, navigate to the project folder and start your project with:

npm run dev

You can now view refine application at http://localhost:3000 and you should see the output as a table populated with post & category data with filter, sort, and pagination features

TIP

Since we selected the Do you want to add example pages? option as Yes during the CLI project creation phase, refine adds example CRUD pages and the resources to the app. You can navigate to the example pages and try out the CRUD operations features.

We always recommend to add example pages to your project to get a better understanding of how refine works.

Was this helpful?

Next Steps​