Configure Project

This chapter will introduce Dioxus.toml and anatomy the config file.

Structure

We use toml to define some info for dioxus project.

Application

name - project name & title
default_platform - which platform target for this project.
```
# current support: web, desktop
# default: web
default_platform = "web"
```
change this to desktop, the dioxus build & serve will default build desktop app.
out_dir - which directory to put the output file; use dioxus build & service, the output will put at this directory, and the assets will be also copy to here.
```
out_dir = "dist"
```
asset_dir - which direcotry to put your static, assets file, cli will automatic copy all file to out_dir, so you can put some resource file in there, like CSS, JS, Image file.
```
asset_dir = "public"
```
sub_package - the sub package in the workspace to build

Application.Tools

You can combine different tools with dioxus.

binaryen - Use the binaryen tooling suite.
```
# current support: wasm-opt
# default: web
binaryen = { wasm_opt = true }
```
Use the wasm_opt = true key/pair value to activate optimization with wasm-opt. When building on release profile, Dioxus will run wasm_opt with -Oz option.
tailwindcss - Use the tailwindcss standalone binary to generate a Tailwind CSS bundle file.
```
tailwindcss = { input = "main.css", config = "tailwind.config.js" }
```
You can set two optional keys :
- input: path of the input CSS file (default value is "public/tailwind.css")
- config: path to the config file for Tailwind (default value is "src/tailwind.config.js")
When building on release profile, Dioxus will run tailwindcss with the --minify option.

Note : Dioxus will automatically include the generated tailwind file in the index.html

Web.App

Web platform application config:

title - this value will display on the web page title. like <title></title> tag.
```
# HTML title tag content
title = "dioxus app | ⛺"
```
base_path - The base path to build the appliation for serving at. This can be useful when serving your application in a subdirectory in a domain. For example when building a site to be served on github pages.
```
# The application will be served at domain.com/my_application/
base_path = "my_application"
```

Web.Watcher

Web platform dev-server watcher config:

reload_html - a boolean value; when watcher trigger, regenerate index.html file.
```
# when watcher trigger, regenerate the `index.html`
reload_html = true
```
watch_path - which files & directories will be watcher monitoring.
```
watch_path = ["src", "public"]
```
index_on_404 - If enabled, Dioxus CLI will serve the root page when a route is not found. This is needed when serving an application that uses the router
```
index_on_404 = true
```

Web.Resource

Include some CSS Javascript resources into html file.

style - include some style(CSS) file into html.

style = [
   # include from public_dir.
   "./assets/style.css",
   # or some asset from online cdn.
   "https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.css"
]

script - include some script(JS) file into html.

style = [
    # include from public_dir.
    "./assets/index.js",
    # or some asset from online cdn.
    "https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.js"
]

Web.Resource.Dev

Only include resources at Dev mode.