mirror of
https://github.com/google/comprehensive-rust.git
synced 2025-05-22 10:21:03 +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/zerocopy-example",
|
||||
"src/exercises/concurrency/chat-async",
|
||||
"src/rust-wasm-template/project",
|
||||
"src/rust-wasm-template/server",
|
||||
"src/rust-wasm-template",
|
||||
]
|
||||
|
@ -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.
|
||||
|
@ -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:
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user