├── Desktop ├── input.css ├── tailwind.config.js ├── .gitignore ├── cargo-generate.toml ├── Cargo.toml ├── README.md ├── assets │ ├── main.css │ └── header.svg ├── Dioxus.toml └── src │ └── main.rs ├── Web ├── input.css ├── assets │ ├── favicon.ico │ ├── main.css │ └── header.svg ├── tailwind.config.js ├── .gitignore ├── cargo-generate.toml ├── Cargo.toml ├── README.md ├── Dioxus.toml └── src │ └── main.rs ├── Fullstack ├── input.css ├── assets │ ├── favicon.ico │ ├── main.css │ └── header.svg ├── tailwind.config.js ├── .gitignore ├── cargo-generate.toml ├── README.md ├── Cargo.toml ├── Dioxus.toml └── src │ └── main.rs ├── cargo-generate.toml ├── .vscode └── settings.json ├── Liveview ├── README.md ├── cargo-generate.toml ├── .gitignore ├── Cargo.toml ├── assets │ ├── main.css │ └── header.svg ├── Dioxus.toml └── src │ └── main.rs ├── .gitignore └── README.md /Desktop/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /Web/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /Fullstack/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /cargo-generate.toml: -------------------------------------------------------------------------------- 1 | [template] 2 | sub_templates = ["Web", "Liveview", "Fullstack", "Desktop"] -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "[toml]": { 3 | "editor.formatOnSave": false 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /Liveview/README.md: -------------------------------------------------------------------------------- 1 | # Development 2 | Launch the Dioxus app: 3 | 4 | ```bash 5 | cargo run 6 | ``` 7 | 8 | -------------------------------------------------------------------------------- /Web/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DioxusLabs/dioxus-template/main/Web/assets/favicon.ico -------------------------------------------------------------------------------- /Fullstack/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DioxusLabs/dioxus-template/main/Fullstack/assets/favicon.ico -------------------------------------------------------------------------------- /Liveview/cargo-generate.toml: -------------------------------------------------------------------------------- 1 | [template] 2 | 3 | [placeholders] 4 | router = { prompt = "Should the application use the Dioxus router?", type = "bool", default = true } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Generated by Cargo 2 | # will have compiled files and executables 3 | /target/ 4 | /dist/ 5 | /static/ 6 | /.dioxus/ 7 | 8 | # These are backup files generated by rustfmt 9 | **/*.rs.bk 10 | -------------------------------------------------------------------------------- /Liveview/.gitignore: -------------------------------------------------------------------------------- 1 | # Generated by Cargo 2 | # will have compiled files and executables 3 | /target/ 4 | /dist/ 5 | /static/ 6 | /.dioxus/ 7 | 8 | # These are backup files generated by rustfmt 9 | **/*.rs.bk 10 | -------------------------------------------------------------------------------- /Web/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | mode: "all", 4 | content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"], 5 | theme: { 6 | extend: {}, 7 | }, 8 | plugins: [], 9 | }; 10 | -------------------------------------------------------------------------------- /Desktop/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | mode: "all", 4 | content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"], 5 | theme: { 6 | extend: {}, 7 | }, 8 | plugins: [], 9 | }; 10 | -------------------------------------------------------------------------------- /Fullstack/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | mode: "all", 4 | content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"], 5 | theme: { 6 | extend: {}, 7 | }, 8 | plugins: [], 9 | }; 10 | -------------------------------------------------------------------------------- /Web/.gitignore: -------------------------------------------------------------------------------- 1 | # Generated by Cargo 2 | # will have compiled files and executables 3 | /target/ 4 | /dist/ 5 | /static/ 6 | /.dioxus/ 7 | 8 | # this file will generate by tailwind: 9 | /assets/tailwind.css 10 | 11 | # These are backup files generated by rustfmt 12 | **/*.rs.bk 13 | -------------------------------------------------------------------------------- /Desktop/.gitignore: -------------------------------------------------------------------------------- 1 | # Generated by Cargo 2 | # will have compiled files and executables 3 | /target/ 4 | /dist/ 5 | /static/ 6 | /.dioxus/ 7 | 8 | # this file will generate by tailwind: 9 | /assets/tailwind.css 10 | 11 | # These are backup files generated by rustfmt 12 | **/*.rs.bk 13 | -------------------------------------------------------------------------------- /Fullstack/.gitignore: -------------------------------------------------------------------------------- 1 | # Generated by Cargo 2 | # will have compiled files and executables 3 | /target/ 4 | /dist/ 5 | /static/ 6 | /.dioxus/ 7 | 8 | # this file will generate by tailwind: 9 | /assets/tailwind.css 10 | 11 | # These are backup files generated by rustfmt 12 | **/*.rs.bk 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Overview 2 | 3 | **This repo is not intended to be `git cloned`**. 4 | 5 | This repo is used by `dx new` when starting new projects. The CLI relies on [cargo-generate](https://crates.io/crates/cargo-generate) to create and use these templates. 6 | 7 | ### Organization 8 | 9 | This repository is organized into multiple sub-templates for each platform. 10 | -------------------------------------------------------------------------------- /Web/cargo-generate.toml: -------------------------------------------------------------------------------- 1 | [template] 2 | 3 | [placeholders] 4 | styling = { prompt = "How do you want to create CSS?", choices = [ 5 | "Tailwind", 6 | "Vanilla", 7 | ], default = "Vanilla", type = "string" } 8 | router = { prompt = "Should the application use the Dioxus router?", type = "bool", default = true } 9 | 10 | [conditional.'styling == "Vanilla"'] 11 | ignore = ["tailwind.config.js", "input.css"] 12 | -------------------------------------------------------------------------------- /Desktop/cargo-generate.toml: -------------------------------------------------------------------------------- 1 | [template] 2 | 3 | [placeholders] 4 | styling = { prompt = "How do you want to create CSS?", choices = [ 5 | "Tailwind", 6 | "Vanilla", 7 | ], default = "Vanilla", type = "string" } 8 | router = { prompt = "Should the application use the Dioxus router?", type = "bool", default = true } 9 | 10 | [conditional.'styling == "Vanilla"'] 11 | ignore = ["tailwind.config.js", "input.css"] 12 | -------------------------------------------------------------------------------- /Fullstack/cargo-generate.toml: -------------------------------------------------------------------------------- 1 | [template] 2 | 3 | [placeholders] 4 | router = { prompt = "Should the application use the Dioxus router?", type = "bool", default = true } 5 | styling = { prompt = "How do you want to create CSS?", choices = [ 6 | "Tailwind", 7 | "Vanilla", 8 | ], default = "Vanilla", type = "string" } 9 | 10 | 11 | [conditional.'styling == "Vanilla"'] 12 | ignore = ["tailwind.config.js", "input.css"] 13 | -------------------------------------------------------------------------------- /Web/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "{{project-name}}" 3 | version = "0.1.0" 4 | authors = ["{{authors}}"] 5 | edition = "2021" 6 | 7 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 8 | 9 | [dependencies] 10 | 11 | {% if router %} 12 | dioxus = { version = "0.5", features = ["web", "router"] } 13 | {% else %} 14 | dioxus = { version = "0.5", features = ["web"] } 15 | {% endif %} 16 | 17 | 18 | # Debug 19 | dioxus-logger = "0.5.1" -------------------------------------------------------------------------------- /Desktop/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "{{project-name}}" 3 | version = "0.1.0" 4 | authors = ["{{authors}}"] 5 | edition = "2021" 6 | 7 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 8 | 9 | [dependencies] 10 | 11 | {% if router %} 12 | dioxus = { version = "0.5", features = ["desktop", "router"] } 13 | {% else %} 14 | dioxus = { version = "0.5", features = ["desktop"] } 15 | {% endif %} 16 | 17 | 18 | # Debug 19 | dioxus-logger = "0.5.1" -------------------------------------------------------------------------------- /Fullstack/README.md: -------------------------------------------------------------------------------- 1 | {% if styling == "Tailwind" %} 2 | 1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm 3 | 2. Install the tailwind css cli: https://tailwindcss.com/docs/installation 4 | 3. Run the following command in the root of the project to start the tailwind CSS compiler: 5 | 6 | ```bash 7 | npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch 8 | ``` 9 | {% endif %} 10 | 11 | Launch the Dioxus Fullstack app: 12 | 13 | ```bash 14 | dx serve --platform fullstack 15 | ``` -------------------------------------------------------------------------------- /Desktop/README.md: -------------------------------------------------------------------------------- 1 | # Development 2 | {% if styling == "Tailwind" %} 3 | 1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm 4 | 2. Install the tailwind css cli: https://tailwindcss.com/docs/installation 5 | 3. Run the following command in the root of the project to start the tailwind CSS compiler: 6 | 7 | ```bash 8 | npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch 9 | ``` 10 | {% endif %} 11 | Run the following command in the root of the project to start the Dioxus dev server: 12 | 13 | ```bash 14 | dx serve --hot-reload --platform desktop 15 | ``` -------------------------------------------------------------------------------- /Web/README.md: -------------------------------------------------------------------------------- 1 | # Development 2 | {% if styling == "Tailwind" %} 3 | 1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm 4 | 2. Install the tailwind css cli: https://tailwindcss.com/docs/installation 5 | 3. Run the following command in the root of the project to start the tailwind CSS compiler: 6 | 7 | ```bash 8 | npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch 9 | ``` 10 | {% endif %} 11 | Run the following command in the root of the project to start the Dioxus dev server: 12 | 13 | ```bash 14 | dx serve --hot-reload 15 | ``` 16 | 17 | - Open the browser to http://localhost:8080 -------------------------------------------------------------------------------- /Fullstack/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "{{project-name}}" 3 | version = "0.1.0" 4 | authors = ["{{authors}}"] 5 | edition = "2021" 6 | 7 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 8 | 9 | [dependencies] 10 | serde = { version = "1.0.197", features = ["derive"] } 11 | {% if router %} 12 | dioxus = { version = "0.5", features = ["fullstack", "router"] } 13 | {% else %} 14 | dioxus = { version = "0.5", features = ["fullstack"] } 15 | {% endif %} 16 | 17 | # Debug 18 | dioxus-logger = "0.5.1" 19 | 20 | [features] 21 | default = [] 22 | server = ["dioxus/axum"] 23 | web = ["dioxus/web"] -------------------------------------------------------------------------------- /Liveview/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "{{project-name}}" 3 | version = "0.1.0" 4 | authors = ["{{authors}}"] 5 | edition = "2021" 6 | 7 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 8 | 9 | 10 | [dependencies] 11 | tokio = { version = "1.27.0", features = ["full"] } 12 | {% if router %} 13 | dioxus = { version = "0.5", features = ["liveview", "axum", "router"] } 14 | axum = { version = "0.7.4", features = ["ws"] } 15 | {% else %} 16 | dioxus = { version = "0.5", features = ["liveview", "axum"] } 17 | axum = { version = "0.7.4", features = ["ws"] } 18 | {% endif %} 19 | 20 | # Debug 21 | dioxus-logger = "0.5.1" 22 | -------------------------------------------------------------------------------- /Web/assets/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #111216; 3 | } 4 | 5 | #main { 6 | margin: 0; 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif 12 | } 13 | 14 | #links { 15 | width: 400px; 16 | text-align: left; 17 | font-size: x-large; 18 | color: white; 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | 23 | #links a { 24 | color: white; 25 | text-decoration: none; 26 | margin-top: 20px; 27 | margin: 10px; 28 | border: white 1px solid; 29 | border-radius: 5px; 30 | padding: 10px; 31 | } 32 | 33 | #links a:hover { 34 | background-color: #1f1f1f; 35 | cursor: pointer; 36 | } 37 | 38 | #header { 39 | max-width: 1200px; 40 | } 41 | -------------------------------------------------------------------------------- /Desktop/assets/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #111216; 3 | } 4 | 5 | #main { 6 | margin: 0; 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif 12 | } 13 | 14 | #links { 15 | width: 400px; 16 | text-align: left; 17 | font-size: x-large; 18 | color: white; 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | 23 | #links a { 24 | color: white; 25 | text-decoration: none; 26 | margin-top: 20px; 27 | margin: 10px; 28 | border: white 1px solid; 29 | border-radius: 5px; 30 | padding: 10px; 31 | } 32 | 33 | #links a:hover { 34 | background-color: #1f1f1f; 35 | cursor: pointer; 36 | } 37 | 38 | #header { 39 | max-width: 1200px; 40 | } 41 | -------------------------------------------------------------------------------- /Fullstack/assets/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #111216; 3 | } 4 | 5 | #main { 6 | margin: 0; 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif 12 | } 13 | 14 | #links { 15 | width: 400px; 16 | text-align: left; 17 | font-size: x-large; 18 | color: white; 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | 23 | #links a { 24 | color: white; 25 | text-decoration: none; 26 | margin-top: 20px; 27 | margin: 10px; 28 | border: white 1px solid; 29 | border-radius: 5px; 30 | padding: 10px; 31 | } 32 | 33 | #links a:hover { 34 | background-color: #1f1f1f; 35 | cursor: pointer; 36 | } 37 | 38 | #header { 39 | max-width: 1200px; 40 | } 41 | -------------------------------------------------------------------------------- /Liveview/assets/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #111216; 3 | } 4 | 5 | #main { 6 | margin: 0; 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif 12 | } 13 | 14 | #links { 15 | width: 400px; 16 | text-align: left; 17 | font-size: x-large; 18 | color: white; 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | 23 | #links a { 24 | color: white; 25 | text-decoration: none; 26 | margin-top: 20px; 27 | margin: 10px; 28 | border: white 1px solid; 29 | border-radius: 5px; 30 | padding: 10px; 31 | } 32 | 33 | #links a:hover { 34 | background-color: #1f1f1f; 35 | cursor: pointer; 36 | } 37 | 38 | #header { 39 | max-width: 1200px; 40 | } 41 | -------------------------------------------------------------------------------- /Liveview/Dioxus.toml: -------------------------------------------------------------------------------- 1 | [application] 2 | 3 | # App (Project) Name 4 | name = "{{project-name}}" 5 | 6 | # Dioxus App Default Platform 7 | # web, desktop, fullstack 8 | default_platform = "desktop" 9 | 10 | # `build` & `serve` dist path 11 | out_dir = "dist" 12 | 13 | # resource (assets) file folder 14 | asset_dir = "assets" 15 | 16 | [web.app] 17 | 18 | # HTML title tag content 19 | title = "{{project-name}}" 20 | 21 | [web.watcher] 22 | 23 | # when watcher trigger, regenerate the `index.html` 24 | reload_html = true 25 | 26 | # which files or dirs will be watcher monitoring 27 | watch_path = ["src", "assets"] 28 | 29 | # include `assets` in web platform 30 | [web.resource] 31 | 32 | # CSS style file 33 | style = [] 34 | 35 | # Javascript code file 36 | script = [] 37 | 38 | [web.resource.dev] 39 | 40 | # Javascript code file 41 | # serve: [dev-server] only 42 | script = [] 43 | -------------------------------------------------------------------------------- /Desktop/Dioxus.toml: -------------------------------------------------------------------------------- 1 | [application] 2 | 3 | # App (Project) Name 4 | name = "{{project-name}}" 5 | 6 | # Dioxus App Default Platform 7 | # web, desktop, fullstack 8 | default_platform = "desktop" 9 | 10 | # `build` & `serve` dist path 11 | out_dir = "dist" 12 | 13 | # assets file folder 14 | asset_dir = "assets" 15 | 16 | [web.app] 17 | 18 | # HTML title tag content 19 | title = "{{project-name}}" 20 | 21 | [web.watcher] 22 | 23 | # when watcher trigger, regenerate the `index.html` 24 | reload_html = true 25 | 26 | # which files or dirs will be watcher monitoring 27 | watch_path = ["src", "assets"] 28 | 29 | # include `assets` in web platform 30 | [web.resource] 31 | 32 | # CSS style file 33 | {% if styling == "Tailwind" %} 34 | style = ["/tailwind.css"] 35 | {% else %} 36 | style = [] 37 | {% endif %} 38 | 39 | # Javascript code file 40 | script = [] 41 | 42 | [web.resource.dev] 43 | 44 | # Javascript code file 45 | # serve: [dev-server] only 46 | script = [] 47 | -------------------------------------------------------------------------------- /Web/Dioxus.toml: -------------------------------------------------------------------------------- 1 | [application] 2 | 3 | # App (Project) Name 4 | name = "{{project-name}}" 5 | 6 | # Dioxus App Default Platform 7 | # web, desktop, fullstack 8 | default_platform = "web" 9 | 10 | # `build` & `serve` dist path 11 | out_dir = "dist" 12 | 13 | # resource (assets) file folder 14 | asset_dir = "assets" 15 | 16 | [web.app] 17 | 18 | # HTML title tag content 19 | title = "{{project-name}}" 20 | 21 | [web.watcher] 22 | 23 | # when watcher trigger, regenerate the `index.html` 24 | reload_html = true 25 | 26 | # which files or dirs will be watcher monitoring 27 | watch_path = ["src", "assets"] 28 | 29 | # include `assets` in web platform 30 | [web.resource] 31 | 32 | # CSS style file 33 | {% if styling == "Tailwind" %} 34 | style = ["/tailwind.css"] 35 | {% else %} 36 | style = [] 37 | {% endif %} 38 | 39 | # Javascript code file 40 | script = [] 41 | 42 | [web.resource.dev] 43 | 44 | # Javascript code file 45 | # serve: [dev-server] only 46 | script = [] 47 | -------------------------------------------------------------------------------- /Fullstack/Dioxus.toml: -------------------------------------------------------------------------------- 1 | [application] 2 | 3 | # App (Project) Name 4 | name = "{{project-name}}" 5 | 6 | # Dioxus App Default Platform 7 | # web, desktop, fullstack 8 | default_platform = "fullstack" 9 | 10 | # `build` & `serve` dist path 11 | out_dir = "dist" 12 | 13 | # resource (assets) file folder 14 | asset_dir = "assets" 15 | 16 | [web.app] 17 | 18 | # HTML title tag content 19 | title = "{{project-name}}" 20 | 21 | [web.watcher] 22 | 23 | # when watcher trigger, regenerate the `index.html` 24 | reload_html = true 25 | 26 | # which files or dirs will be watcher monitoring 27 | watch_path = ["src", "assets"] 28 | 29 | # include `assets` in web platform 30 | [web.resource] 31 | 32 | # CSS style file 33 | {% if styling == "Tailwind" %} 34 | style = ["/tailwind.css"] 35 | {% else %} 36 | style = [] 37 | {% endif %} 38 | 39 | # Javascript code file 40 | script = [] 41 | 42 | [web.resource.dev] 43 | 44 | # Javascript code file 45 | # serve: [dev-server] only 46 | script = [] 47 | -------------------------------------------------------------------------------- /Liveview/src/main.rs: -------------------------------------------------------------------------------- 1 | #![allow(non_snake_case)] 2 | 3 | use dioxus::prelude::*; 4 | use dioxus_logger::tracing::{Level, info}; 5 | {% if router %} 6 | #[derive(Clone, Routable, Debug, PartialEq)] 7 | enum Route { 8 | #[route("/")] 9 | Home {}, 10 | #[route("/blog/:id")] 11 | Blog { id: i32 }, 12 | } 13 | {% endif %} 14 | 15 | fn main() { 16 | // Init logger 17 | dioxus_logger::init(Level::INFO).expect("failed to init logger"); 18 | info!("starting app"); 19 | launch(App); 20 | } 21 | 22 | {% if router %} 23 | fn App() -> Element { 24 | rsx! { 25 | Router:: {} 26 | } 27 | } 28 | #[component] 29 | fn Blog(id: i32) -> Element { 30 | rsx! { 31 | Link { to: Route::Home {}, "Go to counter" } 32 | "Blog post {id}" 33 | } 34 | } 35 | 36 | #[component] 37 | fn Home() -> Element { 38 | let mut count = use_signal(|| 0); 39 | 40 | rsx! { 41 | Link { 42 | to: Route::Blog { 43 | id: count() 44 | }, 45 | "Go to blog" 46 | } 47 | div { 48 | h1 { "High-Five counter: {count}" } 49 | button { onclick: move |_| count += 1, "Up high!" } 50 | button { onclick: move |_| count -= 1, "Down low!" } 51 | } 52 | } 53 | } 54 | {% else %} 55 | fn App() -> Element { 56 | // Build cool things ✌️ 57 | 58 | rsx! { 59 | link { rel: "stylesheet", href: "main.css" } 60 | img { src: "header.svg", id: "header" } 61 | div { id: "links", 62 | a { href: "https://dioxuslabs.com/learn/0.5/", "📚 Learn Dioxus" } 63 | a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" } 64 | a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" } 65 | a { href: "https://github.com/DioxusLabs/dioxus-std", "⚙️ Dioxus Standard Library" } 66 | a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", 67 | "💫 VSCode Extension" 68 | } 69 | a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" } 70 | } 71 | } 72 | } 73 | {% endif %} 74 | -------------------------------------------------------------------------------- /Web/src/main.rs: -------------------------------------------------------------------------------- 1 | #![allow(non_snake_case)] 2 | 3 | use dioxus::prelude::*; 4 | use dioxus_logger::tracing::{Level, info}; 5 | {% if router %} 6 | #[derive(Clone, Routable, Debug, PartialEq)] 7 | enum Route { 8 | #[route("/")] 9 | Home {}, 10 | #[route("/blog/:id")] 11 | Blog { id: i32 }, 12 | } 13 | {% endif %} 14 | 15 | fn main() { 16 | // Init logger 17 | dioxus_logger::init(Level::INFO).expect("failed to init logger"); 18 | info!("starting app"); 19 | launch(App); 20 | } 21 | 22 | {% if router %} 23 | fn App() -> Element { 24 | rsx! { 25 | Router:: {} 26 | } 27 | } 28 | 29 | #[component] 30 | fn Blog(id: i32) -> Element { 31 | rsx! { 32 | Link { to: Route::Home {}, "Go to counter" } 33 | "Blog post {id}" 34 | } 35 | } 36 | 37 | #[component] 38 | fn Home() -> Element { 39 | let mut count = use_signal(|| 0); 40 | 41 | rsx! { 42 | Link { 43 | to: Route::Blog { 44 | id: count() 45 | }, 46 | "Go to blog" 47 | } 48 | div { 49 | h1 { "High-Five counter: {count}" } 50 | button { onclick: move |_| count += 1, "Up high!" } 51 | button { onclick: move |_| count -= 1, "Down low!" } 52 | } 53 | } 54 | } 55 | {% else %} 56 | #[component] 57 | fn App() -> Element { 58 | // Build cool things ✌️ 59 | 60 | rsx! { 61 | link { rel: "stylesheet", href: "main.css" } 62 | img { src: "header.svg", id: "header" } 63 | div { id: "links", 64 | a { target: "_blank", href: "https://dioxuslabs.com/learn/0.5/", "📚 Learn Dioxus" } 65 | a { target: "_blank", href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" } 66 | a { target: "_blank", href: "https://github.com/dioxus-community/", "📡 Community Libraries" } 67 | a { target: "_blank", href: "https://github.com/DioxusLabs/dioxus-std", "⚙️ Dioxus Standard Library" } 68 | a { target: "_blank", href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" } 69 | a { target: "_blank", href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" } 70 | } 71 | } 72 | } 73 | {% endif %} 74 | -------------------------------------------------------------------------------- /Desktop/src/main.rs: -------------------------------------------------------------------------------- 1 | #![allow(non_snake_case)] 2 | 3 | use dioxus::prelude::*; 4 | use dioxus_logger::tracing::{Level, info}; 5 | {% if router %} 6 | #[derive(Clone, Routable, Debug, PartialEq)] 7 | enum Route { 8 | #[route("/")] 9 | Home {}, 10 | #[route("/blog/:id")] 11 | Blog { id: i32 }, 12 | } 13 | {% endif %} 14 | 15 | fn main() { 16 | // Init logger 17 | dioxus_logger::init(Level::INFO).expect("failed to init logger"); 18 | info!("starting app"); 19 | {% if styling == "Tailwind" %} 20 | let cfg = dioxus::desktop::Config::new().with_custom_head(r#""#.to_string()); 21 | LaunchBuilder::desktop().with_cfg(cfg).launch(App); 22 | {% else %} 23 | dioxus::launch(App); 24 | {% endif %} 25 | } 26 | 27 | {% if router %} 28 | #[component] 29 | fn App() -> Element { 30 | rsx! { 31 | Router:: {} 32 | } 33 | } 34 | 35 | #[component] 36 | fn Blog(id: i32) -> Element { 37 | rsx! { 38 | Link { to: Route::Home {}, "Go to counter" } 39 | "Blog post {id}" 40 | } 41 | } 42 | 43 | #[component] 44 | fn Home() -> Element { 45 | let mut count = use_signal(|| 0); 46 | 47 | rsx! { 48 | Link { 49 | to: Route::Blog { 50 | id: count() 51 | }, 52 | "Go to blog" 53 | } 54 | div { 55 | h1 { "High-Five counter: {count}" } 56 | button { onclick: move |_| count += 1, "Up high!" } 57 | button { onclick: move |_| count -= 1, "Down low!" } 58 | } 59 | } 60 | } 61 | {% else %} 62 | #[component] 63 | fn App() -> Element { 64 | // Build cool things ✌️ 65 | 66 | rsx! { 67 | link { rel: "stylesheet", href: "main.css" } 68 | img { src: "header.svg", id: "header" } 69 | div { id: "links", 70 | a { href: "https://dioxuslabs.com/learn/0.5/", "📚 Learn Dioxus" } 71 | a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" } 72 | a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" } 73 | a { href: "https://github.com/DioxusLabs/dioxus-std", "⚙️ Dioxus Standard Library" } 74 | a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", 75 | "💫 VSCode Extension" 76 | } 77 | a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" } 78 | } 79 | } 80 | } 81 | {% endif %} 82 | -------------------------------------------------------------------------------- /Fullstack/src/main.rs: -------------------------------------------------------------------------------- 1 | #![allow(non_snake_case)] 2 | 3 | use dioxus::prelude::*; 4 | use dioxus_logger::tracing; 5 | 6 | {% if router %} 7 | #[derive(Clone, Routable, Debug, PartialEq, serde::Serialize, serde::Deserialize)] 8 | enum Route { 9 | #[route("/")] 10 | Home {}, 11 | #[route("/blog/:id")] 12 | Blog { id: i32 }, 13 | } 14 | {% endif %} 15 | 16 | fn main() { 17 | // Init logger 18 | dioxus_logger::init(tracing::Level::INFO).expect("failed to init logger"); 19 | tracing::info!("starting app"); 20 | launch(App); 21 | } 22 | 23 | {% if router %} 24 | fn App() -> Element { 25 | rsx! { 26 | Router:: {} 27 | } 28 | } 29 | 30 | #[component] 31 | fn Blog(id: i32) -> Element { 32 | rsx! { 33 | Link { to: Route::Home {}, "Go to counter" } 34 | "Blog post {id}" 35 | } 36 | } 37 | 38 | #[component] 39 | fn Home() -> Element { 40 | let mut count = use_signal(|| 0); 41 | let mut text = use_signal(|| String::from("...")); 42 | 43 | rsx! { 44 | Link { 45 | to: Route::Blog { 46 | id: count() 47 | }, 48 | "Go to blog" 49 | } 50 | div { 51 | h1 { "High-Five counter: {count}" } 52 | button { onclick: move |_| count += 1, "Up high!" } 53 | button { onclick: move |_| count -= 1, "Down low!" } 54 | button { 55 | onclick: move |_| async move { 56 | if let Ok(data) = get_server_data().await { 57 | tracing::info!("Client received: {}", data); 58 | text.set(data.clone()); 59 | post_server_data(data).await.unwrap(); 60 | } 61 | }, 62 | "Get Server Data" 63 | } 64 | p { "Server data: {text}"} 65 | } 66 | } 67 | } 68 | {% else %} 69 | fn App() -> Element { 70 | // Build cool things ✌️ 71 | 72 | rsx! { 73 | link { rel: "stylesheet", href: "main.css" } 74 | img { src: "header.svg", id: "header" } 75 | div { id: "links", 76 | a { href: "https://dioxuslabs.com/learn/0.5/", "📚 Learn Dioxus" } 77 | a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" } 78 | a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" } 79 | a { href: "https://github.com/DioxusLabs/dioxus-std", "⚙️ Dioxus Standard Library" } 80 | a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", 81 | "💫 VSCode Extension" 82 | } 83 | a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" } 84 | } 85 | } 86 | } 87 | {% endif %} 88 | 89 | #[server(PostServerData)] 90 | async fn post_server_data(data: String) -> Result<(), ServerFnError> { 91 | tracing::info!("Server received: {}", data); 92 | Ok(()) 93 | } 94 | 95 | #[server(GetServerData)] 96 | async fn get_server_data() -> Result { 97 | Ok("Hello from the server!".to_string()) 98 | } 99 | -------------------------------------------------------------------------------- /Web/assets/header.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Desktop/assets/header.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Fullstack/assets/header.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Liveview/assets/header.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------