diff --git a/src/content/docs/guides/create/index.mdx b/src/content/docs/guides/create/index.mdx index b36f565cd8..4b53c33e69 100644 --- a/src/content/docs/guides/create/index.mdx +++ b/src/content/docs/guides/create/index.mdx @@ -2,13 +2,16 @@ title: Create a Project --- -import { Card } from '@astrojs/starlight/components'; +import { Card, Steps } from '@astrojs/starlight/components'; import Stub from '@components/Stub.astro'; +import Cta from '../../_fragments/cta.mdx'; +import CommandTabs from '@components/CommandTabs.astro'; -- Create a new app using `create-tauri-app` -- Manually create the app using the Tauri CLI +{/* - Create a new app using `create-tauri-app` */} +{/* - Manually create the app using the Tauri CLI */} + - Add mobile to an existing project (revise what's here [integrate mobile](/guides/create/mobile)) - Frontend framework-specific guides (right now limiting to React, Angular, Vue, Svelte, and Solid) @@ -24,8 +27,6 @@ Alternatively, you can [add Tauri to an existing project](/guides/create/existin To get started using `create-tauri-app` run one of the below commands in the folder you'd like to setup your project. If you're not sure which command to use we recommend the Bash command on Linux and macOS and the PowerShell command on Windows. -import Cta from '../../_fragments/cta.mdx'; - Follow along with the prompts to choose your project name, frontend language, package manager, and frontend framework, and frontend framework options if applicable. @@ -45,8 +46,6 @@ We recommend starting with the vanilla template (HTML, CSS, and JavaScript witho After `create-tauri-app` has complete you can navigate into your project's folder, install dependencies, then use the [Tauri CLI](/references/v2/cli) to start the development server: -import CommandTabs from '@components/CommandTabs.astro'; - + + 2. Create a new directory for your project and initialize a your app. You can use any frontend framework you prefer, such as Next.js, Nuxt, Svelte, Yew, Leptos, or just plain HTML, CSS, and JavaScript. + + + + 3. In your project directory, initialize Tauri: + + ```bash + tauri init + ``` + + After running the command it will display a prompt asking you for different options. Here you have an example: + + ```md + ✔ What is your app name? my-tauri-app + ✔ What should the window title be? my-tauri-app + ✔ Where are your web assets (HTML/CSS/JS) located, relative to the "/src-tauri/tauri.conf.json" file that will be created? ../build + ✔ What is the url of your dev server? http://localhost:3000 + ✔ What is your frontend dev command? pnpm run dev + ✔ What is your frontend build command? pnpm run build + ``` + + :::tip + Make sure that the url of the dev server is the same as the one you use to run your frontend app. + ::: + + This will create a `src-tauri` directory in your project with the necessary Tauri configuration files. + + 4. Develop your frontend application as you would normally. Tauri acts as a backend, so your main focus will be on the web technologies. + + 5. Edit `src-tauri/tauri.conf.json` to configure Tauri. You can set application window size, permissions, and other settings here. + + 6. Verify your Tauri app is working by running the development server: + + + + This command will compile the Rust code and open a window with your web content. + + + +**Congratulations!** You've created a new Tauri project using the Tauri CLI! 🚀 + ## Next Steps - [Add and Configure a Frontend Framework](/guides/frontend)