Skip to main content
The dev command starts your Refine application in development mode with hot module replacement (HMR).

​
Usage

refine dev [options] [args...]

​
Options

​
-p, --platform <platform>
string
Specify the platform to run the command on. The CLI auto-detects your project type, but you can override it.Choices: vite, nextjs, remix, remix-spa, remix-vite, craco
refine dev --platform vite
​
-d, --devtools <devtools>
string
default:"true"
Start Refine Devtools server alongside the dev server. Automatically enabled if devtools is installed.
refine dev --devtools false
​
args...
string[]
Additional arguments passed directly to the underlying build tool (Vite, Next.js, etc.)
refine dev --port 3000 --host

​
How It Works

The dev command:
  1. Detects your project type (Vite, Next.js, Remix, etc.)
  2. Starts the Refine Devtools server (if installed)
  3. Runs the appropriate development command for your platform
  4. Enables hot module replacement for instant updates

​
Platform-Specific Commands

The CLI runs these commands based on your project type:
  • Vite: vite dev
  • Next.js: next dev
  • Remix: remix dev
  • Craco: craco start

​
Examples

​
Basic Usage

Start the development server: 
refine dev
Output
✓ Refine Devtools server started at http://localhost:5001

  VITE v5.0.0  ready in 432 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

​
Disable Devtools

Run without the Devtools server: 
refine dev --devtools false

​
Custom Port

Specify a custom port (passed to the underlying tool): 
refine dev --port 3000

​
Expose to Network

Make the dev server accessible on your local network: 
refine dev --host
Output
  VITE v5.0.0  ready in 432 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.100:5173/

​
Next.js with Turbopack

Use Next.js experimental Turbopack: 
refine dev --turbo

​
Override Platform Detection

Force a specific platform: 
refine dev --platform nextjs

​
Devtools Integration

Refine Devtools provides:
  • Resource Inspector - View and manage your resources
  • Network Monitor - Track API requests and responses
  • Performance Metrics - Monitor your app’s performance
  • Component Tree - Visualize your component hierarchy
Access Devtools at http://localhost:5001 when running.

​
Environment Variables

The dev command sets these environment variables:
  • REFINE_DEVTOOLS_PORT - Port for the Devtools server (default: 5001)
  • Platform-specific variables based on your project type

​
Common Use Cases

​
Development with HTTPS

For Vite projects: 
refine dev --https

​
Open Browser Automatically

For Vite projects: 
refine dev --open

​
Clear Cache on Restart

For Next.js projects: 
refine dev --clean

​
Development on Specific Network Interface

refine dev --host 0.0.0.0 --port 3000

​
Package Manager Scripts

Add to your package.json:
package.json
{
  "scripts": {
    "dev": "refine dev",
    "dev:clean": "refine dev --clean",
    "dev:prod": "refine dev --devtools false"
  }
}
Run with: 
npm run dev

​
Troubleshooting

​
Port Already in Use

If port 5173 (or your default port) is occupied: 
refine dev --port 3001

​
Devtools Won’t Start

Check if Devtools is installed: 
npm list @refinedev/devtools-server
Install if missing: 
npm install @refinedev/devtools-server

​
HMR Not Working

If hot module replacement isn’t working:
  1. Clear your build cache
  2. Restart the dev server
  3. Check for errors in the console

​
Slow Startup

For faster startup on large projects:
  • Disable Devtools: refine dev --devtools false
  • Use Turbopack (Next.js): refine dev --turbo
  • Optimize Vite config

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us