Skip to main content
Version: 4.xx.xx

CLI

refine CLI is a command line application that allows you to interact with your refine project and perform some tasks. This includes creating a new resource, managing updates, swizzle components, and runs your project (build, start, dev).

> npm run refine
Usage: refine <command> [options]

___ ___ ___ ___ ___
/\ \ /\ \ /\ \ ___ /\__\ /\ \
/::\ \ /::\ \ /::\ \ /\ \ /::| | /::\ \
/:/\:\ \ /:/\:\ \ /:/\:\ \ \:\ \ /:|:| | /:/\:\ \
/::\~\:\ \ /::\~\:\ \ /::\~\:\ \ /::\__\ /:/|:| |__ /::\~\:\ \
/:/\:\ \:\__\ /:/\:\ \:\__\ /:/\:\ \:\__\ __/:/\/__/ /:/ |:| /\__\ /:/\:\ \:\__\
\/_|::\/:/ / \:\~\:\ \/__/ \/__\:\ \/__/ /\/:/ / \/__|:|/:/ / \:\~\:\ \/__/
|:|::/ / \:\ \:\__\ \:\__\ \::/__/ |:/:/ / \:\ \:\__\
|:|\/__/ \:\ \/__/ \/__/ \:\__\ |::/ / \:\ \/__/
|:| | \:\__\ \/__/ /:/ / \:\__\
\|__| \/__/ \/__/ \/__/

Options:
-v, --version Output the current version.
-h, --help Output usage information.

Commands:
create-resource [options] Create a new resource files
check-updates Check all installed `refine` packages are up to date
update [options] Interactively select and update all `refine` packages to selected version. To skip the interactive mode, use the `--all` option.
dev [args...] It runs: `nextjs dev`. Also accepts all the arguments `nextjs` accepts.
build [args...] It runs: `nextjs build`. Also accepts all the arguments `nextjs` accepts.
start [args...] It runs: `nextjs start`. Also accepts all the arguments `nextjs` accepts.
run [command] [args...] Runs a defined package script. If no `command` is provided, it will list the available scripts
whoami View the details of the development environment
help [command] display help for command

Installation

CLI is automatically installed in projects created with the create fine-app command. You can use the commands immediately ๐ŸŽ‰

If you want to add it to your existing project, checkout how to add to an existing project? section.

Commandsโ€‹

swizzleโ€‹

In this command, you can swizzle the components of the refine. This allows you to customize the components and use your own components.

Why is it called swizzling?

The term comes from Objective-C and Swift-UI: method swizzling is the process of changing the implementation of an existing selector (method).

For refine, component swizzling means providing an alternative component that will be used instead of the default one.

You can think of it as Monkey Patching for React components, which allows you to change the default implementation. Gatsby has a similar feature called theme shadowing.

Thanks to the Docusaurus team for inspiring us for this feature.

Do I need to swizzle?โ€‹

refine packages provide data providers, UI frameworks, and components that make it easy to build a project. Most these are customizable and can be used as is. However, sometimes you may want to customize it as if you created it yourself. This is where swizzling comes in. Most of refine packages provide a swizzle command that ejects the files to your project. You can then customize them as you wish.

Usageโ€‹

Let's create a new component by swizzling the Layout components.

> npm run refine swizzle

? Which package do you want to swizzle? (Use arrow keys or type to search)

Data Provider
โ—ฏ @refinedev/simple-rest
UI Framework
โ—‰ @refinedev/antd

First, you need to select the package you want to swizzle. In this example, we will swizzle the @refinedev/antd package.

info

refine CLI will only show the packages that are installed in your project.

? Which component do you want to swizzle?

โ—ฏ TagField
โ—ฏ TextField
โ—ฏ UrlField
Other
โ—ฏ Breadcrumb
โฏโ—‰ Layout
Pages
โ—ฏ ErrorPage
โ—ฏ AuthPage
(Move up and down to reveal more choices)

Then, you need to select the component you want to swizzle. In this example, we will swizzle the Layout component.

Successfully swizzled Layout
Files created:
- src/components/layout/sider.tsx
- src/components/layout/header.tsx
- src/components/layout/title.tsx
- src/components/layout/index.tsx

Warning:
If you want to change the default layout;
You should wrap your pages with layout/index.tsx inside <Refine>
component.

โ•ญ App.tsx โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ
โ”‚ โ”‚
โ”‚ import { Layout } from "components/layout"; โ”‚
โ”‚ โ”‚
โ”‚ const App = () => { โ”‚
โ”‚ return ( โ”‚
โ”‚ <Refine โ”‚
โ”‚ /* ... */ โ”‚
โ”‚ > โ”‚
โ”‚ <Layout> โ”‚
โ”‚ {/* ... */} โ”‚
โ”‚ <Layout> โ”‚
โ”‚ </Refine> โ”‚
โ”‚ ); โ”‚
โ”‚ } โ”‚
โ”‚ โ”‚
โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ

Finally, the swizzle command will create a new folder in the src/components/layout directory and generate the layout components of the @refinedev/antd package in it.

info

refine CLI determines the path to create a new folder according to the framework you are using. For example, if you are using the remix, the path will be app/components/layout.

caution

If there is already a file with the same name in the directory, the swizzle command will not overwrite it.

create-resourceโ€‹

Use this command to add a new resource to your project. CRUD components are created for the selected actions. These components are put on the specified path. The folder name here becomes plural.

> npm run refine create-resource
ArgumentDescription
resourceName (optinal)The name of the resource you want to add.

Optionsโ€‹

AliasOptionDefaultDescription
-a--actionslist,create,edit,showOnly generate the specified actions.
-p--pathreact: src/pages next.js: src/components remix: app/componentsThe path to create source files. (It is created automatically according to the framework.)
-h--helpOutput usage information

Usage Examplesโ€‹

Let's create a Category resource with all the actions.

> npm run refine create-resource category

src/pages/
โ””โ”€โ”€ categories
โ”œโ”€โ”€ create.tsx
โ”œโ”€โ”€ edit.tsx
โ”œโ”€โ”€ index.ts
โ”œโ”€โ”€ list.tsx
โ””โ”€โ”€ show.tsx

If we only want to use list and create actions, it should be like this.

> npm run refine create-resource category -- --actions list,create

src/pages/
โ””โ”€โ”€ categories
โ”œโ”€โ”€ create.tsx
โ”œโ”€โ”€ index.ts
โ””โ”€โ”€ list.tsx

If we want to create these files in another path, use the --path option.

> npm run refine create-resource category -- --path src/resources --actions list,create

src/resources/
โ””โ”€โ”€ categories
โ”œโ”€โ”€ create.tsx
โ”œโ”€โ”€ index.ts
โ””โ”€โ”€ list.tsx

You can also create multiple resources at the same time. For this, you can write the sources by separating them with a space.

> npm run refine create-resource category user -- --actions list,create

src/pages/
โ”œโ”€โ”€ categories
โ”‚ย ย  โ”œโ”€โ”€ create.tsx
โ”‚ย ย  โ”œโ”€โ”€ index.ts
โ”‚ย ย  โ””โ”€โ”€ list.tsx
โ””โ”€โ”€ users
โ”œโ”€โ”€ create.tsx
โ”œโ”€โ”€ index.ts
โ””โ”€โ”€ list.tsx

updateโ€‹

Interactively update your outdated refine packages. To skip interactive mode, use the --all flag to update all outdated refine packages to selected tag.

> npm run refine update

? Choose packages to update (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)

Package From To

Patch Updates
โ—ฏ @refinedev/cli 1.5.1 -> 1.5.3

Minor Updates
โ—ฏ @refinedev/airtable 2.1.1 -> 2.7.8
โ—‰ @refinedev/core 3.88.1 -> 3.90.4
โ—ฏ @refinedev/react-hook-form 3.31.0 -> 3.33.2
โ—ฏ @refinedev/simple-rest 2.6.0 -> 2.7.8
โฏโ—‰ @refinedev/strapi 3.18.0 -> 3.37.0

Major Updates
โ—ฏ @refinedev/airtable 2.1.1 -> 3.33.0
โ—ฏ @refinedev/simple-rest 2.6.0 -> 3.35.2

Optionsโ€‹

OptionAliasDescriptionValuesDefault
--tag-tSelect version to update to.latest, nextVersion ranges in the package.json will be installed.
--all-aUse to skip interactive mode update and update all refine packages to the selected tag.false Interactive mode will be open.
--dry-run-dUse to skip automatic installation. Prints the update command of the packages.false Selected packages will be installed automatically.

check-updatesโ€‹

Show the running versions of the installed refine packages.

> npm run refine check-updates
Update Available
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚ name โ”‚ current โ”‚ wanted โ”‚ latest โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚ @refinedev/airtable โ”‚ 2.1.1 โ”‚ 2.7.8 โ”‚ 3.33.0 โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚ @refinedev/cli โ”‚ 1.5.1 โ”‚ 1.5.3 โ”‚ 1.5.3 โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚ @refinedev/core โ”‚ 3.88.1 โ”‚ 3.90.4 โ”‚ 3.90.4 โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚ @refinedev/react-hook-form โ”‚ 3.31.0 โ”‚ 3.33.2 โ”‚ 3.33.2 โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚ @refinedev/simple-rest โ”‚ 2.6.0 โ”‚ 2.7.8 โ”‚ 3.35.2 โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚ @refinedev/strapi โ”‚ 3.18.0 โ”‚ 3.37.0 โ”‚ 3.37.0 โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
To update `refine` packages with the wanted version
Run the following command npm run refine update

dev, start, buildโ€‹

When you run npm run refine [dev | start | build] It will detect the framework you are using and run the commands accordingly.

Also you can pass environment variables, and all the options that are available in the framework. For example, you can run npm run refine dev --port 3001 to run the app on port 3001.

 # Starts application in development mode. Equivalent to `react-scripts start` or `vite`.
npm run refine dev
# Creates a production build of your app. Equivalent to `react-scripts build` or `vite build`.
npm run refine build

Refer to the Create React App documentation for detailed usage. โ†’

Refer to the Vite documentation for detailed usage. โ†’

runโ€‹

Runs a custom script in the context of your refine project. Also It will pass all the arguments to the script.

First it will check package.json to see if there is a script with the given name. If there is, it will run that script. Otherwise, it will run in node_modules/.bin.

With this way you can run unsupported commands via refine.

npm run refine run react-app-rewired start

whoamiโ€‹

View the details of the development environment.

> npm run refine whoami

## System:
- OS: macOS 13.0
- CPU: (8) arm64 Apple M1 Pro
## Binaries:
- Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
- Yarn: 1.22.17 - /opt/homebrew/bin/yarn
- npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
## Browsers:
- Chrome: 107.0.5304.121
- Firefox: 106.0.3
- Safari: 16.1

## Refine Packages:
- @refinedev/airtable: 2.1.1
- @refinedev/antd: 3.62.0
- @refinedev/cli: 1.5.1
- @refinedev/core: 3.88.1
- @refinedev/react-hook-form: 3.31.0
- @refinedev/simple-rest: 2.6.0
- @refinedev/strapi: 3.18.0

How to add to an existing project?โ€‹

If you want to add the @refinedev/cli to your existing project, you have to add it to your project's dependencies.

npm i @refinedev/cli

Then add the refine command to your scripts in your package.json file

package.json
{
"scripts": {
+ "refine": "refine"
}
}

Hooray!

> npm run refine
Usage: refine <command> [options]

___ ___ ___ ___ ___
/\ \ /\ \ /\ \ ___ /\__\ /\ \
/::\ \ /::\ \ /::\ \ /\ \ /::| | /::\ \
/:/\:\ \ /:/\:\ \ /:/\:\ \ \:\ \ /:|:| | /:/\:\ \
/::\~\:\ \ /::\~\:\ \ /::\~\:\ \ /::\__\ /:/|:| |__ /::\~\:\ \
/:/\:\ \:\__\ /:/\:\ \:\__\ /:/\:\ \:\__\ __/:/\/__/ /:/ |:| /\__\ /:/\:\ \:\__\
\/_|::\/:/ / \:\~\:\ \/__/ \/__\:\ \/__/ /\/:/ / \/__|:|/:/ / \:\~\:\ \/__/
|:|::/ / \:\ \:\__\ \:\__\ \::/__/ |:/:/ / \:\ \:\__\
|:|\/__/ \:\ \/__/ \/__/ \:\__\ |::/ / \:\ \/__/
|:| | \:\__\ \/__/ /:/ / \:\__\
\|__| \/__/ \/__/ \/__/

Options:
-v, --version Output the current version.
-h, --help Output usage information.

Commands:
create-resource [options] Create a new resource files
check-updates Check all installed `refine` packages are up to date
update [options] Interactively select and update all `refine` packages to selected version. To skip the interactive mode, use the `--all` option.
dev [args...] It runs: `nextjs dev`. Also accepts all the arguments `nextjs` accepts.
build [args...] It runs: `nextjs build`. Also accepts all the arguments `nextjs` accepts.
start [args...] It runs: `nextjs start`. Also accepts all the arguments `nextjs` accepts.
run [command] [args...] Runs a defined package script. If no `command` is provided, it will list the available scripts
whoami View the details of the development environment
help [command] display help for command

You can optionally modify your scripts in package.json with refine CLI commands. The benefit it will provide you is that it gives warnings to keep your refine packages always up to date.

package.json
{
"scripts": {
- "dev": "react-scripts start",
- "build": "react-scripts build",
+ "dev": "refine start",
+ "build": "refine build",
}
}