dioxus-community / lookbook

Apache License 2.0
36 stars 5 forks source link

How is this supposed to run in relation to my app? #1

Closed lynndylanhurley closed 11 months ago

lynndylanhurley commented 11 months ago

I'm new to rust so I apologize if these are stupid questions.

In the README example, you have the dioxus_web::launch(app) in the main function of what looks like the app.

But shouldn't the main function of my app be used to actually run my app?

I checked the dioxus-material app, and it looks like the lookbook directory is a separate app from the main one. This makes sense, but it doesn't look like the lookbook app is able to directly reference the components in the main dioxus_material package. It seems to be loading them from github. If this is the case, then wouldn't that mean that the changes would need to be pushed up to github and reinstalled before they could be observed in lookbook?

So my question is, what is the best way to set up lookbook so that I can observe the changes in real time and have my actual app running concurrently with the lookbook interface?

lynndylanhurley commented 11 months ago

I figured this out. I was able to list the parent app as a dependency by specifying path instead of git in the Cargo.toml file.

For example, my dir structure looks like this:

lookbook/
  src/
    previews/
      mod.rs
      button.rs
    main.rs 
src/
  components/
    mod.rs
    button.rs
  lib.rs
  main.rs

My lookbook/Cargo.toml looks like this:

[package]
name = "app-name-lookbook"
version = "0.1.0"
edition = "2021"

[dependencies]
dioxus = { git = "https://github.com/dioxuslabs/dioxus" }
dioxus-web = { git = "https://github.com/dioxuslabs/dioxus" }
lookbook = { git = "https://github.com/matthunz/lookbook" }
app_name = { path = ".." }

Then to run concurrently, I just run dx serve --hot-reload in two separate terminals from both the root of the project and from the lookbook dir.

matthunz commented 11 months ago

Hey! Glad you found a fix. FYI I only have it setup like that in dioxus-material because lookbook itself uses those components. For your case I might recommend using a #[cfg(feature = "lookbook")] flag with lookbook crate feature. Something like https://github.com/matthunz/crates/blob/cdd7259fe9cfa6a7205b9d9c6d389d97eaf16fdc/src/main.rs#L21