mirror of
https://github.com/google/comprehensive-rust.git
synced 2025-05-22 18:30:33 +02:00
Use generic server
This commit is contained in:
parent
46c5a44040
commit
9f724d40ce
1272
Cargo.lock
generated
1272
Cargo.lock
generated
File diff suppressed because it is too large
Load Diff
@ -5,6 +5,5 @@ members = [
|
|||||||
"src/bare-metal/useful-crates/allocator-example",
|
"src/bare-metal/useful-crates/allocator-example",
|
||||||
"src/bare-metal/useful-crates/zerocopy-example",
|
"src/bare-metal/useful-crates/zerocopy-example",
|
||||||
"src/exercises/concurrency/chat-async",
|
"src/exercises/concurrency/chat-async",
|
||||||
"src/rust-wasm-template/project",
|
"src/rust-wasm-template",
|
||||||
"src/rust-wasm-template/server",
|
|
||||||
]
|
]
|
||||||
|
@ -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.
|
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
|
- `/static` contains the static files including compiled webassembly.
|
||||||
- `/project` contains the Rust code
|
- `/src/lib.rs` contains the Rust code.
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
@ -29,21 +29,35 @@ Alternatively, see the [installation page](https://rustwasm.github.io/wasm-pack/
|
|||||||
|
|
||||||
## Run the local server
|
## Run the local server
|
||||||
|
|
||||||
```
|
If you have python on your machine, you can simply
|
||||||
cd server
|
|
||||||
|
|
||||||
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`
|
Otherwise a Rust alternative exists and you can install it with
|
||||||
- Locally, visit http://localhost:8080
|
|
||||||
|
```
|
||||||
|
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
|
## Build WASM and copy target to the correct path
|
||||||
|
|
||||||
```
|
```
|
||||||
cd project
|
wasm-pack build --target web --out-dir static/wasm
|
||||||
|
|
||||||
wasm-pack build --target web && cp -r pkg ../server
|
|
||||||
```
|
```
|
||||||
|
|
||||||
This command needs to be re-run to view your latest changes.
|
This command needs to be re-run to view your latest changes.
|
||||||
|
@ -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"
|
|
||||||
|
|
@ -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>
|
|
@ -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
|
|
||||||
}
|
|
82
src/rust-wasm-template/static/index.css
Normal file
82
src/rust-wasm-template/static/index.css
Normal 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
24
src/rust-wasm-template/static/index.html
Normal 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>
|
@ -2,24 +2,44 @@
|
|||||||
|
|
||||||
## Commands to run:
|
## 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:
|
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
|
```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
|
If you have python on your machine, you can simply
|
||||||
cd src/rust-wasm-template/server
|
|
||||||
|
|
||||||
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
|
## Javascript
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user