Your First Refine App

To follow this tutorial along, you can use the starter templates provided by create-refine-app. The following command will create a new empty project for you with @refinedev/core and @refinedev/cli packages, providing everything needed to get started with the tutorial.

npm create refine-app@latest -- --example starter-vite

We'll need to create our app using the appropriate templates. Then, we'll move on to installing the Refine dependencies and configuring the app.

npm create vite@latest my-refine-app -- --template react-ts

To learn more about Vite and project creation, you can visit Vite's documentation.

After we've created our project, we'll need to install the Refine dependencies.

npm install @refinedev/core @refinedev/cli

We're installing @refinedev/core which provides all the core functionalities of Refine and @refinedev/cli which although optional, provides a lot of useful features for the development process. To learn more about @refinedev/cli, you can visit its documentation.

Configuring the Scripts​

We'll replace our dev, build and serve scripts with the following:

{
  "scripts": {
    "dev": "refine dev",
    "build": "refine build",
    "serve": "refine serve"
  }
}

While refine's runner commands will use the same commands as the ones provided by the bundler, it will provide some useful features such as version checks for the dependencies and announcements from Refine team.

Configuring the App​

We'll need to mount <Refine /> component to our app. We'll mount it to the root of our app.

import { Refine, WelcomePage } from "@refinedev/core";

function App() {
  return (
    <Refine>
      <WelcomePage />
    </Refine>
  );
}

export default App;

We're not really doing anything special here. We're just mounting the <Refine /> component to our app. <Refine /> component is the core component of Refine and it provides all the necessary context and logic for the app to work.

The <WelcomePage /> component is a component that is provided by @refinedev/core and it is a simple page that welcomes you to Refine. You can remove it if you want.

This will be enough to get our app up and running. We can now start our app using the following command:

npm run dev

When you open your browser and navigate to localhost, you should the page at right. If everything is working as expected, move on to the next section.