Skip to content

Commit 57b6857

Browse files
WSH032ISOR3X
WSH032
and
ISOR3X
authored
feat: add react template (#4)
* feat: add `react` template * fix(vue): incorrect return value type hint * docs: update README * fix: remove unintended spaces These spaces can cause errors in the Jinja template * fix: missing `tauri-plugin-pytauri-api` dependency * docs: update banner Co-authored-by: ISOREX <[email protected]> * docs: remove `todo` in README We should track those in GitHub issues instead Co-authored-by: ISOREX <[email protected]> --------- Co-authored-by: ISOREX <[email protected]>
1 parent 4a5f12b commit 57b6857

File tree

20 files changed

+727
-27
lines changed

20 files changed

+727
-27
lines changed

‎README.md

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
1-
![banner.png](assets/banner.png)
1+
# Create-PyTauri
22

3-
# Create-pytauri
3+
![banner.png](https://raw.githubusercontent.com/pytauri/pytauri/v0.5.0/docs/assets/banner.png)
44

5-
The recommended way to start a new PyTauri project.
6-
Currently only has Vue support.
5+
The recommended way to start a new PyTauri project.
76

87
## How to use
98

10-
Make sure you have [uv](https://docs.astral.sh/uv/) installed.
9+
Make sure you have [uv](https://docs.astral.sh/uv/) and [pnpm](https://pnpm.io/) installed.
1110

1211
```shell
13-
uvx copier copy https://github.com/ISOR3X/create-pytauri project_name
12+
uvx copier copy https://github.com/pytauri/create-pytauri .
1413
```
1514

16-
## To do
17-
18-
1. Create a venv, install the python package as a dependency (maybe as a separate command?)
19-
2. Add example GUI (see [pytauri-vue-starter](https://github.com/ISOR3X/pytauri-vue-starter))
20-
2115
## Refer
2216

23-
<https://github.com/orgs/copier-org/discussions/2121>
17+
- <https://github.com/orgs/copier-org/discussions/2121>

‎copier.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,5 @@ _message_after_copy: |
3737
3838
For Desktop development, run:
3939
pnpm tauri dev
40-
40+
4141
For building a standalone app, see the `scripts/` folder.

‎package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,17 @@
1111
},
1212
"dependencies": {
1313
"vue": "^3.5.13",
14+
"react": "^18.3.1",
15+
"react-dom": "^18.3.1",
1416
"@tauri-apps/api": "^2",
1517
"@tauri-apps/plugin-opener": "^2",
1618
"tauri-plugin-pytauri-api": "^0.5.0"
1719
},
1820
"devDependencies": {
21+
"@types/react": "^18.3.1",
22+
"@types/react-dom": "^18.3.1",
1923
"@vitejs/plugin-vue": "^5.2.1",
24+
"@vitejs/plugin-react": "^4.3.4",
2025
"typescript": "~5.6.2",
2126
"vite": "^6.0.3",
2227
"vue-tsc": "^2.1.10",

‎pnpm-lock.yaml

Lines changed: 400 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/.vscode/extensions.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"recommendations": [
3+
"rust-lang.rust-analyzer",
4+
"vadimcn.vscode-lldb",
5+
"ms-python.python",
6+
"ms-python.vscode-pylance",
7+
"charliermarsh.ruff",
8+
"ms-python.debugpy",
9+
"tauri-apps.tauri-vscode",
10+
]
11+
}

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Tauri + React + Typescript
2+
3+
This template should help get you started developing with Tauri, React and Typescript in Vite.
4+
5+
## Recommended IDE Setup
6+
7+
- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Tauri + React + Typescript</title>
8+
</head>
9+
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="/src/main.tsx"></script>
13+
</body>
14+
</html>

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/package.json.jinja

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "{{ project_name }}",
3+
"private": true,
4+
"version": "0.1.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview",
10+
"tauri": "tauri"
11+
},
12+
"dependencies": {
13+
"react": "^18.3.1",
14+
"react-dom": "^18.3.1",
15+
"@tauri-apps/api": "^2",
16+
"@tauri-apps/plugin-opener": "^2",
17+
"tauri-plugin-pytauri-api": "^0.5.0"
18+
},
19+
"devDependencies": {
20+
"@types/react": "^18.3.1",
21+
"@types/react-dom": "^18.3.1",
22+
"@vitejs/plugin-react": "^4.3.4",
23+
"typescript": "~5.6.2",
24+
"vite": "^6.0.3",
25+
"@tauri-apps/cli": "^2"
26+
}
27+
}

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/public/tauri.svg

Lines changed: 6 additions & 0 deletions
Loading

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/src/App.css

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
.logo.vite:hover {
2+
filter: drop-shadow(0 0 2em #747bff);
3+
}
4+
5+
.logo.react:hover {
6+
filter: drop-shadow(0 0 2em #61dafb);
7+
}
8+
:root {
9+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
10+
font-size: 16px;
11+
line-height: 24px;
12+
font-weight: 400;
13+
14+
color: #0f0f0f;
15+
background-color: #f6f6f6;
16+
17+
font-synthesis: none;
18+
text-rendering: optimizeLegibility;
19+
-webkit-font-smoothing: antialiased;
20+
-moz-osx-font-smoothing: grayscale;
21+
-webkit-text-size-adjust: 100%;
22+
}
23+
24+
.container {
25+
margin: 0;
26+
padding-top: 10vh;
27+
display: flex;
28+
flex-direction: column;
29+
justify-content: center;
30+
text-align: center;
31+
}
32+
33+
.logo {
34+
height: 6em;
35+
padding: 1.5em;
36+
will-change: filter;
37+
transition: 0.75s;
38+
}
39+
40+
.logo.tauri:hover {
41+
filter: drop-shadow(0 0 2em #24c8db);
42+
}
43+
44+
.row {
45+
display: flex;
46+
justify-content: center;
47+
}
48+
49+
a {
50+
font-weight: 500;
51+
color: #646cff;
52+
text-decoration: inherit;
53+
}
54+
55+
a:hover {
56+
color: #535bf2;
57+
}
58+
59+
h1 {
60+
text-align: center;
61+
}
62+
63+
input,
64+
button {
65+
border-radius: 8px;
66+
border: 1px solid transparent;
67+
padding: 0.6em 1.2em;
68+
font-size: 1em;
69+
font-weight: 500;
70+
font-family: inherit;
71+
color: #0f0f0f;
72+
background-color: #ffffff;
73+
transition: border-color 0.25s;
74+
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
75+
}
76+
77+
button {
78+
cursor: pointer;
79+
}
80+
81+
button:hover {
82+
border-color: #396cd8;
83+
}
84+
button:active {
85+
border-color: #396cd8;
86+
background-color: #e8e8e8;
87+
}
88+
89+
input,
90+
button {
91+
outline: none;
92+
}
93+
94+
#greet-input {
95+
margin-right: 5px;
96+
}
97+
98+
@media (prefers-color-scheme: dark) {
99+
:root {
100+
color: #f6f6f6;
101+
background-color: #2f2f2f;
102+
}
103+
104+
a:hover {
105+
color: #24c8db;
106+
}
107+
108+
input,
109+
button {
110+
color: #ffffff;
111+
background-color: #0f0f0f98;
112+
}
113+
button:active {
114+
background-color: #0f0f0f69;
115+
}
116+
}

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/src/App.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { useState } from "react";
2+
import reactLogo from "./assets/react.svg";
3+
import { invoke } from "@tauri-apps/api/core";
4+
import { pyInvoke } from "tauri-plugin-pytauri-api";
5+
import "./App.css";
6+
7+
function App() {
8+
const [greetMsg, setGreetMsg] = useState("");
9+
const [name, setName] = useState("");
10+
11+
async function greet() {
12+
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
13+
const rsGreeting = await invoke<string>("greet", { name });
14+
// Learn more about PyTauri commands at https://pytauri.github.io/pytauri/latest/usage/concepts/ipc/
15+
const pyGreeting = await pyInvoke<string>("greet", { name });
16+
setGreetMsg(rsGreeting + "\n" + pyGreeting);
17+
}
18+
19+
return (
20+
<main className="container">
21+
<h1>Welcome to Tauri + React</h1>
22+
23+
<div className="row">
24+
<a href="https://vitejs.dev" target="_blank">
25+
<img src="/vite.svg" className="logo vite" alt="Vite logo" />
26+
</a>
27+
<a href="https://tauri.app" target="_blank">
28+
<img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
29+
</a>
30+
<a href="https://reactjs.org" target="_blank">
31+
<img src={reactLogo} className="logo react" alt="React logo" />
32+
</a>
33+
</div>
34+
<p>Click on the Tauri, Vite, and React logos to learn more.</p>
35+
36+
<form
37+
className="row"
38+
onSubmit={(e) => {
39+
e.preventDefault();
40+
greet();
41+
}}
42+
>
43+
<input
44+
id="greet-input"
45+
onChange={(e) => setName(e.currentTarget.value)}
46+
placeholder="Enter a name..."
47+
/>
48+
<button type="submit">Greet</button>
49+
</form>
50+
<p>{greetMsg}</p>
51+
</main>
52+
);
53+
}
54+
55+
export default App;

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/src/assets/react.svg

Lines changed: 1 addition & 0 deletions
Loading

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/src/main.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import App from "./App";
4+
5+
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
6+
<React.StrictMode>
7+
<App />
8+
</React.StrictMode>,
9+
);

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/src/vite-env.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/todo.txt

Whitespace-only changes.

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/tsconfig.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"useDefineForClassFields": true,
5+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
6+
"module": "ESNext",
7+
"skipLibCheck": true,
8+
9+
/* Bundler mode */
10+
"moduleResolution": "bundler",
11+
"allowImportingTsExtensions": true,
12+
"resolveJsonModule": true,
13+
"isolatedModules": true,
14+
"noEmit": true,
15+
"jsx": "react-jsx",
16+
17+
/* Linting */
18+
"strict": true,
19+
"noUnusedLocals": true,
20+
"noUnusedParameters": true,
21+
"noFallthroughCasesInSwitch": true
22+
},
23+
"include": ["src"],
24+
"references": [{ "path": "./tsconfig.node.json" }]
25+
}

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/tsconfig.node.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"composite": true,
4+
"skipLibCheck": true,
5+
"module": "ESNext",
6+
"moduleResolution": "bundler",
7+
"allowSyntheticDefaultImports": true
8+
},
9+
"include": ["vite.config.ts"]
10+
}

‎templates/{% if template == 'react' %}.{% endif %}/{{ project_name }}/vite.config.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { defineConfig } from "vite";
2+
import react from "@vitejs/plugin-react";
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig(async () => ({
6+
plugins: [react()],
7+
8+
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
9+
//
10+
// 1. prevent vite from obscuring rust errors
11+
clearScreen: false,
12+
// 2. tauri expects a fixed port, fail if that port is not available
13+
server: {
14+
port: 1420,
15+
strictPort: true,
16+
watch: {
17+
// 3. tell vite to ignore watching `src-tauri`
18+
ignored: ["**/src-tauri/**", "**/.venv/**"],
19+
},
20+
},
21+
}));

0 commit comments

Comments
 (0)