Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc] Rewrite create-react-admin documentation #10566

Merged
merged 3 commits into from
Mar 5, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 79 additions & 10 deletions docs/CreateReactAdmin.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,38 @@ title: "The create-react-admin CLI"

# `create-react-admin`

`create-react-admin` is a package that generates a react-admin app scaffolding using [Vite](https://vitejs.dev/). It is designed to work on most setups and produces predictable and consistent results. It's the preferred way to create a new react-admin application.
Use `create-react-admin` to quickly bootstrap a react-admin project using [Vite](https://vitejs.dev/). It's the preferred way to create a new react-admin application.

<iframe src="https://www.youtube-nocookie.com/embed/i_TbS7quzww" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="aspect-ratio: 16 / 9;width:100%;margin-bottom:1em;"></iframe>

## Usage

Use it by running the following command:

```sh
npx create-react-admin@latest your-admin-name
# or
yarn create react-admin your-admin-name
```

The terminal will then ask you to choose:
- a data provider
- an auth provider
- the names of the resources to add
- the package manager to use to install the dependencies
This will create an empty react-admin application in a directory called `your-admin-name`.

**Tip**: You can replace `npx` with `npm`, `yarn`, or `bun`

## Options

The command accepts the following options:

* `--interactive`: Enable the CLI interactive mode
* `--data-provider`: Set the data provider to use ("data-fakerest", "data-simple-rest", "data-json-server", "supabase" or "none")
* `--auth-provider`: Set the auth provider to use ("local-auth-provider" or "none")
* `--resource`: Add a resource that will be initialized with guessers (can be used multiple times). Set to "skip" to bypass the interactive resource step.
* `--install`: Set the package manager to use for installing dependencies ("yarn", "npm", "bun" or "skip" to bypass the interactive install step)

## `--interactive`

When using this option, the terminal will ask you to choose:

* a [data provider](#data-provider)
* an [auth provider](#auth-provider)
* the names of the [resources](#resources) to add
* the [package manager](#package-manager) to use to install the dependencies

<video controls autoplay playsinline muted loop>
<source src="./img/create-react-admin.webm" type="video/webm"/>
Expand All @@ -39,4 +52,60 @@ Once the installation is complete, you can run the app with:
npm run dev
# or
yarn dev
# or
bun run dev
```

## `--data-provider`

`create-react-admin` currently supports five presets for the application's data provider:

* `fakerest`: A client-side data provider that use a JSON object for data, powered by [FakeRest](https://github.com/marmelab/FakeRest).
* `json-server`: A data provider based on the [JSON Server](https://github.com/typicode/json-server) API
* `simple-rest`: A data provider for [simple REST APIs](https://github.com/marmelab/react-admin/tree/master/packages/ra-data-simple-rest)
* `supabase`: A data provider for [Supabase](https://github.com/marmelab/ra-supabase/tree/main/packages/ra-supabase). The auth-provider and resources steps will be skipped.
* `none` (default): You'll configure the data provider myself.

You can set your data provider directly with the `--data-provider` option:

```sh
npx create-react-admin@latest your-admin-name --data-provider json-server
```

## `--auth-provider`

`create-react-admin` currently supports two presets to set the application's auth provider which are:

* `local-auth-provider`: Hard coded username/password.
* `none` (default): No authProvider.

You can set your auth provider directly with the `--auth-provider` option:

```sh
npx create-react-admin@latest your-admin-name --auth-provider local-auth-provider
```

## `--resource`

`create-react-admin` creates an empty app by default. You can initialize CRUD pages for some resources with the `--resource` option:

```sh
npx create-react-admin@latest your-admin-name --resource posts --resource comments
```

**Warning:** the `--resource` flag is incompatible with a `--data-provider supabase` due to a specific [`<AdminGuesser>` component](https://github.com/marmelab/ra-supabase/tree/main/packages/ra-supabase#usage) from `ra-supabase`.

## `--install`

`create-react-admin` can install dependencies using any of the following package managers:

* `npm` (default)
* `yarn`
* `bun`
* `none` (if you want to install dependencies yourself)

You choose an alternative package manager with the `--install` option:

```sh
npx create-react-admin@latest your-admin-name --install bun
```
4 changes: 4 additions & 0 deletions packages/create-react-admin/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@ A CLI to bootstrap a new react-admin application.
```sh
npm create react-admin@latest my-app
# or
npx create react-admin@latest my-app
# or
yarn create react-admin my-app
# or
bun create react-admin my-app
```

You'll be asked to choose a data provider (optional), an auth provider (optional). You may also setup the resources you want initially.
Expand Down
Loading