Samy Fodil

Posted on Sep 3

Building a Serverless Web Game With WebAssembly and Three.js

#gamedev #webassembly #programming #javascript

In this tutorial, we'll build an online tower stacking game.

👉 Try the final result: Play Now

🛠️ Tech Stack

Frontend: Three.js + TypeScript
Backend: Go serverless functions on Taubyte
Local Dev: Dream (Taubyte's local cloud) + GitHub integration

⚡ Step 1: Run the Frontend Locally

Clone and run the game — at this stage, it has no leaderboard:

git clone https://github.com/taubyte/example-games-tower-blocks.git
cd example-games-tower-blocks

npm install
npm run dev

Open http://localhost:3000 — the game works, but scores aren't saved anywhere yet.

🔧 Step 2: Start Taubyte Local Cloud (Dream)

Install Dream and start a local cloud instance:

npm install -g @taubyte/dream
dream new multiverse

Keep this terminal open — it runs your local Taubyte cloud.

🌐 Step 3: Connect to Console

Go to console.taubyte.com
Log in with your email and GitHub

From the dropdown, select Dream/blackhole (your local cloud).

🖥️ Step 4: Create Applications

Create and open a new project , this will create a code and a config repositories to save your project's data .

You'll need two apps:

frontend → hosts the website
backend → handles leaderboard logic

Frontend Setup

Inside frontend app, add a Website resource

Name: tower_game
Repo: pick your GitHub fork (console fetches repos automatically)
Domain: use the default generated domain
Path: /

Push configuration to GitHub (green Push button).

In another terminal, trigger builds:

dream inject push-all

trigger a build for the website specifically:

dream inject push-specific --rid <ID> --fn <FULL_NAME>

Find rid and full_name in the YAML tab of the resource.

Add your Dream domain to /etc/hosts:

127.0.0.1 your-domain.blackhole.localtau

In the console, click the ⚡ button on the website resource → frontend should now load locally.

🗄️ Step 5: Implement Backend

Create Database

Inside backend app, add a Database resource:

Name: leaderboard
Matcher: /leaderboard

Create Library

Add a Library resource:

Name: api_leaderboard
Language: Go (empty template)

Use this reference implementation:
The Library's Code

Create Functions

In the Functions tab, create:

getAll
- Method: GET
- Path: /api/leaderboard
- Entry: getAll

get
- Method: GET
- Path: /api/score
- Query param: player_name
- Entry: get

set
- Method: POST
- Path: /api/score
- Entry: set

🚀 Step 6: Deploy and Test

Push builds:

dream inject push-all

(Use push-specific for just the library if needed.)

Wait for builds to complete in the Builds tab.

Test each function by clicking the ⚡ button in the console → you'll see live responses.

🌍 Step 7: Push to Production

All that is left now is to push to production.

It's a really simple process:

Log out of the local cloud's console.
Make sure you already have a Taubyte cloud online set up.
Log in using your email and domain name.
Instead of creating a project like we did the first time, import the local project from GitHub. Select it from the dropdown and click Import.

Open the imported project. Change the applications' local generated domain to a production one by toggling Generate Domain. Do this for both frontend and backend apps.

Push your changes → this will trigger a config build.

If your project has a Library or Website, you must register the resource with Auth before builds work. This can be done from the web console using the broken heart icon 💔 next to the resource.

Opening your game now in the production domain should work properly with all features up and running 🎉