Refine Devtools

In addition to the features provided by the Refine Devtools, Enterprise Edition allows you to change the port of the devtools server or use a custom domain for the devtools server. This is useful if you're dockerizing your app and devtools server separately or using multiple Refine apps and want to use Refine Devtools for multiple apps.

Specifying the Port

You can be using @refinedev/cli or @refinedev/devtools-server to start the devtools server. Both of these tools will respect the REFINE_DEVTOOLS_PORT environment variable. Changing the port is as simple as setting the REFINE_DEVTOOLS_PORT environment variable to the desired port number.

REFINE_DEVTOOLS_PORT=5002 refine dev

When REFINE_DEVTOOLS_PORT is set in refine dev command, it will be automatically propagated to your App and made available as an environment variable. The environment variable will automatically be used by the <DevtoolsProvider /> component of the @refinedev/devtools to connect to the devtools server. If the environment variable is not working in the browser or you want to use a custom domain, you can manually set the URL in the <DevtoolsProvider /> component via the url prop.

App.tsx

import Refine from "@refinedev/core";
import { DevtoolsProvider, DevtoolsPanel } from "@refinedev/devtools";

const App = () => {
  return (
    <DevtoolsProvider
      url="http://refine-devtools.local"
    >
      <Refine>
        {/* ... */}
        <DevtoolsPanel />
      </Refine>
  );
};

Using Custom Domains with Docker

In this example, we'll dockerize a Refine app and Refine Devtools separately and serve them on http://my-app.local and http://devtools.local respectively. After our setup is complete, we'll use the url prop of the <DevtoolsProvider /> component to connect to the devtools server.

import { Refine } from "@refinedev/core";
import { DevtoolsProvider, DevtoolsPanel } from "@refinedev/devtools";

export default function App() {
    return (
        <DevtolsProvider
            url="http://devtools.local"
        >
            <Refine
                // ...
            >
                {/* ... */}
                <DevtoolsPanel />
            </Refine>
        </DevtolsProvider>
    )
}

Dependencies: @refinedev/core@latest,@refinedev/simple-rest@latest,@refinedev/react-router-v6@latest,react-router-dom@latest,react-router@latest

Code Files

File: /App.tsx

Content: import { Refine } from "@refinedev/core"; import { DevtoolsProvider, DevtoolsPanel } from "@refinedev/devtools"; export default function App() { return ( <DevtolsProvider url="http://devtools.local" > <Refine // ... > {/* ... */} <DevtoolsPanel /> </Refine> </DevtolsProvider> ) }

File: /package.json

Content: { "name": "my-app", "version": "1.0.0", "private": true, "type": "module", "scripts": { "dev": "refine dev --devtools false -- --host", "devtools": "refine devtools", "refine": "refine" }, "dependencies": { "@refinedev/cli": "^2.16.36", "@refinedev/core": "^4.53.0", "@refinedev/devtools": "^1.2.6" } }

File: /Dockerfile.dev

Content: # We're setting up our development server and running it on port 5173. # We'll then use Nginx to reverse proxy the requests to the correct services. # We're running the application at port 5173 and we'll access it via http://my-app.local. # Use the official Node.js image as a parent image FROM refinedev/node # Copy the package.json and package-lock.json COPY package*.json ./ # Install dependencies RUN npm install # Copy the rest of the application COPY . . # Expose the port the app runs on EXPOSE 5173 # Command to run the development server CMD ["npm", "run", "dev"]

File: /Dockerfile.devtools

Content: # We're setting up our Devtools server and running it on port 5001. # We'll then use Nginx to reverse proxy the requests to the correct services. # We're running devtools at port 5001 and we'll access it via http://devtools.local. # Use the Refine's Node.js image as a parent image FROM refinedev/node # Copy the package.json and package-lock.json COPY package*.json ./ # Install dependencies RUN npm install # Copy the rest of the application COPY . . # Expose the port the devtools server runs on EXPOSE 5001 # Command to run the devtools server CMD ["npm", "run", "devtools"]

File: /docker-compose.yml

Content: # We're setting up a development environment with two services: dev and devtools. # The dev service is the main service that runs the application. # The devtools service is the service that runs the Refine Devtools. version: "3" services: dev: build: context: . dockerfile: Dockerfile.dev volumes: - app:/app/refine - /app/refine/node_modules networks: - dev-network devtools: build: context: . dockerfile: Dockerfile.devtools volumes: - app:/app/refine - /app/refine/node_modules networks: - dev-network nginx: image: nginx:latest ports: - "80:80" volumes: - ./nginx.conf:/etc/nginx/nginx.conf networks: - dev-network networks: dev-network: driver: bridge volumes: app:

File: /nginx.conf

Content: # We're setting up a reverse proxy to map the requests to the correct services. # Then we'll add the necessary aliases to the /etc/hosts file to make the services accessible via the domain names. events { worker_connections 1024; } http { server { listen 80; server_name my-app.local; location / { proxy_pass http://dev:5173; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } server { listen 80; server_name devtools.local; location / { proxy_pass http://devtools:5001; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } }

File: /style.css

Content:

Then, we'll need to update our /etc/hosts file to point my-app.local and devtools.local to 127.0.0.1,

127.0.0.1 my-app.local
127.0.0.1 devtools.local

That's it! Now you can run your Refine app and Refine Devtools separately in Docker containers and connect to the devtools server using the custom domain. Notice that we're only changing one line in our App.tsx file to use the custom domain, rest will be handled by the @refinedev/devtools package.

Refine Devtools

Specifying the Port​

Using Custom Domains with Docker​

Code Files

Specifying the Port

Using Custom Domains with Docker