feat: Add Rust, web, Node.js example code (#33)

Checking in the finished examples to accompany https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_Wasm#rust_environment_setup - build for the web - target Bundlers (webpack in our case) --------- Co-authored-by: Dipika Bhattacharya <[email protected]>
mdn · Jan 12, 2024 · 8804d07 · 8804d07
1 parent 5a2dd7c
commit 8804d07
Show file tree

Hide file tree

Showing 11 changed files with 4,024 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+target
+dist
+.DS_Store
diff --git a/rust-js/Cargo.lock b/rust-js/Cargo.lock
diff --git a/rust-js/Cargo.toml b/rust-js/Cargo.toml
@@ -0,0 +1,14 @@
+[package]
+name = "hello-wasm"
+version = "0.1.0"
+authors = ["Your Name <[email protected]>"]
+description = "A sample project with wasm-pack"
+license = "MIT/Apache-2.0"
+repository = "https://github.com/yourgithubusername/hello-wasm"
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+wasm-bindgen = "0.2"
diff --git a/rust-js/README.md b/rust-js/README.md
@@ -0,0 +1,39 @@
+# Rust to WebAssembly in web and Node.js
+
+This directory contains examples of compiling Rust code to WebAssembly and using it on the web and in a Node.js application.
+The accompanying documentation can be found in the [Compiling from Rust to WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_Wasm) article on MDN.
+
+## Running the examples
+
+This document assumes you're following the instructions in the above linked MDN article, which covers the prerequisites and the installation of the tools required to build the example.
+
+If you've already installed Rust, `wasm-pack`, and Node.js and wish to skip the setup steps, the next two sections provide instructions on how to run pre-compiled examples on the web and via Node.js, focusing on the differences between the two approaches.
+
+### Running a compiled example on the web
+
+To run the example in your browser, you can open the `index.html` file:
+
+```bash
+# Target the web
+wasm-pack build --target web
+# Serve the page
+python3 -m http.server
+# or if http-server is installed via npm
+http-server ./
+```
+
+You should see an alert box that says "Hello, WebAssembly!".
+
+### Building and running an npm package
+
+To run the Node.js example, you will need to build the package targeting [Bundlers](https://rustwasm.github.io/docs/wasm-bindgen/reference/deployment.html#bundlers), install the Node.js dev dependencies, and then serve the project:
+
+```bash
+# Target bundlers (webpack in our case)
+wasm-pack build --target bundler
+cd site
+# Install the dev dependencies and run the server
+npm i && npm run serve
+```
+
+You should see an alert box that says "Hello, WebAssembly with npm!".
diff --git a/rust-js/index.html b/rust-js/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <title>hello-wasm example</title>
+  </head>
+  <body>
+    <script type="module">
+      import init, { greet } from "./pkg/hello_wasm.js";
+      init().then(() => {
+        greet("WebAssembly");
+      });
+    </script>
+  </body>
+</html>
diff --git a/rust-js/site/index.html b/rust-js/site/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <title>hello-wasm example</title>
+  </head>
+  <body>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/rust-js/site/index.js b/rust-js/site/index.js
@@ -0,0 +1,3 @@
+import * as wasm from "hello-wasm";
+
+wasm.greet("WebAssembly with npm");
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import * as wasm from "hello-wasm";

		wasm.greet("WebAssembly with npm");