- Install Rust with rustup.
- Install cargo-make with
cargo install --force cargo-make
. - Install fnm with
cargo install fnm
and setup your Shell. - Install NodeJS with npm and run
npm install
. - Install Playwright browsers and dependencies with
npx playwright install --with-deps
. - Create an .env file at the root including a Github personal token with the variable
GITHUB_TOKEN
likeGITHUB_TOKEN=...
.
cargo make
: Runserve
andwatch-css
in parallel. Recommended for development.cargo make test
: Build app for production and run tests with Playwright.cargo make format
: Format files. If you are using VSCode they should be formatted on save.cargo make lint
: Check formatting of files.cargo make build
: Build the website for production.cargo make serve
: Build the website for production and serve it with serve.cargo make watch-css
: Watch the CSS files with TailwindCSS.
Is useful to run only certain tests in a browser. For example: cargo make test --project=chrome-desktop --grep=header
- Copy the app/locales/en-US/ folder into app/locales/{id} changing
{id}
with the identifier of the translation.
- Leptos as the components library with a client side rendering approach.
- TailwindCSS as the CSS framework.
- Trunk as the web server (on development) and application builder (on production).
- Playwright for end to end testing.
- app/: Main package with the app entrypoint. It provides the logic where the top level components are composed and handles global states.
- components/: Components library. It provides the components used in the website.
- macros/: It provides compile time macros used in the website to statically generate the data provided by the simple-icons npm package.
- simple-icons/: Simple Icons Rust library. It is a Rust API to the the simple-icons npm package.
- End to end tests are located in end2end/tests/. They are written with Playwright. Configuration is located at end2end/playwright.config.ts.
- The main stylesheet is located at app/stylesheet.css other assets are located at app/assets/. Hopefully you don't need to change this style due to the class-based approach of TailwindCSS framework. Configuration is located at app/tailwind.config.ts.
- The initial HTML is located at app/index.html. It is used by Trunk to generate the distributed HTML. Most frontend assets are located at app/public/.
- Currently tied to Node.js >= 18 to ensure that the
fetch
API is included in the standard library. - Using the nighly Rust toolchain to ensure some nightly Rust features like trait aliases and async closures for the components/ crate.