Setting up Remix Development Tools

​

Installation

Adding Remix Development Tools to your project is easy. First install it into your project by running:

npm install remix-development-tools -D

This will install it as a dev dependency in your project.

​

Enabling the tools

After you have installed the tools, you need to go to your vite.config.ts file which will probably look something like this:

import { vitePlugin as remix } from '@remix-run/dev'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [remix(), tsconfigPaths()],
}) 

All you have to do is add the plugin into the plugins array in your vite.config.ts file.

import { vitePlugin as remix } from '@remix-run/dev'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
+import { remixDevTools } from "remix-development-tools";

export default defineConfig({
-  plugins: [remix(), tsconfigPaths()], 
+  plugins: [remixDevTools(), remix(), tsconfigPaths()],
}) 

That's it!

You should now see the Remix Development Tools in your browser when you run your app.