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)'}); + }); +});