Build and Deploy Your First WebAssembly App Entirely in Your Browser

Introduction: The Browser as Your Complete Development Environment

Imagine being able to write, compile, test, and deploy a WebAssembly application without installing a single tool on your local machine. Thanks to the combination of Emscripten (a compiler toolchain that converts C/C++ code to WebAssembly) and GitHub Codespaces (a cloud-based development environment), this is now entirely possible. In this article, you'll learn how to create your first WebAssembly program and wrap it in a simple web app — all from within your web browser.

Build and Deploy Your First WebAssembly App Entirely in Your Browser — Source: towardsdatascience.com

What Is WebAssembly and Why Use It?

WebAssembly (often abbreviated Wasm) is a low-level binary instruction format that runs in modern web browsers at near-native speed. It allows you to take code written in languages like C, C++, or Rust and run it on the web with performance comparable to natively compiled applications. For developers coming from C/C++ backgrounds, WebAssembly opens the door to bringing legacy codebases or compute-intensive algorithms to the client side.

Why Combine Emscripten with GitHub Codespaces?

Traditionally, setting up Emscripten required a local build environment with Python, CMake, and the Emscripten SDK. GitHub Codespaces eliminates this friction by providing a preconfigured, containerized environment that runs in the cloud. You get a full VSCode-like editor, a terminal, and access to all necessary tools — directly from your browser. This setup is perfect for learning, quick prototyping, or even production workflows when you need a reproducible build environment.

Step-by-Step: Your First WebAssembly Program

We'll walk through a simple example: a C function that adds two numbers and returns the result. Then we'll expose that function to JavaScript and build a minimal web page to test it.

1. Set Up Your Codespace

Navigate to your GitHub repository (or create a new one) and click the green Code button, then select Open with Codespaces. Choose a machine type and wait for the environment to spin up. Once inside, you'll have a terminal ready to use.

2. Install Emscripten (if not pre-installed)

Most Codespaces images don't come with Emscripten pre-installed, but adding it is trivial. Run the following commands in the terminal:

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

You can also add the activation command to your .bashrc so that every new terminal session picks it up automatically.

3. Write the C Program

Create a file called add.c with the following content:

#include <emscripten/emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
    return a + b;
}

The EMSCRIPTEN_KEEPALIVE macro ensures the function is not optimized away during compilation and remains callable from JavaScript.

4. Compile to WebAssembly

Run the Emscripten compiler to produce the Wasm file and a JavaScript glue file:

emcc add.c -o add.js -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall","cwrap"]'

This generates add.wasm and add.js. The glue file handles loading the Wasm module and provides JavaScript wrappers.

5. Create a Minimal Web Page

Create index.html that imports the glue script and calls the add function:

<!DOCTYPE html>
<html>
<head>
  <script src="add.js"></script>
</head>
<body>
  <h2>WebAssembly Add Test</h2>
  <p>Result: <span id="result"></span></p>
  <script>
    Module.onRuntimeInitialized = function() {
      var result = Module.ccall('add', 'number', ['number','number'], [3, 4]);
      document.getElementById('result').innerText = result;
    };
  </script>
</body>
</html>

The onRuntimeInitialized callback ensures the Wasm module is ready before we call any functions.

6. Test Locally in Codespaces

You can serve the files using a simple HTTP server. Emscripten's emrun tool works nicely:

emrun --no_browser --port 8080 index.html

Then open http://localhost:8080 in the browser within Codespaces (or use the forwarded ports feature). You should see the result 7 displayed.

Deploying Your WebAssembly App

GitHub Codespaces also makes deployment straightforward. You can push the compiled files to a GitHub repository and enable GitHub Pages in the repository settings. Your WebAssembly web app will be live at https://your-username.github.io/repository-name/. No build server, no manual uploads — just a browser-based workflow from code to production.

Further Optimization and Real‑World Use

Once you're comfortable with this flow, explore more advanced features:

Shared memory and threading using -s USE_PTHREADS=1 (requires cross-origin isolation headers).
Callbacks from C to JavaScript using emscripten_run_script.
Interacting with the DOM via EM_JS macros or SDL ports.

For larger projects, consider structuring your C code into multiple files and linking them with Emscripten. The cloud‑based approach scales beautifully — you never outgrow your local machine's RAM or CPU because the heavy lifting happens in the cloud.

Conclusion

Writing your first WebAssembly program entirely in a browser using Emscripten and GitHub Codespaces is a powerful way to lower the barrier to entry. You get a fully functional development environment with zero local setup, and you can go from idea to deployment in minutes. Whether you're a seasoned C developer exploring the web platform or a web developer curious about system languages, this approach offers a clean, portable path into WebAssembly.

Start your next Wasm project in a Codespace today — your browser is all you need.

Tags: