Svelte Axum Project

Overview:

The svelte-axum-project is a project template for building a Rust Axum backend and Svelte frontend. It provides a simple Single-Page-App (SPA) example and does not use SvelteKit. The project has been updated to version 0.4.2, which includes a migration of axum-sessions to tower-sessions and the removal of a secret key warning due to the migration. The backend has also been updated to version 0.6.20 of axum, 0.5 of axum-sessions, and 0.4 of tower-http. The frontend has been updated to version 2.4.2 of vite-plugin-svelte, 4.0.5 of svelte, and 4.4.5 of vite. Additionally, the backend has made changes to how servedir works for serving front end static assets.

Features:

• Rust Axum backend
• Svelte frontend
• Simple Single-Page-App (SPA) example
• Authorization header middleware
• Session checking middleware
• Store example for token secret
• API route example using authorization header
• Secure route example using sessions for authorization

Installation:

• Using Cargo:

  1. Install cargo-generate: cargo install cargo-generate
  2. Use cargo generate to create a new project: cargo generate jbertovic/svelte-axum-project -n <your-project-name>

• Using git template:

  • Use the “use this template” button on the repository’s page to create a new project from the template.

• Using gh cli:

  • If you have the gh cli installed, you can use the gh repo create --template option to create a new project from the template.

• Back end - Rust Axum:

  • The backend code is located in the “./back_end” directory.
  • The backend serves the front end directory.
  • It includes middleware for checking the authorization header and session existence.
  • There is a store example that holds the token secret for authorization.
  • It also includes an API route example using the authorization header and a secure route example using sessions for authorization.
  • To run the backend, use cargo run from the parent directory, not inside the “./back_end” folder.

• Front end - Svelte:

  • The frontend code is located in the “./front_end” directory.
  • It includes a navbar with login and logout functionality.
  • There is a secure page that shows session information once logged in.
  • It also includes an API fetch example (login not required).
  • To build the static serve file directory, run npm run build from inside the “./front_end” directory.

• Setup:

  1. Install NodeJs and Rust.
  2. Clone the repository.
  3. Inside the “./front_end” folder, run npm install to download all module dependencies.
  4. Inside the root directory of the project, run npm run build to bundle the JS/Svelte code into the public folder.
  5. Run cargo run to start the server from the top level folder.
  6. Access the application in the browser at http://localhost:8080/.

• Full-stack build (Linux only):

  • If you need to build both the backend and frontend at once using Linux, run ./build-fullstack.sh.

Summary:

The svelte-axum-project is a project template that provides an example of building a Single-Page-App (SPA) with a Rust Axum backend and Svelte frontend. It includes features such as authorization header middleware, session checking middleware, and examples of using authorization headers and sessions for secure routes. The installation process involves installing NodeJs and Rust, cloning the repository, and running commands to install dependencies and build the project. The template offers flexibility in terms of installation methods and includes a script for building both the backend and frontend concurrently on Linux.