Build Your First WebAssembly App Entirely in the Browser: A Step-by-Step Guide

Introduction

WebAssembly (Wasm) is revolutionizing how we run high-performance code in the browser. Traditionally, building a Wasm application required installing toolchains like Emscripten locally—a process that could be daunting for beginners. But thanks to cloud-based development environments like GitHub Codespaces, you can now write, compile, test, and deploy your first WebAssembly program entirely from within your web browser. No local installation is needed. In this guide, we'll walk you through the entire workflow: setting up a Codespace, writing a simple C program, compiling it to WebAssembly with Emscripten, testing it in the browser, and finally deploying it as a live web app. By the end, you'll have a fully functional Wasm-powered page that you can share with anyone.

What is WebAssembly?

WebAssembly is a binary instruction format that allows code written in languages like C, C++, or Rust to run in the browser at near-native speed. It acts as a portable compilation target, enabling developers to reuse existing codebases for the web. With Emscripten, a tool that compiles C/C++ to Wasm, you can bring the power of compiled languages to JavaScript environments.

Why GitHub Codespaces?

GitHub Codespaces provides a fully configured, cloud-based development environment accessible from any browser. It comes with tools like clang, make, and git pre-installed. For WebAssembly development, all you need is Emscripten, which can be installed with a single command. By using Codespaces, you avoid the complexity of setting up local toolchains, making it ideal for learning, prototyping, or collaboration.

Step 1: Set Up Your Codespace

Start by creating a new GitHub repository (or use an existing one). Click the Code button, then select Open with Codespaces. If you haven't created a codespace before, GitHub will prompt you to create one. Once the environment is ready, you'll see a full VS Code interface in your browser. Open the integrated terminal (Ctrl+`).

Install Emscripten

In the terminal, run the following commands:

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

This clones the Emscripten SDK, installs the latest version, and sets up the environment variables. After this, you can verify the installation with emcc --version.

Step 2: Write Your First C Program

Create a new file called hello.c:

#include <stdio.h>

int main() {
    printf("Hello, WebAssembly!\n");
    return 0;
}

This simple program prints a message to the console. For WebAssembly, we'll compile it to a module that can be loaded by JavaScript.

Step 3: Compile to WebAssembly

In the terminal, run:

emcc hello.c -o hello.html

This tells Emscripten to compile hello.c and generate an HTML file (hello.html) that includes the Wasm module, a JavaScript glue file, and a simple page that runs the program. The output is ready to serve as a web app.

If you want only the Wasm and JavaScript files (without the HTML), you can use:

emcc hello.c -o hello.js

But for this tutorial, the HTML output is ideal because it includes everything needed to test immediately.

Step 4: Test Your WebAssembly App

GitHub Codespaces provides a way to preview web pages. Right-click on the generated hello.html file in the file explorer and select Open with Live Server (or use the Preview button in the editor). A new tab will open showing your app. You should see "Hello, WebAssembly!" printed on the page. This confirms that your C code compiled and ran successfully in the browser.

To test more interactively, you can modify the C code to accept input or perform calculations. For example, add a function that adds two numbers and exports it to JavaScript.

Step 5: Deploy Your Web App

Once you're happy with your app, deploy it so others can access it. The simplest method is to use GitHub Pages. Follow these steps:

1. Commit and push your code to the repository (including the generated hello.html, hello.js, and hello.wasm).
2. Go to your repository settings on GitHub, scroll to Pages under Code and automation.
3. Under Source, select Deploy from a branch and choose the main branch (or gh-pages) with the root folder.
4. Save the settings. After a few minutes, your site will be live at https://yourusername.github.io/repository-name/hello.html.

Alternatively, you can use other static hosting services like Netlify or Vercel by simply dragging the folder.

Next Steps and Conclusion

You've just written, compiled, tested, and deployed your first WebAssembly application—all within a web browser, thanks to GitHub Codespaces and Emscripten. This workflow opens up WebAssembly development to anyone with an internet connection.

From here, you can explore: adding C libraries, calling Wasm functions from JavaScript, handling memory, or building more complex graphical applications using SDL or OpenGL via Emscripten. WebAssembly is a powerful tool for performance-critical web applications like games, video editing, and data processing.

By leveraging cloud-based development, you eliminate the friction of local setup and can focus on what matters: writing code and bringing it to the web. Happy coding!