marmelab · fzaninotto · May 9, 2023 · May 4, 2023 · May 4, 2023 · May 4, 2023
diff --git a/docs/CreateReactAdmin.md b/docs/CreateReactAdmin.md
@@ -0,0 +1,25 @@
+---
+layout: default
+title: "The create-react-admin CLI"
+---
+
+# `create-react-admin`
+
+This CLI generates a new react-admin application using [Vite](https://vitejs.dev/). Use it by running the following command:
+
+```sh
+npx create react-admin@latest your-admin-name
+# or
+yarn create react-admin your-admin-name
+```
+
+It will then ask you to choose:
+- a data provider
+- a auth provider
+- the names of the resources to add
+- the package manager to use to install the dependencies
+
+<video controls autoplay muted loop>
+  <source src="./img/create-react-admin.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
diff --git a/docs/Tutorial.md b/docs/Tutorial.md
@@ -17,18 +17,24 @@ Here is an overview of the result:
 
 ## Setting Up
 
-React-admin uses React. We'll use [Vite](https://vitejs.dev/) to create an empty React app, and install the `react-admin` package:
+React-admin uses React. We'll use [create-react-admin](https://github.com/marmelab/react-admin/tree/master/packages/create-react-admin) to bootstrap a new admin:
 
 ```sh
-yarn create vite test-admin --template react-ts
-cd test-admin/
-yarn add react-admin ra-data-json-server
+yarn create react-admin test-admin
+```
+
+Choose **JSON Server** as the data provider, then **None** as the auth provider. Don't add any resource for now and just press **Enter**. Finally, choose either `npm` or `yarn` and press **Enter**. Once everything is installed, enter the following commands:
+
+```sh
+cd test-admin
+npm run dev
+# or
 yarn dev
 ```
 
-You should be up and running with an empty React application on port 5173.
+You should be up and running with an empty React admin application on port 5173.
 
-**Tip**: Although this tutorial uses a TypeScript template, you can use react-admin with JavaScript if you prefer. Also, you can use [create-react-app](./CreateReactApp.md), [Next.js](./NextJs.md), [Remix](./Remix.md), or any other React framework to create your admin app. React-admin is framework-agnostic.
+**Tip**: Although this tutorial uses a TypeScript template, you can use react-admin with JavaScript if you prefer. Also, you can use [Vite](https://vitejs.dev/), [create-react-app](./CreateReactApp.md), [Next.js](./NextJs.md), [Remix](./Remix.md), or any other React framework to create your admin app. React-admin is framework-agnostic.
 
 ## Using an API As Data Source
 
@@ -70,57 +76,10 @@ JSONPlaceholder provides endpoints for users, posts, and comments. The admin we'
 
 ## Making Contact With The API Using a Data Provider
 
-Bootstrap the admin app by replacing the `src/App.tsx` by the following code:
-
-```jsx
-// in src/App.tsx
-import { Admin } from "react-admin";
-import jsonServerProvider from "ra-data-json-server";
-
-const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
-
-const App = () => <Admin dataProvider={dataProvider} />;
-
-export default App;
-```
-
-That's enough for react-admin to render an empty app and confirm that the setup is done: 
+The application has been initialized with enough code for react-admin to render an empty app and confirm that the setup is done: 
 
 [![Empty Admin](./img/tutorial_empty.png)](./img/tutorial_empty.png)
 
-Also, you should change the default Vite CSS file to look like this:
-
-```css
-/* in src/index.css */
-body {
-    margin: 0;
-}
-```
-
-Lastly, add the `Roboto` font to the `index.html` file:
-
-```diff
-// in ./index.html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Admin</title>
-+   <link
-+     rel="stylesheet"
-+     href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-+   />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
-  </body>
-</html>
-```
-
-**Tip:** You can also install the `Roboto` font locally by following the instructions from the [Material UI starter guide](https://mui.com/material-ui/getting-started/installation/#roboto-font).
-
 The `<App>` component renders an `<Admin>` component, which is the root component of a react-admin application. This component expects a `dataProvider` prop - a function capable of fetching data from an API. Since there is no standard for data exchanges between computers, you will probably have to write a custom provider to connect react-admin to your own APIs - but we'll dive into Data Providers later. For now, let's take advantage of the `ra-data-json-server` data provider, which speaks the same REST dialect as JSONPlaceholder.
 
 Now it's time to add features!

diff --git a/docs/img/create-react-admin.webm b/docs/img/create-react-admin.webm
diff --git a/docs/navigation.html b/docs/navigation.html
@@ -2,6 +2,7 @@
   <li {% if page.path == 'Tutorial.md' %} class="active" {% endif %}><a class="nav-link" href="./Tutorial.html">Tutorial</a></li>
   <li {% if page.path == 'Features.md' %} class="active" {% endif %}><a class="nav-link" href="./Features.html">Features</a></li>
   <li><a class="nav-link external" href="https://github.com/marmelab/react-admin/releases" target="_blank">What's new?</a></li>
+  <li {% if page.path == 'CreateReactAdmin.md' %} class="active" {% endif %}><a class="nav-link" href="./CreateReactAdmin.html">Create React Admin</a></li>
   <li {% if page.path == 'CreateReactApp.md' %} class="active" {% endif %}><a class="nav-link" href="./CreateReactApp.html">Create React App</a></li>
   <li {% if page.path == 'Vite.md' %} class="active" {% endif %}><a class="nav-link" href="./Vite.html">Vite</a></li>
   <li {% if page.path == 'NextJs.md' %} class="active" {% endif %}><a class="nav-link" href="./NextJs.html">Next.js</a></li>