diff --git a/examples/counter-isomorphic/Cargo.toml b/examples/counter-isomorphic/Cargo.toml index 8c1cd20f6..d9e652dae 100644 --- a/examples/counter-isomorphic/Cargo.toml +++ b/examples/counter-isomorphic/Cargo.toml @@ -1,5 +1,5 @@ [package] -name = "leptos-counter-isomorphic" +name = "leptos_counter_isomorphic" version = "0.1.0" edition = "2021" @@ -42,3 +42,28 @@ ssr = [ [package.metadata.cargo-all-features] denylist = ["actix-files", "actix-web", "leptos_actix"] skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]] + +[package.metadata.leptos] +# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name +package_name = "leptos_counter_isomorphic" +# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup. +site_root = "/pkg" +# The site_root relative folder where all compiled output (JS, WASM and CSS) is written +# Defaults to pkg +site_pkg_dir = "pkg" +# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to //app.css +# style_file = "src/styles/tailwind.css" +# [Optional] Files in the asset_dir will be copied to the site_root directory +assets_dir = "static/assets" +# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup. +site_address = "127.0.0.1:3000" +# The port to use for automatic reload monitoring +reload_port = 3001 +# [Optional] Command to use when running end2end tests. It will run in the end2end dir. +end2end_cmd = "npx playwright test" +# The browserlist query used for optimizing the CSS. +browserquery = "defaults" +# Set by cargo-leptos watch when building with tha tool. Controls whether autoreload JS will be included in the head +watch = false +# The environment Leptos will run in, usually either "DEV" or "PROD" +env = "DEV" \ No newline at end of file diff --git a/examples/counter-isomorphic/src/counters.rs b/examples/counter-isomorphic/src/counters.rs index 319b0f71a..65771db49 100644 --- a/examples/counter-isomorphic/src/counters.rs +++ b/examples/counter-isomorphic/src/counters.rs @@ -9,9 +9,9 @@ use broadcaster::BroadcastChannel; #[cfg(feature = "ssr")] pub fn register_server_functions() { - GetServerCount::register(); - AdjustServerCount::register(); - ClearServerCount::register(); + _ = GetServerCount::register(); + _ = AdjustServerCount::register(); + _ = ClearServerCount::register(); } #[cfg(feature = "ssr")] diff --git a/examples/counter-isomorphic/src/main.rs b/examples/counter-isomorphic/src/main.rs index b098e3941..8da8ab435 100644 --- a/examples/counter-isomorphic/src/main.rs +++ b/examples/counter-isomorphic/src/main.rs @@ -9,7 +9,6 @@ cfg_if! { use actix_files::{Files}; use actix_web::*; use crate::counters::*; - use std::{net::SocketAddr, env}; #[get("/api/events")] async fn counter_events() -> impl Responder { @@ -30,17 +29,17 @@ cfg_if! { #[actix_web::main] async fn main() -> std::io::Result<()> { - let addr = SocketAddr::from(([127,0,0,1],3000)); crate::counters::register_server_functions(); + let conf = get_configuration().await.unwrap(); + let addr = conf.leptos_options.site_address.clone(); HttpServer::new(move || { - let render_options: RenderOptions = RenderOptions::builder().pkg_path("/pkg/leptos_counter_isomorphic").reload_port(3001).socket_address(addr.clone()).environment(&env::var("RUST_ENV")).build(); - render_options.write_to_file(); + let leptos_options = &conf.leptos_options; App::new() .service(Files::new("/pkg", "./pkg")) .service(counter_events) .route("/api/{tail:.*}", leptos_actix::handle_server_fns()) - .route("/{tail:.*}", leptos_actix::render_app_to_stream(render_options, |cx| view! { cx, })) + .route("/{tail:.*}", leptos_actix::render_app_to_stream(leptos_options.to_owned(), |cx| view! { cx, })) //.wrap(middleware::Compress::default()) }) .bind(&addr)? diff --git a/examples/hackernews-axum/Cargo.toml b/examples/hackernews-axum/Cargo.toml index 73adafe78..517a9e32f 100644 --- a/examples/hackernews-axum/Cargo.toml +++ b/examples/hackernews-axum/Cargo.toml @@ -1,5 +1,5 @@ [package] -name = "leptos-hackernews-axum" +name = "leptos_hackernews_axum" version = "0.1.0" edition = "2021" @@ -49,3 +49,28 @@ ssr = [ [package.metadata.cargo-all-features] denylist = ["axum", "tower", "tower-http", "tokio", "http", "leptos_axum"] skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]] + +[package.metadata.leptos] +# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name +package_name = "leptos_hackernews_axum" +# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup. +site_root = "/pkg" +# The site_root relative folder where all compiled output (JS, WASM and CSS) is written +# Defaults to pkg +site_pkg_dir = "pkg" +# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to //app.css +# style_file = "src/styles/tailwind.css" +# [Optional] Files in the asset_dir will be copied to the site_root directory +assets_dir = "static/assets" +# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup. +site_address = "127.0.0.1:3000" +# The port to use for automatic reload monitoring +reload_port = 3001 +# [Optional] Command to use when running end2end tests. It will run in the end2end dir. +end2end_cmd = "npx playwright test" +# The browserlist query used for optimizing the CSS. +browserquery = "defaults" +# Set by cargo-leptos watch when building with tha tool. Controls whether autoreload JS will be included in the head +watch = false +# The environment Leptos will run in, usually either "DEV" or "PROD" +env = "DEV" \ No newline at end of file diff --git a/examples/hackernews-axum/src/main.rs b/examples/hackernews-axum/src/main.rs index 3cc1c8d24..4ec1d9680 100644 --- a/examples/hackernews-axum/src/main.rs +++ b/examples/hackernews-axum/src/main.rs @@ -12,7 +12,6 @@ if #[cfg(feature = "ssr")] { use http::StatusCode; use std::net::SocketAddr; use tower_http::services::ServeDir; - use std::env; #[tokio::main] async fn main() { @@ -37,14 +36,15 @@ if #[cfg(feature = "ssr")] { ) } - let render_options: RenderOptions = RenderOptions::builder().pkg_path("/pkg/leptos_hackernews_axum").socket_address(addr).reload_port(3001).environment(&env::var("RUST_ENV")).build(); - render_options.write_to_file(); + let conf = get_configuration().await.unwrap(); + let leptos_options = conf.leptos_options; + let addr = leptos_options.site_address.clone(); // build our application with a route let app = Router::new() // `GET /` goes to `root` .nest_service("/pkg", pkg_service) .nest_service("/static", static_service) - .fallback(leptos_axum::render_app_to_stream(render_options, |cx| view! { cx, })); + .fallback(leptos_axum::render_app_to_stream(leptos_options, |cx| view! { cx, })); // run our app with hyper // `axum::Server` is a re-export of `hyper::Server` diff --git a/examples/hackernews/Cargo.toml b/examples/hackernews/Cargo.toml index 904c6fcfd..ab43f1838 100644 --- a/examples/hackernews/Cargo.toml +++ b/examples/hackernews/Cargo.toml @@ -14,10 +14,12 @@ console_log = "0.2" console_error_panic_hook = "0.1" futures = "0.3" cfg-if = "1" -leptos = { version = "0.0.20", default-features = false, features = ["serde"] } -leptos_meta = { version = "0.0", default-features = false } -leptos_actix = { version = "0.0.2", default-features = false, optional = true } -leptos_router = { version = "0.0", default-features = false } +leptos = { path = "../../leptos", default-features = false, features = [ + "serde", +] } +leptos_actix = { path = "../../integrations/actix", optional = true } +leptos_meta = { path = "../../meta", default-features = false } +leptos_router = { path = "../../router", default-features = false } log = "0.4" simple_logger = "2" serde = { version = "1", features = ["derive"] } @@ -43,3 +45,28 @@ ssr = [ [package.metadata.cargo-all-features] denylist = ["actix-files", "actix-web", "leptos_actix"] skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]] + +[package.metadata.leptos] +# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name +package_name = "leptos-hackernews" +# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup. +site_root = "target/site" +# The site_root relative folder where all compiled output (JS, WASM and CSS) is written +# Defaults to pkg +site_pkg_dir = "pkg" +# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to //app.css +# style_file = "src/styles/tailwind.css" +# [Optional] Files in the asset_dir will be copied to the site_root directory +# assets_dir = "static/assets" +# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup. +site_address = "127.0.0.1:3000" +# The port to use for automatic reload monitoring +reload_port = 3001 +# [Optional] Command to use when running end2end tests. It will run in the end2end dir. +end2end_cmd = "npx playwright test" +# The browserlist query used for optimizing the CSS. +browserquery = "defaults" +# Set by cargo-leptos watch when building with tha tool. Controls whether autoreload JS will be included in the head +watch = false +# The environment Leptos will run in, usually either "DEV" or "PROD" +env = "DEV" diff --git a/examples/hackernews/src/main.rs b/examples/hackernews/src/main.rs index 24d34536c..47d62593a 100644 --- a/examples/hackernews/src/main.rs +++ b/examples/hackernews/src/main.rs @@ -8,7 +8,6 @@ cfg_if! { use actix_files::{Files}; use actix_web::*; use leptos_hackernews::*; - use std::{net::SocketAddr, env}; #[get("/style.css")] async fn css() -> impl Responder { @@ -17,16 +16,15 @@ cfg_if! { #[actix_web::main] async fn main() -> std::io::Result<()> { - let addr = SocketAddr::from(([127,0,0,1],3000)); - + let conf = get_configuration().await.unwrap(); + let addr = conf.leptos_options.site_address.clone(); HttpServer::new(move || { - let render_options: RenderOptions = RenderOptions::builder().pkg_path("/pkg/leptos_hackernews").reload_port(3001).socket_address(addr.clone()).environment(&env::var("RUST_ENV")).build(); - render_options.write_to_file(); + let leptos_options = &conf.leptos_options; App::new() .service(Files::new("/pkg", "./pkg")) .service(css) .route("/api/{tail:.*}", leptos_actix::handle_server_fns()) - .route("/{tail:.*}", leptos_actix::render_app_to_stream(render_options, |cx| view! { cx, })) + .route("/{tail:.*}", leptos_actix::render_app_to_stream(leptos_options.to_owned(), |cx| view! { cx, })) //.wrap(middleware::Compress::default()) }) .bind(&addr)? diff --git a/examples/tailwind/Cargo.toml b/examples/tailwind/Cargo.toml index 6e98cdb46..93751c0d7 100644 --- a/examples/tailwind/Cargo.toml +++ b/examples/tailwind/Cargo.toml @@ -1,7 +1,7 @@ [workspace] [package] -name = "example" +name = "leptos_tailwind_example" version = "0.1.0" edition = "2021" @@ -12,12 +12,12 @@ crate-type = ["cdylib", "rlib"] [dependencies] -leptos = { git = "https://github.com/gbj/leptos", default-features = false, features = [ - "serde", +leptos = { path = "../../leptos", default-features = false, features = [ + "serde", ] } -leptos_meta = { git = "https://github.com/gbj/leptos", default-features = false } -leptos_router = { git = "https://github.com/gbj/leptos", default-features = false } - +leptos_actix = { path = "../../integrations/actix", optional = true } +leptos_meta = { path = "../../meta", default-features = false } +leptos_router = { path = "../../router", default-features = false } gloo-net = { version = "0.2", features = ["http"] } log = "0.4" cfg-if = "1.0" @@ -35,13 +35,9 @@ simple_logger = { version = "4.0", optional = true } serde_json = { version = "1.0", optional = true } reqwest = { version = "0.11", features = ["json"], optional = true } -[profile.release] -codegen-units = 1 -lto = true -opt-level = 'z' + [features] -leptos_autoreload = [] default = ["csr"] hydrate = [ "leptos/hydrate", @@ -64,6 +60,7 @@ ssr = [ "leptos_meta/ssr", "leptos_router/ssr", "dep:reqwest", + "dep:leptos_actix", "dep:actix-web", "dep:actix-files", "dep:futures", @@ -71,22 +68,36 @@ ssr = [ "dep:serde_json", ] -[package.metadata.leptos] -# Path, relative to root, to generat rust code to -gen_file = "src/server/generated.rs" -# Path to the source index.html file -index_file = "index.html" -# [Optional] Files in the asset_dir will be copied to the target/site directory -assets_dir = "assets" -# [Optional] Command to use when running end2end tests. It will run in the end2end dir. -end2end_test_cmd = "npx playwright test" -# On which port to serve the client side rendered site (when using --csr option) -csr_port = 3000 -# The port to use for automatic reload monitoring -reload_port = 3001 +[package.metadata.cargo-all-features] +denylist = ["actix-files", "actix-web", "leptos_actix"] +skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]] -[package.metadata.leptos.style] -# This points to the TailwindCSS output file -file = "style/output.css" -# A https://browsersl.ist query -browserquery = "defaults" +# [profile.release] +# codegen-units = 1 +# lto = true +# opt-level = 'z' + +[package.metadata.leptos] +# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name +package_name = "leptos_tailwind_example" +# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup. +site_root = "/pkg" +# The site_root relative folder where all compiled output (JS, WASM and CSS) is written +# Defaults to pkg +site_pkg_dir = "pkg" +# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to //app.css +# style_file = "src/styles/tailwind.css" +# [Optional] Files in the asset_dir will be copied to the site_root directory +assets_dir = "assets" +# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup. +site_address = "127.0.0.1:3000" +# The port to use for automatic reload monitoring +reload_port = 3001 +# [Optional] Command to use when running end2end tests. It will run in the end2end dir. +end2end_cmd = "npx playwright test" +# The browserlist query used for optimizing the CSS. +browserquery = "defaults" +# Set by cargo-leptos watch when building with tha tool. Controls whether autoreload JS will be included in the head +watch = false +# The environment Leptos will run in, usually either "DEV" or "PROD" +env = "DEV" diff --git a/examples/tailwind/README.md b/examples/tailwind/README.md index 3a5a8c8bb..be1ace29b 100644 --- a/examples/tailwind/README.md +++ b/examples/tailwind/README.md @@ -16,7 +16,7 @@ and in this directory. -You can begin editing your app at `src/app/mod.rs`. +You can begin editing your app at `src/app.rs`. ## Installing Tailwind @@ -69,6 +69,37 @@ By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If 4. `cargo install cargo-generate` - install `cargo-generate` binary (should be installed automatically in future) 5. `npm install -g sass` - install `dart-sass` (should be optional in future +## Alternatives to cargo-leptos + +This crate can be run without `cargo-leptos`, using `wasm-pack` and `cargo`. To do so, you'll need to install some other tools. + +1. `cargo install wasm-pack` + +### Server Side Rendering With Hydration + +To run it as a server side app with hydration, first you should run + +```bash +wasm-pack build --target=web --no-default-features --features=hydrate +``` + +to generate the WebAssembly to hydrate the HTML delivered from the server. + +Then run the server with `cargo run` to serve the server side rendered HTML and the WASM bundle for hydration. + +```bash +cargo run --no-default-features --features=ssr +``` + +> Note that if your hydration code changes, you will have to rerun the wasm-pack command above before running +> `cargo run` + +### Client Side Rendering + +You'll need to install trunk to client side render this bundle. +1. `cargo install trunk` +Then the site can be served with `trunk serve --open` + ## Attribution Many thanks to GreatGreg for putting together this guide. You can find the original, with added details, [here](https://github.com/gbj/leptos/discussions/125). diff --git a/examples/tailwind/src/app/mod.rs b/examples/tailwind/src/app.rs similarity index 94% rename from examples/tailwind/src/app/mod.rs rename to examples/tailwind/src/app.rs index a68c7bffd..b9f4f84cc 100644 --- a/examples/tailwind/src/app/mod.rs +++ b/examples/tailwind/src/app.rs @@ -9,6 +9,7 @@ pub fn App(cx: Scope) -> Element { view! { cx,
+

"Welcome to Leptos with Tailwind"

"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."