-
Notifications
You must be signed in to change notification settings - Fork 133
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Jeremy Chen
committed
Feb 20, 2024
1 parent
ad603e9
commit 7015f2c
Showing
100 changed files
with
6,106 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,186 @@ | ||
# Configure Project | ||
|
||
This chapter will teach you how to configure the CLI with the `Dioxus.toml` file. There's an [example](#config-example) which has comments to describe individual keys. You can copy that or view this documentation for a more complete learning experience. | ||
|
||
"🔒" indicates a mandatory item. Some headers are mandatory, but none of the keys inside them are. In that case, you only need to include the header, but no keys. It might look weird, but it's normal. | ||
|
||
## Structure | ||
|
||
Each header has its TOML form directly under it. | ||
|
||
### Application 🔒 | ||
|
||
```toml | ||
[application] | ||
``` | ||
|
||
Application-wide configuration. Applies to both web and desktop. | ||
|
||
* **name** 🔒 - Project name & title. | ||
```toml | ||
name = "my_project" | ||
``` | ||
* **default_platform** 🔒 - The platform this project targets | ||
```toml | ||
# Currently supported platforms: web, desktop | ||
default_platform = "web" | ||
``` | ||
* **out_dir** - The directory to place the build artifacts from `dx build` or `dx serve` into. This is also where the `assets` directory will be copied into. | ||
```toml | ||
out_dir = "dist" | ||
``` | ||
* **asset_dir** - The directory with your static assets. The CLI will automatically copy these assets into the **out_dir** after a build/serve. | ||
```toml | ||
asset_dir = "public" | ||
``` | ||
* **sub_package** - The sub package in the workspace to build by default. | ||
```toml | ||
sub_package = "my-crate" | ||
``` | ||
|
||
### Web.App 🔒 | ||
|
||
```toml | ||
[web.app] | ||
``` | ||
|
||
Web-specific configuration. | ||
|
||
* **title** - The title of the web page. | ||
```toml | ||
# HTML title tag content | ||
title = "project_name" | ||
``` | ||
* **base_path** - The base path to build the application for serving at. This can be useful when serving your application in a subdirectory under a domain. For example, when building a site to be served on GitHub Pages. | ||
```toml | ||
# The application will be served at domain.com/my_application/, so we need to modify the base_path to the path where the application will be served | ||
base_path = "my_application" | ||
``` | ||
|
||
### Web.Watcher 🔒 | ||
|
||
```toml | ||
[web.watcher] | ||
``` | ||
|
||
Development server configuration. | ||
|
||
* **reload_html** - If this is true, the cli will rebuild the index.html file every time the application is rebuilt | ||
```toml | ||
reload_html = true | ||
``` | ||
* **watch_path** - The files & directories to monitor for changes | ||
```toml | ||
watch_path = ["src", "public"] | ||
``` | ||
|
||
* **index_on_404** - If enabled, Dioxus will serve the root page when a route is not found. | ||
*This is needed when serving an application that uses the router*. However, when serving your app using something else than Dioxus (e.g. GitHub Pages), you will have to check how to configure it on that platform. In GitHub Pages, you can make a copy of `index.html` named `404.html` in the same directory. | ||
```toml | ||
index_on_404 = true | ||
``` | ||
|
||
### Web.Resource 🔒 | ||
|
||
```toml | ||
[web.resource] | ||
``` | ||
|
||
Static resource configuration. | ||
|
||
* **style** - CSS files to include in your application. | ||
```toml | ||
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** - JavaScript files to include in your application. | ||
```toml | ||
script = [ | ||
# Include from asset_dir. | ||
"./public/index.js", | ||
# Or from an online CDN. | ||
"https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.js" | ||
] | ||
``` | ||
|
||
### Web.Resource.Dev 🔒 | ||
|
||
```toml | ||
[web.resource.dev] | ||
``` | ||
|
||
This is the same as [`[web.resource]`](#webresource-), but it only works in development servers. For example, if you want to include a file in a `dx serve` server, but not a `dx serve --release` server, put it here. | ||
|
||
### Web.Proxy | ||
|
||
```toml | ||
[[web.proxy]] | ||
``` | ||
|
||
Configuration related to any proxies your application requires during development. Proxies will forward requests to a new service. | ||
|
||
* **backend** - The URL to the server to proxy. The CLI will forward any requests under the backend relative route to the backend instead of returning 404 | ||
```toml | ||
backend = "http://localhost:8000/api/" | ||
``` | ||
This will cause any requests made to the dev server with prefix /api/ to be redirected to the backend server at http://localhost:8000. The path and query parameters will be passed on as-is (path rewriting is currently not supported). | ||
|
||
## Config example | ||
|
||
This includes all fields, mandatory or not. | ||
|
||
```toml | ||
[application] | ||
|
||
# App name | ||
name = "project_name" | ||
|
||
# The Dioxus platform to default to | ||
default_platform = "web" | ||
|
||
# `build` & `serve` output path | ||
out_dir = "dist" | ||
|
||
# The static resource path | ||
asset_dir = "public" | ||
|
||
[web.app] | ||
|
||
# HTML title tag content | ||
title = "project_name" | ||
|
||
[web.watcher] | ||
|
||
# When watcher is triggered, regenerate the `index.html` | ||
reload_html = true | ||
|
||
# Which files or dirs will be monitored | ||
watch_path = ["src", "public"] | ||
|
||
# Include style or script assets | ||
[web.resource] | ||
|
||
# CSS style file | ||
style = [] | ||
|
||
# Javascript code file | ||
script = [] | ||
|
||
[web.resource.dev] | ||
|
||
# Same as [web.resource], but for development servers | ||
|
||
# CSS style file | ||
style = [] | ||
|
||
# JavaScript files | ||
script = [] | ||
|
||
[[web.proxy]] | ||
backend = "http://localhost:8000/api/" | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# Create a Project | ||
|
||
Once you have the Dioxus CLI installed, you can use it to create your own project! | ||
|
||
## Initializing a project | ||
|
||
First, run the `dx create` command to create a new project. | ||
|
||
> It clones this [template](https://github.com/DioxusLabs/dioxus-template), which is used for web apps. | ||
> | ||
> You can create your project from a different template by passing the `template` argument: | ||
> ``` | ||
> dx create --template gh:dioxuslabs/dioxus-template | ||
> ``` | ||
Next, navigate into your new project using `cd project-name`, or simply opening it in an IDE. | ||
> Make sure the WASM target is installed before running the projects. | ||
> You can install the WASM target for rust using rustup: | ||
> ``` | ||
> rustup target add wasm32-unknown-unknown | ||
> ``` | ||
Finally, serve your project with `dx serve`! The CLI will tell you the address it is serving on, along with additional info such as code warnings. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
# Introduction | ||
|
||
The ✨**Dioxus CLI**✨ is a tool to get Dioxus projects off the ground. | ||
|
||
There's no documentation for commands here, but you can see all commands using `dx --help` once you've installed the CLI! Furthermore, you can run `dx <command> --help` to get help with a specific command. | ||
|
||
## Features | ||
|
||
* Build and pack a Dioxus project. | ||
* Format `rsx` code. | ||
* 热重载 for `web` platform. | ||
* Create a Dioxus project from a template repository. | ||
* And more! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
# Installation | ||
|
||
## Install the stable version (recommended) | ||
|
||
``` | ||
cargo install dioxus-cli | ||
``` | ||
|
||
If you get an OpenSSL error on installation, ensure the dependencies listed [here](https://docs.rs/openssl/latest/openssl/#automatic) are installed. | ||
|
||
## Install the latest development build through git | ||
|
||
To get the latest bug fixes and features, you can install the development version from git. However, this is not fully tested. That means you're probably going to have more bugs despite having the latest bug fixes. | ||
|
||
``` | ||
cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli | ||
``` | ||
|
||
This will download the CLI from the master branch, and install it in Cargo's global binary directory (`~/.cargo/bin/` by default). | ||
|
||
Run `dx --help` for a list of all the available commands. Furthermore, you can run `dx <command> --help` to get help with a specific command. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,139 @@ | ||
# CLI Plugin development | ||
|
||
**IMPORTANT: Ignore this documentation. Plugins are yet to be released and chances are it won't work for you. This is just what plugins *could* look like.** | ||
|
||
In the past we used `dx tool` to use and install tools, but it was a flawed system. | ||
Tools were hard-coded by us, but people want more tools than we could code, so this plugin system was made to let | ||
anyone develop plugins and use them in Dioxus projects. | ||
|
||
Plugin resources: | ||
* [Source code](https://github.com/DioxusLabs/dioxus/tree/master/packages/cli/src/plugin) | ||
* [Unofficial Dioxus plugin community](https://github.com/DioxusPluginCommunity). Contains certain plugins you can use right now. | ||
|
||
### Why Lua? | ||
|
||
We chose Lua `5.4` to be the plugin developing language, | ||
because it's extremely lightweight, embeddable and easy to learn. | ||
We installed Lua into the CLI, so you don't need to do it yourself. | ||
|
||
Lua resources: | ||
* [Official website](https://www.lua.org/). You can basically find everything here. | ||
* [Awesome Lua](https://github.com/LewisJEllis/awesome-lua). Additional resources (such as Lua plugins for your favorite IDE), and other *awesome* tools! | ||
|
||
## Creating a plugin | ||
|
||
A plugin is just an `init.lua` file. | ||
You can include other files using `dofile(path)`. | ||
You need to have a plugin and a manager instance, which you can get using `require`: | ||
```lua | ||
local plugin = require("plugin") | ||
local manager = require("manager") | ||
``` | ||
|
||
You need to set some `manager` fields and then initialize the plugin: | ||
```lua | ||
manager.name = "My first plugin" | ||
manager.repository = "https://github.com/john-doe/my-first-plugin" -- The repository URL. | ||
manager.author = "John Doe <[email protected]>" | ||
manager.version = "0.1.0" | ||
plugin.init(manager) | ||
``` | ||
|
||
You also need to return the `manager`, which basically represents your plugin: | ||
```lua | ||
-- Your code here. | ||
-- End of file. | ||
|
||
manager.serve.interval = 1000 | ||
return manager | ||
``` | ||
|
||
And you're ready to go. Now, go and have a look at the stuff below and the API documentation. | ||
|
||
### Plugin info | ||
|
||
You will encounter this type in the events below. The keys are as follows: | ||
* `name: string` - The name of the plugin. | ||
* `repository: string` - The plugin repository URL. | ||
* `author: string` - The author of the plugin. | ||
* `version: string` - The plugin version. | ||
|
||
### Event management | ||
|
||
The plugin library has certain events that you can subscribe to. | ||
|
||
* `manager.on_init` - Triggers the first time the plugin is loaded. | ||
* `manager.build.on_start(info)` - Triggers before the build process. E.g., before `dx build`. | ||
* `manager.build.on_finish(info)` - Triggers after the build process. E.g., after `dx build`. | ||
* `manager.serve.on_start(info)` - Triggers before the serving process. E.g., before `dx serve`. | ||
* `manager.serve.on_rebuild_start(info)` - Triggers before the server rebuilds the web with 热重载. | ||
* `manager.serve.on_rebuild_end(info)` - Triggers after the server rebuilds the web with 热重载. | ||
* `manager.serve.on_shutdown` - Triggers when the server is shutdown. E.g., when the `dx serve` process is terminated. | ||
|
||
To subscribe to an event, you simply need to assign it to a function: | ||
|
||
```lua | ||
manager.build.on_start = function (info) | ||
log.info("[plugin] Build starting: " .. info.name) | ||
end | ||
``` | ||
|
||
### Plugin template | ||
|
||
```lua | ||
package.path = library_dir .. "/?.lua" | ||
|
||
local plugin = require("plugin") | ||
local manager = require("manager") | ||
|
||
-- deconstruct api functions | ||
local log = plugin.log | ||
|
||
-- plugin information | ||
manager.name = "Hello Dixous Plugin" | ||
manager.repository = "https://github.com/mrxiaozhuox/hello-dioxus-plugin" | ||
manager.author = "YuKun Liu <[email protected]>" | ||
manager.version = "0.0.1" | ||
|
||
-- init manager info to plugin api | ||
plugin.init(manager) | ||
|
||
manager.on_init = function () | ||
-- when the first time plugin been load, this function will be execute. | ||
-- system will create a `dcp.json` file to verify init state. | ||
log.info("[plugin] Start to init plugin: " .. manager.name) | ||
end | ||
|
||
---@param info BuildInfo | ||
manager.build.on_start = function (info) | ||
-- before the build work start, system will execute this function. | ||
log.info("[plugin] Build starting: " .. info.name) | ||
end | ||
|
||
---@param info BuildInfo | ||
manager.build.on_finish = function (info) | ||
-- when the build work is done, system will execute this function. | ||
log.info("[plugin] Build finished: " .. info.name) | ||
end | ||
|
||
---@param info ServeStartInfo | ||
manager.serve.on_start = function (info) | ||
-- this function will after clean & print to run, so you can print some thing. | ||
log.info("[plugin] Serve start: " .. info.name) | ||
end | ||
|
||
---@param info ServeRebuildInfo | ||
manager.serve.on_rebuild = function (info) | ||
-- this function will after clean & print to run, so you can print some thing. | ||
local files = plugin.tool.dump(info.changed_files) | ||
log.info("[plugin] Serve rebuild: '" .. files .. "'") | ||
end | ||
|
||
manager.serve.on_shutdown = function () | ||
log.info("[plugin] Serve shutdown") | ||
end | ||
|
||
manager.serve.interval = 1000 | ||
|
||
return manager | ||
``` |
Oops, something went wrong.