feat: manual setup guide (#2177)

src/content/docs/start/create-project.mdx

@@ -7,7 +7,7 @@ sidebar:
     variant: caution
 ---
 
-import { Card } from '@astrojs/starlight/components';
+import { Card, Steps } from '@astrojs/starlight/components';
 
 import Cta from '@fragments/cta.mdx';
 
@@ -43,16 +43,16 @@ After `create-tauri-app` has complete you can navigate into your project's folde
 import CommandTabs from '@components/CommandTabs.astro';
 
 <CommandTabs
-            npm="cd my-tauri-app
+            npm="cd tauri-app
     npm install
     npm run tauri dev"
-            yarn="cd my-tauri-app
+            yarn="cd tauri-app
     yarn install
     yarn tauri dev"
-            pnpm="cd my-tauri-app
+            pnpm="cd tauri-app
     pnpm install
     pnpm tauri dev"
-            cargo="cd my-tauri-app
+            cargo="cd tauri-app
     cargo tauri dev"
 />
 
@@ -60,15 +60,81 @@ You'll now see a new window open with your app running.
 
 **Congratulations!** You've made your Tauri app! 🚀
 
+## Manual Setup (Tauri CLI)
+
+If you already have an existing frontend or prefer to set it up yourself, you can use the Tauri CLI to initialize the backend for your project separately.
+
+:::note
+The following example assumes you are creating a new project. If you've already initialized the frontend of your application, you can skip the first step.
+:::
+
+<Steps>
+
+    1. Create a new directory for your project and initialize the frontend. You can use plain HTML, CSS, and JavaScript, or any framework you prefer such as Next.js, Nuxt, Svelte, Yew, or Leptos. You just need a way of serving the app in your browser. Just as an example, this is how you would setup a simple Vite app:
+
+        <CommandTabs
+            npm="mkdir tauri-app
+                cd tauri-app
+                npm create vite@latest ."
+            yarn="mkdir tauri-app
+                cd tauri-app
+                yarn create vite ."
+            pnpm="mkdir tauri-app
+                cd tauri-app
+                pnpm create vite ."
+        />
+
+    2. Then, install Tauri's CLI tool using your package manager of choice. If you are using `cargo` to install the Tauri CLI, you will have to install it globally.
+
+        <CommandTabs
+            npm="npm install -D @tauri-apps/cli@next"
+            yarn="yarn add -D @tauri-apps/cli@next"
+            pnpm="pnpm add -D @tauri-apps/cli@next"
+            cargo="cargo install tauri-cli@^2.0.0-beta"
+        />
+
+    3. Determine the URL of your frontend development server. This is the URL that Tauri will use to load your content. For example, if you are using Vite, the default URL is `http://localhost:5173`.
+
+    4. In your project directory, initialize Tauri:
+
+        <CommandTabs
+            npm="npx tauri init"
+            yarn="yarn tauri init"
+            pnpm="pnpm tauri init"
+            cargo="tauri init"
+        />
+
+        After running the command it will display a prompt asking you for different options:
+
+        ```sh frame=none
+        ✔ What is your app name? tauri-app
+        ✔ What should the window title be? tauri-app
+        ✔ Where are your web assets located? ..
+        ✔ What is the url of your dev server? http://localhost:5173
+        ✔ What is your frontend dev command? pnpm run dev
+        ✔ What is your frontend build command? pnpm run build
+        ```
+
+        This will create a `src-tauri` directory in your project with the necessary Tauri configuration files.
+
+    5. Verify your Tauri app is working by running the development server:
+
+        <CommandTabs
+            npm="npx tauri dev"
+            yarn="yarn tauri dev"
+            pnpm="pnpm tauri dev"
+            cargo="cargo tauri dev"
+        />
+
+        This command will compile the Rust code and open a window with your web content.
+
+</Steps>
+
+**Congratulations!** You've created a new Tauri project using the Tauri CLI! 🚀
+
 ## Next Steps
 
 - [Add and Configure a Frontend Framework](/start/frontend/)
 - [Tauri Command Line Interface (CLI) Reference](/reference/cli)
 - [Learn how to build your Tauri app](/develop)
 - [Discover additional features to extend Tauri](/plugin)
-
-<Card title="Additional Resources" icon="document">
-
-List to best practices, blog posts, etc.
-
-</Card>