From bc6f614f78bf92ea99a160bf47f49c1063fcea01 Mon Sep 17 00:00:00 2001 From: Pieter Frenssen Date: Mon, 18 May 2020 01:28:47 +0300 Subject: [PATCH] Improve the static files example. (#317) * Improve the static files example. * Replace the broken websocket example with a simple static HTML page. * Show how to serve a second directory which is located inside the main directory but has file listing enabled. * Demonstrate that a hierarchy of static files can be served by placing the JS and CSS files in their respective subfolders. * Document how to use the example in the README. * Improve formatting. --- static_index/README.md | 15 +++ static_index/src/main.rs | 15 +-- .../static/{actixLogo.png => images/logo.png} | Bin static_index/static/index.html | 90 ------------------ static_index/static/root/css/example.css | 11 +++ static_index/static/{ => root}/favicon.ico | Bin static_index/static/root/index.html | 13 +++ static_index/static/root/js/example.js | 7 ++ 8 files changed, 55 insertions(+), 96 deletions(-) rename static_index/static/{actixLogo.png => images/logo.png} (100%) delete mode 100644 static_index/static/index.html create mode 100644 static_index/static/root/css/example.css rename static_index/static/{ => root}/favicon.ico (100%) create mode 100644 static_index/static/root/index.html create mode 100644 static_index/static/root/js/example.js diff --git a/static_index/README.md b/static_index/README.md index 7b03edbd..5e3f666a 100644 --- a/static_index/README.md +++ b/static_index/README.md @@ -1 +1,16 @@ # static_index + +Demonstrates how to serve static files. Inside the `./static` folder you will find 2 subfolders: + +* `root`: A tree of files that will be served at the web root `/`. This includes the `css` and `js` folders, each + containing an example file. +* `images`: A list of images that will be served at `/images` path, with file listing enabled. + +## Usage + +```bash +$ cd examples/static_index +$ cargo run +``` + +This will start the server on port 8080, it can be viewed at [http://localhost:8080](http://localhost:8080). diff --git a/static_index/src/main.rs b/static_index/src/main.rs index d3d05e61..2879da5b 100644 --- a/static_index/src/main.rs +++ b/static_index/src/main.rs @@ -1,4 +1,4 @@ -use actix_files as fs; +use actix_files::Files; use actix_web::{middleware, App, HttpServer}; #[actix_rt::main] @@ -8,12 +8,15 @@ async fn main() -> std::io::Result<()> { HttpServer::new(|| { App::new() - // enable logger + // Enable the logger. .wrap(middleware::Logger::default()) - .service( - // static files - fs::Files::new("/", "./static/").index_file("index.html"), - ) + // We allow the visitor to see an index of the images at `/images`. + .service(Files::new("/images", "static/images/").show_files_listing()) + // Serve a tree of static files at the web root and specify the index file. + // Note that the root path should always be defined as the last item. The paths are + // resolved in the order they are defined. If this would be placed before the `/images` + // path then the service for the static images would never be reached. + .service(Files::new("/", "./static/root/").index_file("index.html")) }) .bind("127.0.0.1:8080")? .run() diff --git a/static_index/static/actixLogo.png b/static_index/static/images/logo.png similarity index 100% rename from static_index/static/actixLogo.png rename to static_index/static/images/logo.png diff --git a/static_index/static/index.html b/static_index/static/index.html deleted file mode 100644 index e59e13f1..00000000 --- a/static_index/static/index.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - - - - - -

Chat!

-
-  | Status: - disconnected -
-
-
-
- - -
- - diff --git a/static_index/static/root/css/example.css b/static_index/static/root/css/example.css new file mode 100644 index 00000000..ff987741 --- /dev/null +++ b/static_index/static/root/css/example.css @@ -0,0 +1,11 @@ +body { + text-align: center; +} + +h1 { + font-family: sans-serif; +} + +img { + transition: .5s ease-in-out; +} diff --git a/static_index/static/favicon.ico b/static_index/static/root/favicon.ico similarity index 100% rename from static_index/static/favicon.ico rename to static_index/static/root/favicon.ico diff --git a/static_index/static/root/index.html b/static_index/static/root/index.html new file mode 100644 index 00000000..027f5d5e --- /dev/null +++ b/static_index/static/root/index.html @@ -0,0 +1,13 @@ + + + + + + + + + +

Actix-web

+ Actix logo + + diff --git a/static_index/static/root/js/example.js b/static_index/static/root/js/example.js new file mode 100644 index 00000000..86d57cb7 --- /dev/null +++ b/static_index/static/root/js/example.js @@ -0,0 +1,7 @@ +jQuery(document).ready(function () { + let rotation = 0; + jQuery("img").click(function () { + rotation += 360; + jQuery("img").css({'transform': 'rotate(' + rotation + 'deg)'}); + }); +});