Crabsburger Example

Welcome to the Crabsburger example food landing page site for the Dioxus community!

Website

About This Example

This example showcases the new syntax introduced in Dioxus 0.6 and utilizes signals as the state management approach. It's designed to demonstrate best practices and provide a reference for building your own Dioxus applications.

Features

Utilizes the new syntax of Dioxus 0.6
State management with signals
Styling with Tailwind CSS v3.4

Roadmap

Create a button that appears when scrolling the page
Highlight the top menu when scrolling
Implement light and dark mode toggling and set the mode in the HTML tag as required by Tailwind CSS
Save the color scheme to the browser's local storage
Retrieve the browser client's language
Change the language in the HTML tag when switching languages

Important. This project uses the web platform

Quick start

Reinstall the CLI to the git version. For Windows users need to install the Netwide Assembler (NASM). On startup it will open the shell and inside execute this command.

cargo install --git https://github.com/dioxuslabs/dioxus dioxus-cli --locked --force

or you can install the CLI (instead of building from source) use:

cargo binstall dioxus-cli --version v0.6.0-alpha.4

Clone this repository

https://github.com/DioxusGrow/crabsburger.git

and 👇

Development

Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
Install the tailwind css cli: https://tailwindcss.com/docs/installation
Run the following command in the root of the project to start the tailwind CSS compiler:

npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch

Run the following command in the root of the project to start the Dioxus dev server:

dx serve

Open the browser to http://localhost:8080

How to use the Dioxus cli version from github

It often happens that a necessary update is released or fix bugs in a minor version of a project. In this case you can use the github version of cli.

Reinstall the CLI:

cargo install --git https://github.com/dioxuslabs/dioxus dioxus-cli --locked --force

Check Dioxus cli version

dx --version
// dioxus 0.6.0-alpha.4 (e700e00)

Add dependencies to the Cargo.toml file. The Dioxus version from github must match the cli version. In this case it is rev = "e700e00"

[dependencies]
dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "e700e00" features = ["router"] }
dioxus-logger = "0.5.1"

[features]
default = ["web"]
web = ["dioxus/web"]
desktop = ["dioxus/desktop"]

For existing projects, to synchronize with cli, you must also run the command cargo update
Sometimes you will want to use Dioxus sdk, but the version you need will not be the same as Dioxus cli. In that case you can try to use a patch. For example:

[dependencies]
dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "e700e00", features = ["router"] }
dioxus-logger = "0.5.1"
dioxus-sdk = { git = "https://github.com/DioxusLabs/sdk", branch = "feat/dioxus-0.6", features = ["storage"] }

[patch.crates-io]
dioxus = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-lib = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-core = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-core-macro = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-config-macro = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-router = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-router-macro = { git = "https://github.com/dioxuslabs/dioxus" }
dioxus-html = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-html-internal-macro = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-hooks = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-web = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-ssr = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-desktop = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-interpreter-js = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-liveview = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-rsx = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-signals = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-cli-config = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
generational-box = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus_server_macro = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-fullstack = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-autofmt = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-devtools = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
dioxus-devtools-types = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
manganis = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
manganis-core = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }
manganis-macro = { git = "https://github.com/dioxuslabs/dioxus", rev = "e700e00" }

[features]
default = ["web"]
web = ["dioxus/web"]
desktop = ["dioxus/desktop"]

Start the Tailwind CSS compiler and the Dioxus dev server in different terminals:

npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch

You can start web version by default: dx serve or with platform dx serve --platform web

And you can start desktop version: dx serve --platform desktop

If you need a local stylesheet for custom styles inside input.css.

Insert your custom styles inside input.css:

@layer components {
  p {
    @apply p-10 bg-yellow-600;
  }
  .red {
    @apply bg-red-600;
  }
  .yellow {
    @apply bg-yellow-600;
  }
  .blue {
    @apply bg-blue-600;
  }
}

Insert custom classes into the page:

rsx!{
    p { "I" }
    div { class: "red", "want to" }
    div { class: "yellow", "burger" }
    div { class: "blue", "burger" }
}

Rebuild the app:

button r on terminal

dx serve

How to make a release

Make sure you add the languages folder to the monitoring in the Dioxus.toml file:

# which files or dirs will be watcher monitoring
watch_path = ["src", "assets", "lang"]

Use the dx check command to check that there are no errors in the logic for using the signals.

dx check
//output No issues found.

Make a release for web:

dx build --release --platform web

for desktop:

dx build --release --platform desktop

The release is inside /target/dx/fustfood/release/web/public folder is by default the main project folder where the finished site is located.

Netlify deployment

Deploying an application in netlify requires a special settings file to be uploaded to the assets folder so that it is automatically loaded when the project is built. In this repository it is already in the assets folder.

netlify.toml

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

License

This project is open source and available under the MIT License.

RustGrow / crabsburger