Building Your First WebAssembly Application with Emscripten and GitHub Codespaces – No Local Setup Required

Introduction

WebAssembly (Wasm) is transforming how we run high-performance code in the browser, enabling languages like C and Rust to execute at near-native speed on web pages. Traditionally, compiling C to WebAssembly required a local toolchain like Emscripten, but modern cloud development environments remove that barrier. In this guide, we’ll walk through creating a simple C program, compiling it to WebAssembly, and embedding it in a fully functional web app – all without installing anything on your own machine. Using GitHub Codespaces and Emscripten, you’ll be able to write, test, and deploy your Wasm project directly from your browser.

Building Your First WebAssembly Application with Emscripten and GitHub Codespaces – No Local Setup Required — Source: towardsdatascience.com

Setting Up Your Cloud Development Environment

Choosing GitHub Codespaces

GitHub Codespaces provides a fully configured cloud IDE based on Visual Studio Code. It comes pre‑installed with essential tools, and you can add Emscripten with a simple terminal command. No local downloads, no environment conflicts – just a fresh, isolated workspace ready in seconds.

Creating a New Codespace

Navigate to a GitHub repository (you can create a new empty one).
Click Code > Open with Codespaces > New codespace.
Wait for the environment to spin up (takes about 30–60 seconds).

Once inside the browser‑based VS Code, you have a full Linux terminal and file system.

Writing and Compiling Your First C Program

Adding Emscripten to the Codespace

Emscripten is a compiler toolchain that turns C/C++ into WebAssembly. Install it directly in your Codespace terminal:

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

After activation, the command emcc (Emscripten’s compiler) will be available.

Writing a Simple C Function

Create a file hello.c:

#include <emscripten/emscripten.h>

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

The EMSCRIPTEN_KEEPALIVE macro ensures the function is exported and not removed during dead code elimination.

Compiling to WebAssembly

Run the following command to generate hello.wasm and a JavaScript glue file hello.js:

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

This produces two files: the compiled Wasm module and a small JavaScript file that handles loading and memory management.

Building the Web Application

Creating an HTML Front‑End

Create index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Wasm Demo</title>
    <script src="hello.js"></script>
</head>
<body>
    <h1>WebAssembly Addition</h1>
    <input type="number" id="a" value="5">
    <input type="number" id="b" value="3">
    <button onclick="runAdd()">Add</button>
    <p id="result"></p>

    <script>
        Module.onRuntimeInitialized = function() {
            const add = Module.cwrap('add', 'number', ['number', 'number']);
            window.runAdd = function() {
                const a = parseInt(document.getElementById('a').value);
                const b = parseInt(document.getElementById('b').value);
                document.getElementById('result').textContent = add(a, b);
            };
        };
    </script>
</body>
</html>

This page lets users input two numbers and calls the Wasm add function when the button is clicked.

Testing Locally Inside the Codespace

GitHub Codespaces includes a built‑in web server. Use Python’s HTTP server or the Live Server extension to preview your app. Type:

python3 -m http.server 8000

Open the forwarded port in your browser (a pop‑up will appear). You should see the addition app running, with the result calculated by WebAssembly. Click Add and verify it works.

Deploying with GitHub Pages

Committing Your Code

Save all files, commit, and push to your GitHub repository:

git add .
git commit -m "First Wasm app"
git push origin main

Enabling GitHub Pages

Go to your repository on GitHub.
Click Settings > Pages.
Under Branch, select main and root directory (/).
Click Save.

After a minute, your app will be live at https://<your-username>.github.io/<repo-name>/. Anyone with the link can run your WebAssembly program directly in the browser.

Conclusion

With GitHub Codespaces and Emscripten, you’ve created a complete WebAssembly project – from C source code to a deployed web application – without installing a single tool locally. This workflow is perfect for prototyping, learning, and even production‑grade Wasm applications. As you gain confidence, explore more advanced Emscripten features like file systems, graphical rendering, and porting larger C libraries.

Frequently Asked Questions

Do I need prior WebAssembly experience?

No. This guide assumes only basic knowledge of C and HTML. The core concepts are explained step by step.

Can I use Rust or other languages?

Yes. Emscripten works for C and C++ exclusively, but other toolchains (like wasm‑pack for Rust) can also be used in Codespaces.

Is the compiled Wasm file optimized?

For production, add the -O2 or -O3 flag to emcc. The example above used no optimization for clarity.

By following this cloud‑first approach, you eliminate local setup friction and focus purely on writing and deploying high‑performance web applications powered by WebAssembly.

Container Orchestration