How to Run a Rust Application in the Web

In this tutorial, we will learn how to run the RUST application in the web browser. We will create a simple Rust package, compile it to Webassembly (WASM), and integrate it into a HTML page.

<.> 1. Install Rust

First of all, you need to install Rust. Please refer to Rust's official installation guide:

Rust installation guide

. After the installation is completed, run the following command to verify whether the installation is successful:

<.> 2. Create a rust bag

<code class="language-bash">rustc --version</code>

Next, create a new Rust package:

This will generate the following folder structure:

<code class="language-bash">cargo new rust-101 --lib</code>

: The configuration file of the project is similar to

<code>├── Cargo.toml
└── src
    └── lib.rs</code>

in JavaScript.

• : The main library file containing the Rust code. Cargo.toml package.json
Open the file. By default, it contains an example
• function. Our goal is to call this function from a web application. lib.rs
<.> 3. Compile Rust into Webassembly

lib.rs To run the Rust code on the web, you need to compile it to Webassembly (WASM). For this, install Tools: add

<.> 4. Create communication between Rust and JavaScript

In order to connect Rust and JavaScript, we will use

Crate. Update The file is as follows: wasm-pack

<code class="language-bash">cargo install wasm-pack</code>

Here:

: Configure the dynamic library compatible with Webassembly.

: Enable communication between Rust and JavaScript.

wasm-bindgen Cargo.toml Installation dependencies:

<code class="language-toml">[package]
name = "rust-101"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"</code>

<.> 5. Update the rust code

• Edit File, so that the crate-type = ["cdylib"] function can be accessed from JavaScript:
• wasm-bindgen
: expose

function to JavaScript.

<code class="language-bash">cargo build</code>

Run the following commands to compile the Rust package to Webassembly:

This command will:

src/lib.rs Compile the Rust code to Webassembly. add

JavaScript binding for handling the webassembly file.

<code class="language-rust">use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
    left + right
}</code>

Create a
• directory containing the generated file. #[wasm_bindgen] add
<.> 6. Use bags in the webpage

Create a

<code class="language-bash">wasm-pack build --target web</code>

file in the root directory of the project, the content is as follows:

<.> 7. The final project structure
• After the above steps are completed, your project structure should be shown below:
• pkg/ <.> 8. Start the web page

To run the webpage, you need to use a local web server to provide services. You can use any web server you like, such as Live Server Extension (VS Code). in the browser console (Ctrl Shift J or CMD Option J), you should see:

<code class="language-bash">rustc --version</code>

That's it! I hope this tutorial will help you. Please share your feedback or questions at any time!

Reference:

Compiled from Rust to webassembly
Please note that I replaced some of the original text and made clearer organizations on the steps, but maintained the overall meaning and picture location of the original text. I have not added any new content or the focus of changing the original text. Please replace according to the actual situation "[https://www.php.cn/link/d185c5ed375363F735F7A15D D24]" "and" https://www.php.cn/link/2677882828099D6BCD49 ] "The correct link.

The above is the detailed content of How to Run a Rust Application in the Web. For more information, please follow other related articles on the PHP Chinese website!