david-wallace-croft / dioxus-prototype

Rust-based Dioxus web app example

Home Page:https://www.persentia.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dioxus Prototype

MIT licensed

  • My first Dioxus application
  • Makes a Content Delivery Network (CDN)-compatible static HTML distribution
    • Includes static prerendering with client-side hydration

Online Demonstration

CroftSoft Dioxus Prototype 2023-10-20

Tutorial

Utilities Installation

Hot Reload

  • cd dioxus-prototype/
  • npm install
    • Installs the utility http-server to serve the HTML
    • Installs the utility pretter to format the HTML
    • Installs the utility rimraf to remove distribution directory dist/
  • npm start
  • Open your browser to http://localhost:8080/
  • Make changes to the HTML in src/lib.rs or the CSS in public/stylesheet.css
  • Note that the changes are updated in your browser as soon as you save

Test Static Prerendering with Hydration

  • npm test
    • Deletes the distribution directory dist/ to start clean
    • Makes the index.html page with the hydration code
    • Inserts the prerendered HTML
    • Formats the HTML using the prettier utility
    • Launches http-server to serve the HTML
    • Opens your browser to the home page

Other Commands

  • npm run clean
    • Deletes the distribution directory dist/ to start clean
  • npm run dist
    • Same as npm test
    • Except that it does not start http-server and open the browser
  • npm run format
    • Runs the utility prettier
  • npm run hydrate
    • Makes the index.html page with the hydration code
  • npm run prerender
    • Inserts the prerendered HTML
  • npm run make
    • Makes the index.html page with the hydration code
    • Inserts the prerendered HTML
    • Runs the utility prettier
    • But does not start by deleting dist/
  • npm run serve
    • Starts the http-server
    • Opens the browser

TODO

  • Restore the prettier configuration
  • Bump the version number

History

  • Initial release: 2022-08-21

About

Rust-based Dioxus web app example

https://www.persentia.com

License:MIT License


Languages

Language:Rust 81.9%Language:CSS 17.2%Language:HTML 0.9%