diff --git a/.vscode/settings.json b/.vscode/settings.json index c06767c..637bd69 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -23,6 +23,8 @@ "exercises/4-multitasking/2-parallel-multitasking/2-mutex/Cargo.toml", "exercises/4-multitasking/3-asynchronous-multitasking/1-async-channels/Cargo.toml", "exercises/4-multitasking/3-asynchronous-multitasking/2-async-chat/Cargo.toml", + "exercises/5-rust-for-web/1-rust-for-web-servers/1-lettuce-crop/Cargo.toml", + "exercises/5-rust-for-web/3-rust-in-the-browser/1-lettuce-crop-wasm/Cargo.toml", "exercises/6-rust-for-systems-programming/1-foreign-function-interface/1-crc-in-c/Cargo.toml", "exercises/6-rust-for-systems-programming/1-foreign-function-interface/2-crc-in-rust/Cargo.toml", "exercises/6-rust-for-systems-programming/1-foreign-function-interface/3-qoi-bindgen/Cargo.toml", @@ -34,4 +36,4 @@ "exercises/8-embedded/4-embassy-framework/1-embassy-project/Cargo.toml", ], "rust-analyzer.check.allTargets": false, -} +} \ No newline at end of file diff --git a/book/src/SUMMARY.md b/book/src/SUMMARY.md index c22f0b1..66e10ea 100644 --- a/book/src/SUMMARY.md +++ b/book/src/SUMMARY.md @@ -20,7 +20,9 @@ - [Asynchronous Multitasking](asynchronous-multitasking.md) - [Rust for Web]() - - [Rust for Web](rust-for-web.md) + - [Rust for Web Servers](rust-for-web-servers.md) + - [Rust in the Cloud](rust-in-the-cloud.md) + - [Rust in the Browser](rust-in-the-browser.md) - [Rust for Systems Programming]() - [Foreign Function Interface](foreign-function-interface.md) diff --git a/book/src/rust-for-web-servers.md b/book/src/rust-for-web-servers.md new file mode 100644 index 0000000..5587ac3 --- /dev/null +++ b/book/src/rust-for-web-servers.md @@ -0,0 +1,129 @@ +# Unit 5.1 - Rust for Web Servers + +Slides + +## Exercise 5.1.1: Lettuce Crop +In this exercise, we will build a simple web server with [`axum`](https://lib.rs/crates/axum) which allows users to upload images to crop them. You will learn how to serve static HTML pages along with their associated style sheets and images, and you will learn how to handle POST requests with multipart form data to receive the uploaded images. + +### 3.1.1.A Hello axum +In `exercises/5-rust-for-web/1-rust-for-web/1-lettuce-crop` we have set up the start of our web server. It currently only serves "Hello, world!" for GET requests on the main page. Run the program and go to [http://[::]:7000/](http://[::]:7000/) in your browser to see if it works. + +Note that [http://[::]:7000/](http://[::]:7000/) is the default address for [IPv6](https://en.wikipedia.org/wiki/IPv6). If you do not want to use IPv6, you can use [http://0.0.0.0:7000/](http://0.0.0.0:7000/) instead. The website will also be available on local host, see for example [http://localhost:7000/](http://localhost:7000/), [http://127.0.0.1:7000/](http://127.0.0.1:7000/), or [http://[::1]:7000/](http://[::1]:7000/) (IPv6). + +In `main.rs` you can see the `Router` that is used to serve "Hello, world!". We can chain multiple routes to serve multiple end-points. Try adding a second route which serves GET requests on another page (e.g. `/hello`). + +### 3.1.1.B Serving static files +Currently, our web server only serves static strings. To serve static HTML documents, CSS style sheets, images and other files, we will use the [`ServeDir`](https://docs.rs/tower-http/latest/tower_http/services/struct.ServeDir.html) file server from `tower_http`. We can add this file server to our router as a fallback service to resolve any request which does not match any other defined route with our file server. + +Add a [`fallback_service`](https://docs.rs/axum/latest/axum/routing/struct.Router.html#method.fallback_service) to the router with a `ServeDir` that serves files from the `assets` folder. + +If you now go to [http://0.0.0.0:7000/index.html](http://0.0.0.0:7000/index.html) you should see the Lettuce Crop web page with appropriate styling and an image of a lettuce. + +By default, `ServeDir` will automatically append `index.html` when requesting a path that leads to a directory. This means that if you remove the "Hello, world!" route for `/` from the router, you will also see the Lettuce Crop page on the main page of the website! + +### 3.1.1.C POST requests and dynamic responses +On the Lettuce Crop page we have set up an HTML form, which when submitted sends a POST request to `/crop`: +```html +