Skip to content

QU-UP/astro-tauri

Repository files navigation

Astro-Tauri

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.

Use as template

If you cloned from the template I would recommend:

  1. Going into ./src-tauri/tauri.conf.json and changing the productName, identifier, and title fields to whatever your project is called
  2. Going into package.json and update the name field to whatever your project is called
  3. Keep in mind I probably won't update this repository much, so you may also want to run npx @astrojs/upgrade to update astroJS. I couldn't find an auto-update for tauri, the version as of making this repo is 2.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.

Recreate from scratch

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/chat

I 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 -Force
Linux/macos (bash/zsh)
mv ./demo/* . && rm -rf ./demo

Once 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 build

Name 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

Folder Structure

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.

About

A simple template that integrates AstroJS and Tauri

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published