Vite Integration

Vite is a JavaScript bundler which improves speed of dev server and production build compared to Webpack.

Setting Up React App with Vite

Create a new Vite project with React template using the command line:

yarn create vite my-admin --template react

We recommend using the TypeScript template:

yarn create vite my-admin --template react-ts

Setting Up React-Admin

Add the react-admin package, as well as a data provider package. In this example, we’ll use ra-data-json-server to connect to a test API provided by JSONPlaceholder.

cd my-admin
yarn add react-admin ra-data-json-server

Next, create the admin app component in src/admin/index.tsx:

// in src/admin/index.tsx
import { Admin, Resource, ListGuesser } from "react-admin";
import jsonServerProvider from "ra-data-json-server";

const dataProvider = jsonServerProvider("");

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="posts" list={ListGuesser} />
    <Resource name="comments" list={ListGuesser} />

export default App;

This is a minimal admin for 2 resources. React-admin should be able to render a list of posts and a list of comments, guessing the data structure from the API response.

Next, replace the App.tsx component with the following:

import MyAdmin from "./admin";

const App = () => <MyAdmin />;

export default App;

Then, change the index.css file to look like this:

/* in src/index.css */
body {
    margin: 0;

Finally, add the Roboto font to your index.html file:

// in ./index.html
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Admin</title>
+   <link
+     rel="stylesheet"
+     href=",400,500,700&display=swap"
+   />
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>

Now, start the server with yarn dev, browse to http://localhost:5173/, and you should see the working admin:

Working Page

Your app is now up and running, you can start tweaking it.