Rust Leptos router, packaging and deploy

Previously, we have learned about the integration of Leptos and Tailwind CSS. Next, we will learn how to implement routing, and how to package and deploy.

The quality of a framework’s routing can greatly affect the developer’s mentality. A good routing makes it easier for developers to like the framework and keep them happy throughout the development process.

Let’s see if Leptos router is worth learning.

1. Add leptos_router

cargo add leptos_router --features=csr

2. Create an index.rs file as new component. Those who have written Vue and React should be familiar with components. Let’s learn about Leptos.

src/index.rs

use leptos::*;

#[component]
pub fn Index() -> impl IntoView {
    view! { <p class="text-red-600">"Hello, world!"</p> }
}

Modify src/main.rs, Use leptos_router and import the index component.

src/main.rs

use leptos::*;
use leptos_router::*;

mod index;

use index::Index;

#[component]
pub fn App() -> impl IntoView {
    view! {
      <Router>
        <div>
            <header>
            </header>
            <main>
                <Routes>
                    <Route path="/" view=Index />
                </Routes>
            </main>
            <footer>
            </footer>
        </div>
      </Router>
    }
}

fn main() {
    mount_to_body(|| view! { <App /> })
}

As you can see from the code, an App component is defined in main.rs and attached to it when it is mounted. At the same time, the Index component is imported and referenced in Routers.

3. Run

trunk serve --open

In the opened browser, you can see that the conent of the Index component is displayed normally.

4. Packaging

trunk build --release

Using the build command will generate a dist directory in the project root directory. The files in the dist directory are what we want to publish to the server. We just need to upload them to the corresponding directory of nginx.

5. Deploy

nginx example.

server {
    listen 3002;
    server_name localhost;
    location / {
        root /home/ubuntu/wwwroot/hello-leptos;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

Please note try_files.