rust/comprehensive-rust
1
0
Fork 0
mirror of https://github.com/google/comprehensive-rust.git synced 2025-05-22 18:30:33 +02:00
Code Issues Releases Activity

Use generic server

Browse Source
This commit is contained in:
sakex 2023-08-02 22:15:50 +02:00
parent 46c5a44040
commit 9f724d40ce
13 changed files with 281 additions and 1334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1272
Cargo.lock generated
View File

File diff suppressed because it is too large Load Diff

3
Cargo.toml
View File

@ -5,6 +5,5 @@ members = [
"src/bare-metal/useful-crates/allocator-example",
"src/bare-metal/useful-crates/zerocopy-example",
"src/exercises/concurrency/chat-async",
"src/rust-wasm-template/project",
"src/rust-wasm-template/server",
"src/rust-wasm-template",
]

0
src/rust-wasm-template/project/Cargo.toml → src/rust-wasm-template/Cargo.toml
View File

34
src/rust-wasm-template/README.md
View File

@ -2,8 +2,8 @@
This repository contains the minimum amount of code needed to experiment with WebAssembly. Including a web server to serve the HTML and WASM as well as the javascript boilerplate needed to load WASM.
- `/server` contains the Web server as well as the static files
- `/project` contains the Rust code
- `/static` contains the static files including compiled webassembly.
- `/src/lib.rs` contains the Rust code.
## Installation
@ -29,21 +29,35 @@ Alternatively, see the [installation page](https://rustwasm.github.io/wasm-pack/
## Run the local server
```
cd server
If you have python on your machine, you can simply
cargo run
```
cd rust-wasm-template/static
python3 -m http.server
```
- On a devcontainer, go to `PORTS` and open the link under `Local Address` for Port `8080`
- Locally, visit http://localhost:8080
Otherwise a Rust alternative exists and you can install it with
```
cargo install cargo server
```
And run
```
cd rust-wasm-template/static
cargo-server
```
- On a devcontainer, go to `PORTS` and open the link under `Local Address` for Port `8000`
- Locally, visit http://localhost:8000
## Build WASM and copy target to the correct path
```
cd project
wasm-pack build --target web && cp -r pkg ../server
wasm-pack build --target web --out-dir static/wasm
```
This command needs to be re-run to view your latest changes.

10
src/rust-wasm-template/server/Cargo.toml
View File

@ -1,10 +0,0 @@
[package]
name = "server"
version = "0.1.0"
edition = "2021"
publish = false
[dependencies]
actix-web = "3.3.2"
actix-files = "0.5.0"

106
src/rust-wasm-template/server/files/index.html
View File

@ -1,106 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebAssembly Template</title>
<style>
@font-face {
font-family: SourceCodePro;
src: url(/font.otf);
}
body {
background-color: #282c34;
font-family: "SourceCodePro";
}
h1 {
margin-left: 40px;
max-width: 530px;
color: #ca6568;
}
i {
color: #ca6568;
}
p, ul {
margin-left: 40px;
max-width: 530px;
text-align: justify;
color: #99a0ab;
}
li {
color: #ca6568;
background-color: #31363f;
margin-bottom: 20px;
max-width: 470px;
padding: 10px;
}
a {
color: #5fade9;
}
button {
background-color: #99a0ab;
width: 200px;
padding: 5px 0;
margin-left: calc(50% - 100px - 11px);
border-radius: 5px;
border: 0;
cursor: pointer;
transition: 1s;
}
button:hover {
background-color: #282c34;
color: white;
}
input, select {
width: 150px;
padding: 5px;
background-color: #31363f;
border: 1px solid #99a0ab;
color: #99a0ab;
border-radius: 4px;
}
#wasmoutput {
background-color: aliceblue;
color: #282c34;
padding: 10px;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
display: inline-block;
min-height: 1em;
min-width: 1em;
}
img {
width: 300px;
height: 300px;
object-fit: contain;
}
</style>
</head>
<body>
<h1>
WebAssembly Template
</h1>
<p>
This repository contains the minimum amount of code needed to experiment with WebAssembly. Including a web server to serve the HTML and WASM as well as the javascript boilerplate needed to load WASM.
</p>
<p>
Edit <a href="https://github.com/google/comprehensive-rust/tree/main/src/rust-wasm-template/server/files/index.mjs">server/files/index.mjs</a> to edit the Javascript.
</p>
<p>
WASM output: <span id="wasmoutput" />
</p>
<script type="module" src="/files/index.mjs"></script>
</body>
</html>

50
src/rust-wasm-template/server/src/main.rs
View File

@ -1,50 +0,0 @@
use actix_files::NamedFile;
use actix_web::{get, web, App, HttpServer, Result};
use std::path::PathBuf;
#[get("/")]
async fn index() -> Result<NamedFile> {
let path: PathBuf = "./files/index.html".parse()?;
Ok(NamedFile::open(path)?.use_last_modified(true))
}
#[get("/files/{name}")]
async fn files(web::Path(name): web::Path<String>) -> Result<NamedFile> {
let path: PathBuf = format!("./files/{}", name).parse()?;
Ok(NamedFile::open(path)?.use_last_modified(true))
}
#[get("/font.otf")]
async fn font() -> Result<NamedFile> {
let path: PathBuf = "./files/source-code-regular.otf".parse()?;
Ok(NamedFile::open(path)?.use_last_modified(true))
}
#[get("/wasm/{name}")]
async fn serve_wasm(web::Path(name): web::Path<String>) -> Result<NamedFile> {
let path: PathBuf = format!("./pkg/{}", name).parse()?;
Ok(NamedFile::open(path)?.use_last_modified(true))
}
#[get("/wasm/snippets/{snippet_name}/{name}")]
async fn serve_wasm_snippet(
web::Path((snippet_name, name)): web::Path<(String, String)>,
) -> Result<NamedFile> {
let path: PathBuf = format!("./pkg/snippets/{}/{}", snippet_name, name).parse()?;
Ok(NamedFile::open(path)?.use_last_modified(true))
}
#[actix_web::main]
async fn main() -> std::io::Result<()> {
HttpServer::new(|| {
App::new()
.service(index)
.service(files)
.service(serve_wasm)
.service(serve_wasm_snippet)
.service(font)
})
.bind("127.0.0.1:8080")?
.run()
.await
}

0
src/rust-wasm-template/project/src/lib.rs → src/rust-wasm-template/src/lib.rs
View File

82
src/rust-wasm-template/static/index.css Normal file
View File

@ -0,0 +1,82 @@
@font-face {
font-family: SourceCodePro;
src: url(/source-code-regular.otf);
}
body {
background-color: #282c34;
font-family: "SourceCodePro";
}
h1 {
margin-left: 40px;
max-width: 530px;
color: #ca6568;
}
i {
color: #ca6568;
}
p, ul {
margin-left: 40px;
max-width: 530px;
text-align: justify;
color: #99a0ab;
}
li {
color: #ca6568;
background-color: #31363f;
margin-bottom: 20px;
max-width: 470px;
padding: 10px;
}
a {
color: #5fade9;
}
button {
background-color: #99a0ab;
width: 200px;
padding: 5px 0;
margin-left: calc(50% - 100px - 11px);
border-radius: 5px;
border: 0;
cursor: pointer;
transition: 1s;
}
button:hover {
background-color: #282c34;
color: white;
}
input, select {
width: 150px;
padding: 5px;
background-color: #31363f;
border: 1px solid #99a0ab;
color: #99a0ab;
border-radius: 4px;
}
#wasmoutput {
background-color: aliceblue;
color: #282c34;
padding: 10px;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
display: inline-block;
min-height: 1em;
min-width: 1em;
}
img {
width: 300px;
height: 300px;
object-fit: contain;
}

24
src/rust-wasm-template/static/index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebAssembly Template</title>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<h1>
WebAssembly Template
</h1>
<p>
This repository contains the minimum amount of code needed to experiment with WebAssembly. Including a web server to serve the HTML and WASM as well as the javascript boilerplate needed to load WASM.
</p>
<p>
Edit <a href="https://github.com/google/comprehensive-rust/tree/main/src/rust-wasm-template/static/index.mjs">server/files/index.mjs</a> to edit the Javascript.
</p>
<p>
WASM output: <span id="wasmoutput" />
</p>
<script type="module" src="/index.mjs"></script>
</body>
</html>

0
src/rust-wasm-template/server/files/index.mjs → src/rust-wasm-template/static/index.mjs
View File

0
src/rust-wasm-template/server/files/source-code-regular.otf → src/rust-wasm-template/static/source-code-regular.otf
View File

34
src/webassembly/load-wasm-module.md
View File

@ -2,24 +2,44 @@
## Commands to run:
### Compile Rust lib to WASM
You can compile the basic WASM library provided in [rust-wasm-template](https://github.com/google/comprehensive-rust/tree/main/src/rust-wasm-template) with this command:
```shell
cd src/rust-wasm-template/project
cd src/rust-wasm-template
wasm-pack build --target web && cp -r pkg ../server
wasm-pack build --target web --out-dir static/wasm
```
You can start the web server provided in [rust-wasm-template](https://github.com/google/comprehensive-rust/tree/main/src/rust-wasm-template) with this command:
### Serve static files
Webassembly has to be loaded from an HTTP server in order to be loaded on the brower.
```shell
cd src/rust-wasm-template/server
If you have python on your machine, you can simply
cargo run
```
cd rust-wasm-template/static
python3 -m http.server
```
Open the web page on port `8080`. HTML and JS files are provided at [rust-wasm-template/server](https://github.com/google/comprehensive-rust/tree/main/src/rust-wasm-template/server/files).
Otherwise a Rust alternative exists and you can install it with
```
cargo install cargo server
```
And run
```
cd rust-wasm-template/static
cargo-server
```
Open the web page on port `8000`. HTML and JS files are provided at [rust-wasm-template/static](https://github.com/google/comprehensive-rust/tree/main/src/rust-wasm-template/static).
## Javascript