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 Browser-based Scaffolder and CLI-based Scaffolder.
Choose one of the methods below to bootstrap a Refine app:
- With Browser-based
- With CLI-based
This is an efficient tool that allows you to create Refine app seamlessly in your browser.
You can choose the libraries and frameworks you want to work with, and the tool will generate a boilerplate code for you.
- Navigate to scaffolder 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