Add server api call.

Cargo.toml

@@ -1,5 +1,5 @@
 [workspace]
-members = ["app", "front", "server"]
+members = ["app", "front", "server", "server-api"]
 
 # need to be applied only to wasm build
 [profile.release]

app/Cargo.toml

@@ -8,8 +8,11 @@ edition = "2021"
 [dependencies]
 leptos = { workspace = true, features = ["serde"] }
 leptos_meta = { workspace = true }
+server-api = { path="../server-api", optional=true }
+serde = { version = "1", features = ["derive"] }
+cfg-if = "1"
 
 [features]
 default = ["hydrate"]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate"]
-ssr = ["leptos/ssr", "leptos_meta/ssr"]
+ssr = ["leptos/ssr", "leptos_meta/ssr", "dep:server-api"]

app/src/lib.rs

@@ -1,16 +1,39 @@
+use cfg_if::cfg_if;
 use leptos::*;
 use leptos_meta::*;
 
+#[server(HelloWorld, "/api")]
+pub async fn server_hello_world() -> Result<(), ServerFnError> {
+    server_api::hello_world();
+    Ok(())
+}
+
 #[component]
 pub fn App(cx: Scope) -> impl IntoView {
     provide_meta_context(cx);
 
+    let hello_world = create_action(cx, |_| server_hello_world());
+
     view! {
         cx,
         <Stylesheet id="leptos" href="pkg/project.css"/>
         <Title text="Cargo Leptos Workspace" />
-        <div class="bg-green-300 py-32">
-            <h1 class="w-full text-3xl text-center">"Hi from your Leptos app with Tailwind!"</h1>
+        <div class="flex flex-col bg-green-300 py-32 space-y-8">
+            <h1 class="text-3xl text-center">"Hi from your Leptos app with Tailwind!"</h1>
+            <button
+              class="px-3 py-2 mx-auto border border-black bg-white hover:bg-yellow-200 focus:bg-yellow-200 rounded"
+              on:click=move |_| hello_world.dispatch(())
+            >
+              "Print Hello on the server"
+            </button>
         </div>
     }
 }
+
+cfg_if! {
+  if #[cfg(feature = "ssr")] {
+      pub fn register_server_functions() {
+          _ = HelloWorld::register();
+      }
+  }
+}

css/main.css

@@ -513,25 +513,115 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.flex {
+  display: flex;
+}
+
 .w-full {
   width: 100%;
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .bg-green-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
 }
 
+.bg-slate-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
 .py-32 {
   padding-top: 8rem;
   padding-bottom: 8rem;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .text-center {
   text-align: center;
 }
 
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
+}
+
+.hover\:bg-white:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-yellow-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+}
+
+.focus\:bg-white:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.focus\:bg-yellow-200:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
 }

server-api/Cargo.toml

@@ -0,0 +1,8 @@
+[package]
+name = "server-api"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]

server-api/src/lib.rs

@@ -0,0 +1,3 @@
+pub fn hello_world() {
+    println!("Hello World!");
+}

server/src/main.rs

@@ -24,14 +24,15 @@ async fn main() {
 
     log::info!("serving at {addr}");
 
+    app_package::register_server_functions();
+
     // Generate the list of routes in your Leptos App
     let routes = generate_route_list(app).await;
 
     // build our application with a route
     let leptos_options = conf.leptos_options;
     let app = Router::new()
         .route("/favicon.ico", get(file_and_error_handler))
-        .route("/main.css", get(file_and_error_handler))
         .leptos_routes(leptos_options.clone(), routes, app)
         .fallback(file_and_error_handler)
         .layer(Extension(Arc::new(leptos_options)));