0Pricing
WebAssembly (WASM) for High Performance Apps · Leçon

Configurer Rust pour WebAssembly

Configurez votre environnement de développement Rust pour les cibles WebAssembly et initialisez un nouveau projet WASM.

Configurer Rust pour WebAssembly est une leçon WebAssembly (WASM) for High Performance Apps gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage WebAssembly (WASM) for High Performance Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours WebAssembly (WASM) for High Performance Apps comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Rust & WebAssembly Setup

Welcome! Rust is a fantastic language for building high-performance WebAssembly (WASM) modules.

Its focus on speed, memory safety, and control makes it ideal for web applications needing native-like performance.

In this lesson, we'll configure your environment and create your first Rust-WASM project.

Verify Rust & Cargo

Before we dive into WASM, ensure you have the Rust toolchain installed. This includes Rustc (the compiler) and Cargo (the package manager).

  • You can check by typing rustc --version and cargo --version in your terminal.
  • If not installed, visit rustup.rs to get rustup, the official Rust installer.

First Rust Program

Let's confirm your Rust setup is working. Create a file named main.rs and add this code. Then run it using cargo run.

fn main() {
  println!("Hello from Rust!");
}

Install WASM Target

WebAssembly isn't a default target for Rust. You need to explicitly add it to your toolchain.

The wasm32-unknown-unknown target is a generic WASM target that doesn't assume any specific host environment (like a browser or Node.js).

Run this command in your terminal:

rustup target add wasm32-unknown-unknown

Meet wasm-pack

Building Rust code for WebAssembly can involve several steps. That's where wasm-pack comes in!

wasm-pack is a powerful command-line tool that streamlines the entire workflow: compiling your Rust code, generating JavaScript bindings, and packaging it for web usage.

Install wasm-pack Tool

Since wasm-pack is a Rust application, you can install it using Cargo, Rust's package manager.

Run this command in your terminal:

cargo install wasm-pack

This might take a moment as it compiles the tool.

Initialize WASM Project

Now let's create a new Rust project specifically for WebAssembly. wasm-pack can scaffold this for you.

Navigate to your desired projects directory and run:

wasm-pack new my-first-wasm-app

This command creates a new directory, my-first-wasm-app, with a basic Rust library structure ready for WASM.

Explore Project Files

Inside your new my-first-wasm-app directory, you'll find:

  • Cargo.toml: Rust's manifest file, defining project dependencies and metadata.
  • src/lib.rs: This is where your Rust code for the WASM module will live. Unlike traditional Rust applications, WASM modules are usually libraries.
  • .gitignore: Standard Git ignore file.

Simple WASM Function

Open src/lib.rs. You'll see some boilerplate. Let's add a simple function that can be called from JavaScript:

The #[wasm_bindgen] attribute tells wasm-bindgen (which wasm-pack uses) to generate JavaScript glue code for this function.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
  format!("Hello, {}!", name)
}

// You might also find a #[wasm_bindgen]
// macro for a `start` function or other
// initial setup in a new project.

Compile to WASM

With your Rust WASM code ready, it's time to compile it into a WebAssembly module and its JavaScript bindings.

Navigate into your project directory (my-first-wasm-app) and run:

wasm-pack build

This command compiles your Rust code, generates the necessary .wasm and .js files, and places them in a new pkg directory.

WASM Setup Quiz

You've learned about the essential tools for Rust WebAssembly development. Which of the following commands are crucial for setting up a Rust environment for WASM and creating a new project?

Recap: Rust WASM Setup

Great job! You've successfully set up your Rust environment for WebAssembly development.

We covered:

  • Verifying your Rust toolchain.
  • Adding the wasm32-unknown-unknown target.
  • Installing and using wasm-pack to initialize and build your first WASM project.
  • Understanding the basic project structure and a simple #[wasm_bindgen] function.

Next, you'll learn how to load and run your compiled WASM module in a web browser using JavaScript!

Questions Fréquemment Posées

La leçon « Configurer Rust pour WebAssembly » est-elle gratuite ?

Oui — le texte complet de « Configurer Rust pour WebAssembly » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours WebAssembly (WASM) for High Performance Apps, passe à CoddyKit PRO. Le cours WebAssembly (WASM) for High Performance Apps comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Configurer Rust pour WebAssembly » ?

Configurez votre environnement de développement Rust pour les cibles WebAssembly et initialisez un nouveau projet WASM. Tu pratiques WebAssembly (WASM) for High Performance Apps avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer WebAssembly (WASM) for High Performance Apps ?

Aucune expérience préalable n'est requise. WebAssembly (WASM) for High Performance Apps sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Configurer Rust pour WebAssembly » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon WebAssembly (WASM) for High Performance Apps ?

Oui. Chaque leçon WebAssembly (WASM) for High Performance Apps inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Configurer Rust pour WebAssembly
  2. Écrire des fonctions Rust pour WASM
  3. Interopérabilité JS efficace avec `wasm-bindgen`
  4. Gestion des erreurs à la frontière de WASM
← Retour à WebAssembly (WASM) for High Performance Apps