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: 5 10 = 15 

          Hello Rust

refer to:

compiled from Rust to webassembly 

 Please note that I replaced some of the original words and organized a clearer organization to 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, \\\"[here should be inserted here to install the guide link] and\\\" [[here should be inserted into the relevant document link] \\\"as the correct link. ","image":"http://www.luping.net/uploads/20250203/173858941067a0c4e2e6ee9.jpg173858941067a0c4e2e6ef5.jpg","datePublished":"2025-02-03T23:36:00+08:00","dateModified":"2025-02-03T23:36:00+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
  

  
    
    
    

  

    

      

        "If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"      

      

    

  

  

    

      

        
        
      

      

        

          Online tools
        

        

          Software tutorial
        

        

          Site navigation
        

        

          Programming
        

      

      
    

  






    
    
    

      

        
        Front page > Programming > How to Run a Rust Application in the Web
      

      

        

          

            

              
How to Run a Rust Application in the Web

              

                

                  Published on 2025-02-03                

                

                  
                  Browse:262
                 
                

                
                
                
                
                
                
                
                
              

            

            

            

              
              
 How to Run a Rust Application in the Web

 In this tutorial, we will learn how to run Rust applications 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, 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: 

 Rustc -version 
rustc --version
 2. Create a rust package 
 
 Next, create a new Rust package: 


 Cargo New Rust-101-Lib 
 
cargo new rust-101 --lib
 —— Cargo.toml
└── SRC
    R── r b 
 


├── Cargo.toml
└── src
    └── lib.rs
 package.json 
     in JavaScript. 
  • 
 lib.rs : The main library files containing Rust code. 


    •  lib.rs 
  •  file. By default, it contains an example  add  function. Our goal is to call this function from a web application. 
    • 

 
 3. Compile Rust to webassembly 
 To run the Rust code on the web, you need to compile it to Webassembly (WASM). For this reason, install  WASM-PACK  Tools: 


 Cargo Install WASM-PACK  

 
 4. Create communication between Rust and JavaScript  

 In order to connect Rust and JavaScript, we will use 
cargo install wasm-pack
 files are as follows: 

 [package]
name = "Rust-101"
version = "0.1.0"
Edition = "2021"

[lib]
Crate-Type = ["CDYLIB"]

[Dependencies]
WASM-Bindgen = "0.2" ] 


here:

 crate-type = ["cdylib"] : Configure package to generate a dynamic library compatible with Webassembly. 


[package]
name = "rust-101"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"


 Installation dependencies: 


     Cargo Build 
  •  
 5. Update the rast code 
    •  
  • 
 src/lib.rs  file, so that 
    •  add 
 function can be visited from JavaScript: 


 use wasmm_bindgen :: prelude ::*;

#[WASM_BINDGEN]
PUB FN add (left: U64, Right: U64) -> U64 {
    left right
} 
cargo build
: expose 
 add  function to JavaScript. 



 Run the following commands to compile the rust package to webassembly: 
 WASM-PACK Build-Target Web  

] This command will: 
use wasm_bindgen::prelude::*;

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


     generates JavaScript binding for handling the webassembly file. 
  • 
 Create a  pkg/ directory containing a file. 

    • 

 6. Use bags in the webpage 
 


wasm-pack build --target web
 

  
    
     Hello Rust 
  
  
    
  
 
 


    ] 7. Final Project Structure 
  •  
    • 

  •  After the above steps are completed, your project structure should be shown below: 
    • ]

  •  .
. ─ ─ Cargo.Lock
. ─ ─ Cargo.toml
X ─ ─ Index.html
├──PKG
│ a── Package.json
│ u── Rust_101.d.ts
│ u── Rust_101.js
│ u── Rust_101_bg.wasm
│ u── Rust_101_bg.wasm.d.ts
└── SRC
    R── r b  
    • 

 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: 
 5 10 = 15 
 


  
    
    Hello Rust
  
  
    
  

refer to:



 compiled from Rust to webassembly 


 Please note that I replaced some of the original words and organized a clearer organization to 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, "[here should be inserted here to install the guide link] and" [[here should be inserted into the relevant document link] "as the correct link. 
            

            
            

                      

          

          

            

              Latest tutorial
              More>
            

            
          

        

        

          

            

              ClassificationMore>
            

            

                            Learn japanese
                            Learn Korean
                            Learn Chinese
                            Learn foreign language
                            Game
                            Common problem
                            Technology peripherals
                            AI
                            Software tutorial
                            Programming
                            Article
                          

          

          

            

              
Study Chinese

            

            
          

          

            

              ToolMore>
            

            

                            
                
                

                  
Image base64 decoding

                

              
                            
                
                

                  
Chinese Pinyin

                

              
                            
                
                

                  
Unicode encoding

                

              
                            
                
                

                  
JS obfuscation encryption compression

                

              
                            
                
                

                  
URL hexadecimal encryption tool

                

              
                            
                
                

                  
UTF-8 encoding conversion tool

                

              
                            
                
                

                  
Online Ascii encoding and decoding tools

                

              
                            
                
                

                  
MD5 encryption tool

                

              
                            
                
                

                  
Hash/Hash text online encryption and decryption tool

                

              
                            
                
                

                  
Online SHA encryption

                

              
                          

          

          

        

      

    

    
    
    

    

        
Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected]
          We will handle it for you as soon as possible.

        
Copyright© 2022 湘ICP备2022001581号-3