Skip to content
Internal toolNode.js

Internal Tool (React Admin)

Vite + react-admin back-office: list/edit/show screens generated from a REST API in minutes.

Open in builder →

8 steps

Shell

Shown with defaults: npm, pip, Node LTS, Python 3.12 and the template's default add-ons.

  1. 1. Install and select Node.js with nvm

    runtime

    nvm lets you install several Node.js versions side by side and switch per project. `nvm use` activates it for this shell.

    bash
    nvm install --ltsnvm use --lts
    Expected result
    `node -v` prints the selected version.
    Verify
    node -v && npm -v
    OS notes
    macOS/Linux/WSL: install nvm with `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.8/install.sh | bash`, then reopen the terminal. Windows: use nvm-windows (github.com/coreybutler/nvm-windows) from an elevated terminal, or fnm.

  2. 2. Scaffold a Vite + React app

    template

    create-vite copies the React template. --no-interactive skips prompts; the extra '--' is required by npm to forward flags.

    bash
    npm create vite@latest nvx-backoffice -- --template react-ts --no-interactive
    Expected result
    A ./nvx-backoffice folder with index.html, src/ and package.json.
    Verify
    ls nvx-backoffice/src
    OS notes
    create-vite 9 needs Node.js 20.19+ or 22.12+.

  3. 3. Enter the project folder

    template

    The scaffolder created ./nvx-backoffice. Move into it before installing anything else.

    bash
    cd nvx-backoffice
    Expected result
    You are inside ./nvx-backoffice
    Verify
    ls package.json

  4. 4. Install dependencies

    template

    Download every package listed in package.json into node_modules.

    bash
    npm install
    Expected result
    node_modules/ exists and a lockfile is created.
    Verify
    ls node_modules

  5. 5. Install react-admin and a data provider

    template

    ra-data-json-server talks to any json-server-style REST API.

    bash
    npm install react-admin ra-data-json-server
    Expected result
    react-admin in dependencies.
    Verify
    npm ls react-admin

  6. 6. Write the admin app

    template

    Guessers inspect the API response and generate screens; replace them with custom components later.

    Files written by this step: src/App.tsx, src/index.css
    src/App.tsx
    import { Admin, EditGuesser, ListGuesser, Resource, ShowGuesser } from "react-admin";
import jsonServerProvider from "ra-data-json-server";

// Demo REST backend. Point this at your own API (or swap the data provider).
const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

export default function App() {
  return (
    <Admin dataProvider={dataProvider} title="nvx-backoffice">
      <Resource name="users" list={ListGuesser} edit={EditGuesser} show={ShowGuesser} recordRepresentation="name" />
      <Resource name="posts" list={ListGuesser} edit={EditGuesser} show={ShowGuesser} />
      <Resource name="todos" list={ListGuesser} />
    </Admin>
  );
}
    src/index.css
    body { margin: 0; }
    Expected result
    src/App renders <Admin>.

  7. 7. Start the admin

    templaterun manually · dev server

    Open the URL and browse Users, Posts and Todos.

    bash
    npm run dev
    Expected result
    http://localhost:5173 shows the react-admin layout.
    Verify
    curl -I http://localhost:5173

  8. 8. Build for production

    template

    Static output in dist/ — host it behind your company SSO.

    bash
    npm run build
    Expected result
    dist/ is created.
    Verify
    ls dist