feat: add astro template

dotcarmen · dotcarmen · commit f6695b0c04e8 · 2025-05-14T18:11:12.000+02:00
diff --git a/.scripts/generate-templates-matrix.js b/.scripts/generate-templates-matrix.js
@@ -18,6 +18,7 @@ const nodeJsTemplates = [
   "preact",
   "preact-ts",
   "angular",
+  "astro",
 ];
 
 const matrixConfig = [
diff --git a/node/README.md b/node/README.md
@@ -77,6 +77,7 @@ Currently supported template presets include:
 - `leptos`
 - `sycamore`
 - `blazor`
+- `astro`
 
 You can use `.` for the project name to scaffold in the current directory.
 
diff --git a/src/package_manager.rs b/src/package_manager.rs
@@ -100,6 +100,7 @@ impl PackageManager {
                 Template::Solid,
                 Template::Angular,
                 Template::Preact,
+                Template::Astro,
             ],
             PackageManager::Dotnet => &[Template::Blazor],
         }
@@ -132,6 +133,7 @@ impl PackageManager {
                 Template::Angular,
                 Template::Preact,
                 Template::PreactTs,
+                Template::Astro,
             ],
             PackageManager::Dotnet => &[Template::Blazor],
         }
diff --git a/src/template.rs b/src/template.rs
@@ -60,6 +60,7 @@ pub enum Template {
     PreactTs,
     Blazor,
     Dioxus,
+    Astro,
 }
 
 impl Display for Template {
@@ -83,6 +84,7 @@ impl Display for Template {
             Template::PreactTs => write!(f, "preact-ts"),
             Template::Blazor => write!(f, "blazor"),
             Template::Dioxus => write!(f, "dioxus"),
+            Template::Astro => write!(f, "astro"),
         }
     }
 }
@@ -109,6 +111,7 @@ impl FromStr for Template {
             "preact-ts" => Ok(Template::PreactTs),
             "blazor" => Ok(Template::Blazor),
             "dioxus" => Ok(Template::Dioxus),
+            "astro" => Ok(Template::Astro),
             _ => Err(format!(
                 "{YELLOW}{s}{RESET} is not a valid template. Valid templates are [{}]",
                 Template::ALL
@@ -138,6 +141,7 @@ impl Template {
                 "Blazor - (https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor/)"
             }
             Template::Dioxus => "Dioxus - (https://dioxuslabs.com/)",
+            Template::Astro => "Astro - (https://astro.build/)",
             _ => unreachable!(),
         }
     }
@@ -163,6 +167,7 @@ impl<'a> Template {
         Template::PreactTs,
         Template::Blazor,
         Template::Dioxus,
+        Template::Astro,
     ];
 
     pub fn flavors<'b>(&self, pkg_manager: PackageManager) -> Option<&'b [Flavor]> {
@@ -227,7 +232,8 @@ impl<'a> Template {
             | Template::SolidTs
             | Template::Angular
             | Template::Preact
-            | Template::PreactTs => PackageManager::NODE,
+            | Template::PreactTs
+            | Template::Astro => PackageManager::NODE,
             Template::Yew | Template::Leptos | Template::Sycamore | Template::Dioxus => {
                 &[PackageManager::Cargo]
             }
diff --git a/templates/_assets_/astro.svg b/templates/_assets_/astro.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <g>
+    <path d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"/>
+  </g>
+  <path fill="url(#a)" d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"/>
+  <defs>
+    <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D83333"/>
+      <stop offset="1" stop-color="#F041FF"/>
+    </linearGradient>
+  </defs>
+  <style>
+    g { fill: #000; }
+    @media (prefers-color-scheme: dark) {
+      g { fill: #FFF; }
+    }
+  </style>
+</svg>
diff --git a/templates/template-astro/%(pnpm-yarn-npm-bun)%package.json.lte b/templates/template-astro/%(pnpm-yarn-npm-bun)%package.json.lte
@@ -0,0 +1,17 @@
+{
+  "name": "{% package_name %}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "build": "astro build",
+    "dev": "astro dev"
+  },
+  "dependencies": {
+    "@tauri-apps/api": "{% if v2 %}^2{% else %}^1{% endif %}",
+    "astro": "^5.7.13"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "{% if v2 %}^2{% else %}^1{% endif %}"
+  }
+}
diff --git a/templates/template-astro/.manifest b/templates/template-astro/.manifest
@@ -0,0 +1,12 @@
+# Copyright 2019-2025 Tauri Programme within The Commons Conservancy
+# SPDX-License-Identifier: Apache-2.0
+# SPDX-License-Identifier: MIT
+
+beforeDevCommand = {% pkg_manager_run_command %} dev
+beforeBuildCommand = {% pkg_manager_run_command %} build
+devUrl = http://localhost:1420
+frontendDist = ../dist
+
+[files]
+astro.svg = public/astro.svg
+tauri.svg = public/tauri.svg
diff --git a/templates/template-astro/.vscode/extensions.json b/templates/template-astro/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "astro-build.astro-vscode",
+    "tauri-apps.tauri-vscode",
+    "rust-lang.rust-analyzer"
+  ]
+}
diff --git a/templates/template-astro/README.md b/templates/template-astro/README.md
@@ -0,0 +1,7 @@
+# Tauri + Astro
+
+This template should help get you started developing with Tauri and Astro.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer).
diff --git a/templates/template-astro/_gitignore b/templates/template-astro/_gitignore
@@ -0,0 +1,24 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
diff --git a/templates/template-astro/astro.config.ts.lte b/templates/template-astro/astro.config.ts.lte
@@ -0,0 +1,34 @@
+// @ts-check
+import { defineConfig } from "astro/config";{% if v2 %}
+
+// @ts-expect-error process is a nodejs global
+const host = process.env.TAURI_DEV_HOST;{% endif %}
+
+// https://astro.build/config
+export default defineConfig({
+  server: {{% if v2 %}
+    port: 1420,{% endif %}
+    host: host ?? false,
+  },
+  vite: {
+    // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+    //
+    // 1. prevent Vite from obscuring rust errors
+    clearScreen: false,
+    // 2. tauri expects a fixed port, fail if that port is not available
+    server: {
+      strictPort: true,{% if v2 %}
+      hmr: host
+        ? {
+            protocol: "ws",
+            host,
+            port: 1421,
+          }
+        : undefined,{% endif %}
+      watch: {
+        // 3. tell Vite to ignore watching `src-tauri`
+        ignored: ["**/src-tauri/**"],
+      },
+    },
+  },
+});
diff --git a/templates/template-astro/src/components/Welcome.astro.lte b/templates/template-astro/src/components/Welcome.astro.lte
@@ -0,0 +1,54 @@
+<script>
+    import { invoke } from '@tauri-apps/api/{% if v2 %}core{% else %}tauri{% endif %}';
+
+    async function greet({
+        greetInputEl,
+        greetMsgEl,
+    }: {
+        greetInputEl: Element;
+        greetMsgEl: Element;
+    }) {
+        // Learn more about Tauri commands at {% if v2 %}https://tauri.app/develop/calling-rust/{% else %}https://v1.tauri.app/v1/guides/features/command{% endif %}
+        greetMsgEl.textContent = await invoke('greet', {
+            name: greetInputEl.textContent,
+        });
+    }
+
+    window.addEventListener('DOMContentLoaded', () => {
+        const greetInputEl = document.querySelector('#greet-input')!;
+        const greetMsgEl = document.querySelector('#greet-msg')!;
+        document
+            .querySelector('#greet-form')!
+            .addEventListener('submit', (e) => {
+                e.preventDefault();
+                greet({ greetInputEl, greetMsgEl });
+            });
+    });
+</script>
+
+<main class="container">
+    <h1>Welcome to Tauri + Astro</h1>
+
+    <div class="row">
+        <a href="https://tauri.app" target="_blank">
+            <img src="/tauri.svg" class="logo tauri" alt="Tauri Logo" />
+        </a>
+        <a href="https://astro.build" target="_blank">
+            <img src="/astro.svg" class="logo astro" alt="Astro Logo" />
+        </a>
+    </div>
+    <p>Click on the Tauri or Astro logo to learn more.</p>
+
+    <form class="row" id="greet-form">
+        <input id="greet-input" placeholder="Enter a name..." />
+        <button type="submit">Greet</button>
+    </form>
+
+    <p id="greet-msg"></p>
+</main>
+
+<style>
+    .logo.astro:hover {
+        filter: drop-shadow(0 0 2em #F041FF);
+    }
+</style>
diff --git a/templates/template-astro/src/layouts/Layout.astro.lte b/templates/template-astro/src/layouts/Layout.astro.lte
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/astro.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Tauri + Astro App</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+
+<style is:global>
+{% styles %}
+</style>
diff --git a/templates/template-astro/src/pages/index.astro b/templates/template-astro/src/pages/index.astro
@@ -0,0 +1,11 @@
+---
+import Welcome from '../components/Welcome.astro';
+import Layout from '../layouts/Layout.astro';
+
+// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
+// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
+---
+
+<Layout>
+	<Welcome />
+</Layout>
diff --git a/templates/template-astro/tsconfig.json b/templates/template-astro/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}

Original file line number	Diff line number	Diff line change
`@@ -60,6 +60,7 @@ pub enum Template {`
`60`	`60`	`PreactTs,`
`61`	`61`	`Blazor,`
`62`	`62`	`Dioxus,`
	`63`	`+ Astro,`
`63`	`64`	`}`
`64`	`65`
`65`	`66`	`impl Display for Template {`
`@@ -83,6 +84,7 @@ impl Display for Template {`
`83`	`84`	`Template::PreactTs => write!(f, "preact-ts"),`
`84`	`85`	`Template::Blazor => write!(f, "blazor"),`
`85`	`86`	`Template::Dioxus => write!(f, "dioxus"),`
	`87`	`+ Template::Astro => write!(f, "astro"),`
`86`	`88`	`}`
`87`	`89`	`}`
`88`	`90`	`}`
`@@ -109,6 +111,7 @@ impl FromStr for Template {`
`109`	`111`	`"preact-ts" => Ok(Template::PreactTs),`
`110`	`112`	`"blazor" => Ok(Template::Blazor),`
`111`	`113`	`"dioxus" => Ok(Template::Dioxus),`
	`114`	`+ "astro" => Ok(Template::Astro),`
`112`	`115`	`_ => Err(format!(`
`113`	`116`	`"{YELLOW}{s}{RESET} is not a valid template. Valid templates are [{}]",`
`114`	`117`	`Template::ALL`
`@@ -138,6 +141,7 @@ impl Template {`
`138`	`141`	`"Blazor - (https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor/)"`
`139`	`142`	`}`
`140`	`143`	`Template::Dioxus => "Dioxus - (https://dioxuslabs.com/)",`
	`144`	`+ Template::Astro => "Astro - (https://astro.build/)",`
`141`	`145`	`_ => unreachable!(),`
`142`	`146`	`}`
`143`	`147`	`}`
`@@ -163,6 +167,7 @@ impl<'a> Template {`
`163`	`167`	`Template::PreactTs,`
`164`	`168`	`Template::Blazor,`
`165`	`169`	`Template::Dioxus,`
	`170`	`+ Template::Astro,`
`166`	`171`	`];`
`167`	`172`
`168`	`173`	`pub fn flavors<'b>(&self, pkg_manager: PackageManager) -> Option<&'b [Flavor]> {`
`@@ -227,7 +232,8 @@ impl<'a> Template {`
`227`	`232`	`\| Template::SolidTs`
`228`	`233`	`\| Template::Angular`
`229`	`234`	`\| Template::Preact`
`230`		`- \| Template::PreactTs => PackageManager::NODE,`
	`235`	`+ \| Template::PreactTs`
	`236`	`+ \| Template::Astro => PackageManager::NODE,`
`231`	`237`	`Template::Yew \| Template::Leptos \| Template::Sycamore \| Template::Dioxus => {`
`232`	`238`	`&[PackageManager::Cargo]`
`233`	`239`	`}`