This repo is a demo of integrating an Astro project with Tauri. Make sure you have npm (or some other node package manager) and the tauri prerequisites setup.
If you cloned from the template I would recommend:
- Going into
./src-tauri/tauri.conf.jsonand changing theproductName,identifier, andtitlefields to whatever your project is called - Going into
package.jsonand update thenamefield to whatever your project is called - Keep in mind I probably won't update this repository much, so you may also want to run
npx @astrojs/upgradeto update astroJS. I couldn't find an auto-update for tauri, the version as of making this repo is2.8.5, so you'll need to check the tauri docs for how to update if you need to
Then you can start developing by running npm i, then run npx tauri dev.
If you want to recreate this repo from scratch, here are the steps I followed
npm create astro@latest
Full output
~/astro-tauri> npm create astro@latest
> npx
> create-astro
astro Launch sequence initiated.
dir Where should we create your new project?
./demo
tmpl How would you like to start your new project?
A basic, helpful starter project
deps Install dependencies?
Yes
git Initialize a new git repository?
No
◼ Sounds good! You can always run git init manually.
✔ Project initialized!
■ Template copied
■ Dependencies installed
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./demo
Run npm run dev to start the dev server. CTRL+C to stop.
Add frameworks like react or tailwind using astro add.
Stuck? Join us at https://astro.build/chatI created my astro project at ./demo so I need to move the files from there to the root directory (.):
Windows (powershell)
Move-Item -Path .\demo\* -Destination .; Remove-Item -Path .\demo -Recurse -ForceLinux/macos (bash/zsh)
mv ./demo/* . && rm -rf ./demoOnce in the root directory run:
npm add -d @tauri-apps/cli@latest
Then:
npx tauri init
Full output
~/astro-tauri> npx tauri init
✔ What is your app name? · demo
✔ What should the window title be? · demo
? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that w✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../dist
✔ What is the url of your dev server? · http://localhost:4321
✔ What is your frontend dev command? · npm run dev
✔ What is your frontend build command? · npm run buildName it whatever you want but make sure you add these answers to the other questions:
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../dist
✔ What is the url of your dev server? · http://localhost:4321
✔ What is your frontend dev command? · npm run dev
✔ What is your frontend build command? · npm run build
I would recommend copying the content of ./src-tauri/.gitignore to ./gitignore with /src-tauri appended so you don't commit a bunch of extra files you don't need. For example:
# Generated by Cargo
# will have compiled files and executables
/src-tauri/target/
/src-tauri/gen/schemas
You can then run the project using:
npx tauri dev
The folder structure is pretty simple, everything at the top level is just the astro basics setup, and /src-tauri is the tauri integration with all the normal defaults.