Quick Start Guide
refine works on any environment that can run React (incl. Vite, Next.js, Remix, and CRA(Legacy) etc.)
Although you could take the time to manually set up your environment and install the refine packages afterwards, the optimal way to get started with refine is using the refine.new platform or create refine-app project starter tool.
Choose one of the methods below to bootstrap a refine app:
- refine.new
- create refine-app
refine.new is a powerful tool that lets you create refine apps right in your browser. You have the ability to preview, modify, and download your project immediately, thereby streamlining the development process.
- Navigate to refine.new and select libraries and frameworks you want to work with by using interactive UI.
- Download the generated project by clicking on the "Build & Download" button.
- Next, navigate to the project folder, install the dependencies, and then start your project.
> npm install
> npm run dev
create refine-app provides built-in templates for Vite, Next.js, Remix, and CRA(Legacy) environments, so you can bootstrap a refine project in just a couple of minutes. It also offers a wide range of options that you can easily configure for your UI framework, i18n, router, Auth. and data provider preferences.
- To get started, run the following command. The CLI wizard will assist you for the rest of the setup process:
npm create refine-app@latest
- Once the setup is complete, navigate to the project folder and start your application with:
npm run dev
In case you select Yes for the Do you want to add example pages? option while using the CLI wizard, the refine will add sample CRUD pages utilizing refine Inferencer and fill the resources property.
It is highly recommended to add example pages as it provides a clearer understanding of how refine works and lets you test out the CRUD operation functionalities.
Now, you can access the refine application at http://localhost:3000.
You will see the output as a table populated with blog_posts and category data with filtering, sorting, and pagination features.
Next Stepsβ
π Jump to Tutorials and continue your work to turn your example project into a full-blown CRUD application! π
π Read more on Advanced Tutorials for different usage scenarios.
π See real-life examples built using refine