107 lines
3.9 KiB
Markdown
107 lines
3.9 KiB
Markdown
# Leptos Starter Template
|
|
|
|
This is a template demonstrating how to integrate [TailwindCSS](https://tailwindcss.com/) with the [Leptos](https://github.com/leptos-rs/leptos) web framework and the [cargo-leptos](https://github.com/akesson/cargo-leptos) tool.
|
|
|
|
If you don't have `cargo-leptos` installed you can install it with
|
|
|
|
`cargo install --locked cargo-leptos`
|
|
|
|
Then run
|
|
|
|
`npx tailwindcss -i ./input.css -o ./style/output.css --watch`
|
|
|
|
and
|
|
|
|
`cargo leptos watch`
|
|
|
|
in this directory.
|
|
|
|
Open browser on [http://localhost:3000/](http://localhost:3000/)
|
|
|
|
You can begin editing your app at `src/app.rs`.
|
|
|
|
## Installing Tailwind
|
|
|
|
You can install Tailwind using `npm`:
|
|
|
|
```bash
|
|
npm install -D tailwindcss
|
|
```
|
|
|
|
If you'd rather not use `npm`, you can install the Tailwind binary [here](https://github.com/tailwindlabs/tailwindcss/releases).
|
|
|
|
## Setting up with VS Code and Additional Tools
|
|
|
|
If you're using VS Code, add the following to your `settings.json`
|
|
|
|
```json
|
|
"emmet.includeLanguages": {
|
|
"rust": "html",
|
|
"*.rs": "html"
|
|
},
|
|
"tailwindCSS.includeLanguages": {
|
|
"rust": "html",
|
|
"*.rs": "html"
|
|
},
|
|
"files.associations": {
|
|
"*.rs": "rust"
|
|
},
|
|
"editor.quickSuggestions": {
|
|
"other": "on",
|
|
"comments": "on",
|
|
"strings": true
|
|
},
|
|
"css.validate": false,
|
|
```
|
|
|
|
Install [Tailwind CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss).
|
|
|
|
Install "VS Browser" extension, a browser at the right window.
|
|
Allow vscode Ports forward: 3000, 3001.
|
|
|
|
## Notes about Tooling
|
|
|
|
By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If you run into any trouble, you may need to install one or more of these tools.
|
|
|
|
1. `rustup toolchain install nightly --allow-downgrade` - make sure you have Rust nightly
|
|
2. `rustup default nightly` - setup nightly as default, or you can use rust-toolchain file later on
|
|
3. `rustup target add wasm32-unknown-unknown` - add the ability to compile Rust to WebAssembly
|
|
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.
|
|
0. `cargo install wasm-pack`
|
|
1. Edit the `[package.metadata.leptos]` section and set `site-root` to `"."`. You'll also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time. You'll also want to edit the call to `get_configuration()` to pass in `Some(Cargo.toml)`, so that Leptos will read the settings instead of cargo-leptos. If you do so, your file/folder names cannot include dashes.
|
|
|
|
### 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/leptos-rs/leptos/discussions/125).
|