-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(docs): added instructions for tauri
- Loading branch information
1 parent
be0717e
commit e4071f2
Showing
4 changed files
with
170 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| import { IconAlertTriangle } from "~/components/icons" | ||
|
|
||
| <MDXHeader title="Tauri" description="Install and configure Tauri." /> | ||
|
|
||
| <Callout variant="warning" class="mt-4"> | ||
|
|
||
| <IconAlertTriangle class="size-10" /> **Prerelease Warning** | ||
|
|
||
| This installation guide is for the prerelease version of Tauri 2.0 and is subject to change as development continues. | ||
|
|
||
| </Callout> | ||
|
|
||
| <Steps> | ||
|
|
||
| ### Create project | ||
|
|
||
| Start by creating a new Tauri project: | ||
|
|
||
| ```bash | ||
| npm create tauri-app@latest --beta | ||
| ``` | ||
|
|
||
| When asked make sure to use Solid: | ||
|
|
||
| ```txt showLineNumbers | ||
| ✔ Project name · tauri-app | ||
| ✔ Choose which language to use for your frontend · TypeScript / JavaScript | ||
| ✔ Choose your UI template · Solid | ||
| ✔ Choose your UI flavor · TypeScript | ||
| ``` | ||
|
|
||
| ### Add Tailwind and its configuration | ||
|
|
||
| Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files: | ||
|
|
||
| ```bash | ||
| npm install -D tailwindcss postcss autoprefixer | ||
| npx tailwindcss init -p | ||
| ``` | ||
|
|
||
| ### Edit tsconfig.json file | ||
|
|
||
| Add the following code to the `tsconfig.json` file to resolve paths: | ||
|
|
||
| ```ts {4-9} | ||
| { | ||
| "compilerOptions": { | ||
| // ... | ||
| "baseUrl": ".", | ||
| "paths": { | ||
| "~/*": [ | ||
| "./src/*" | ||
| ] | ||
| } | ||
| // ... | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### Update vite.config.ts | ||
|
|
||
| Add the following code to the `vite.config.ts` so your app can resolve paths without error | ||
|
|
||
| ```bash | ||
| # (so you can import "path" without error) | ||
| npm i -D @types/node | ||
| ``` | ||
|
|
||
| ```ts | ||
| import path from "path" | ||
|
|
||
| import solid from "@vitejs/plugin-solid" | ||
| import { defineConfig } from "vite" | ||
|
|
||
| export default defineConfig({ | ||
| plugins: [solid()], | ||
| resolve: { | ||
| alias: { | ||
| "~": path.resolve(__dirname, "./src") | ||
| } | ||
| } | ||
| }) | ||
| ``` | ||
|
|
||
| ### Run the CLI | ||
|
|
||
| Run the `solidui-cli` init command to setup your project: | ||
|
|
||
| ```bash | ||
| npx solidui-cli@latest init | ||
| ``` | ||
|
|
||
| ### Configure ui.config.json | ||
|
|
||
| You will be asked a few questions to configure `ui.config.json`: | ||
|
|
||
| ```txt showLineNumbers | ||
| Would you like to use TypeScript? (recommended) yes | ||
| Where is your global CSS file? src/App.css | ||
| Where is your tailwind.config.js located? tailwind.config.js | ||
| Configure the import alias for the src directory: ~/* | ||
| ``` | ||
|
|
||
| ### That's it | ||
|
|
||
| You can now start adding components to your project. | ||
|
|
||
| ```bash | ||
| npx solidui-cli@latest add button | ||
| ``` | ||
|
|
||
| The command above will add the `Button` component to your project. You can then import it like this: | ||
|
|
||
| ```tsx {1,6} showLineNumbers | ||
| import { Button } from "~/components/ui/button" | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <div> | ||
| <Button>Click me</Button> | ||
| </div> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| </Steps> | ||
|
|
||
| ## Integration into existing projects | ||
|
|
||
| If you already have a SolidStart, Vite or Astro project with solid-ui set up you can add Tauri by simply following the steps provided [here](https://tauri.app/v1/guides/getting-started/setup/integrate/). |