From d27e3a984bc482c2927a9a56baa07dfdab4a7c55 Mon Sep 17 00:00:00 2001
From: Bharat Kashyap <bharatkashyap@outlook.com>
Date: Tue, 11 Feb 2025 23:11:51 -0800
Subject: [PATCH] [docs] Improve outdated installation instructions (#4633)

---
 .../toolpad/core/introduction/installation.md | 67 +++++++++++++------
 1 file changed, 47 insertions(+), 20 deletions(-)

diff --git a/docs/data/toolpad/core/introduction/installation.md b/docs/data/toolpad/core/introduction/installation.md
index a53251c4146..64cf7873af3 100644
--- a/docs/data/toolpad/core/introduction/installation.md
+++ b/docs/data/toolpad/core/introduction/installation.md
@@ -64,7 +64,7 @@ yarn create toolpad-app
 
 </codeblock>
 
-2. Follow the instructions presented. Once the installation ends, run:
+2. You will be asked to choose amongst your preferred frameworks (Next.js/Vite), routers and authentication providers. Once the installation ends, run:
 
 <codeblock storageKey="package-manager">
 
@@ -87,28 +87,55 @@ yarn dev
 
 3. Visit **http://localhost:3000/** in your browser to open the application.
 
-4. The CLI bootstraps the following directory:
+4. A sample directory structure with the Next.js App router will look like this:
 
-   ```bash
-    ├── app
-    │ ├── auth
-    │ ├──── [...path]
-    │ └────── page.tsx
-    │ ├── api
-    │ ├──── auth
-    │ ├────── [...nextAuth]
-    │ └───────── route.tsx
-    │ ├── (dashboard)
-    | ├──── layout.tsx
-    │ ├──── page
-    │ └────── page.tsx
-    ├──── layout.tsx
-    └──── page.tsx
+   **Without Authentication:**
 
+   ```bash
+   ├── app
+   │   ├── (dashboard)
+   │   │   ├── layout.tsx
+   │   │   ├── page.tsx
+   │   │   └── orders
+   │   │       └── page.tsx
+   │   └── layout.tsx
+   ├── .env
+   ├── .env.local
+   ├── .eslintrc.json
+   ├── .gitignore
+   ├── next.config.js
+   ├── package.json
+   ├── README.md
+   └── tsconfig.json
    ```
 
-   and the following page appears when you run the project locally:
+   **With Authentication:**
+
+   ```bash
+   ├── app
+   │   ├── auth
+   │   │   └── signin
+   │   │       └── page.tsx
+   │   ├── api
+   │   │   └── auth
+   │   │       └── [...nextauth]
+   │   │           └── route.ts
+   │   ├── (dashboard)
+   │   │   ├── layout.tsx
+   │   │   ├── page.tsx
+   │   │   └── orders
+   │   │       └── page.tsx
+   │   └── layout.tsx
+   ├── .env
+   ├── .env.local
+   ├── .eslintrc.json
+   ├── .gitignore
+   ├── next.config.js
+   ├── package.json
+   ├── README.md
+   └── tsconfig.json
+   ```
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/bootstrap.png", "srcDark": "/static/toolpad/docs/core/bootstrap-dark.png","alt": "Toolpad Core entry point", "caption": "Starting with Toolpad Core", "zoom": true, "indent": 1 }}
+5. Installation is complete! Begin building your project by making edits to `(dashboard)/page.tsx`. To understand how to leverage Toolpad Core to build dashboards quickly, [see the detailed tutorial](/toolpad/core/introduction/tutorial/).
 
-5. Installation is complete! Begin building your project by making edits to `(dashboard)/page/page.tsx`. To understand how to leverage Toolpad Core to build dashboards quickly, [see the detailed tutorial](/toolpad/core/introduction/tutorial/).
+6. If you selected authentication, you will need to provide values to the `.env` files that have been created. See more information on the [usage with authentication libraries section](https://mui.com/toolpad/core/react-sign-in-page/#usage-with-authentication-libraries).