← Back to courses
MABNI

Local Network Guide

Run the studio on one PC, a classroom network, or Raspberry Pi.

This guide is written for people who do not want “server talk.” Tiny miracle: a server is just one computer sharing the folder so other computers can open it in a browser.

Important before starting

Student progress is saved inside each browser on each computer. If Student A works on PC 3, the progress stays on PC 3 unless the teacher exports/imports it from Teacher tools. The local server shares the game files. It does not create a central student database.

Option 1One PC onlyFastest test Option 2XAMPP serverWindows classroom Option 3Same networkWi-Fi or cables Option 4Raspberry PiSmall offline server

Option 1: Run on one computer only

  1. Extract the ZIP file. Do not run it from inside the ZIP. Yes, Windows loves pretending ZIPs are folders. They are not real folders.
  2. Open the extracted folder.
  3. Double-click index.html.
  4. Click Start Learning Free.
  5. The app opens in the browser and works offline.

Use this for: testing, one laptop, one student, or checking that the build works before setting up the lab.

Option 2: Put it on one Windows PC using XAMPP

This makes one computer act like the “classroom server.” Students open the app from their own computers using the server computer’s IP address.

Step A: Prepare the server computer

  1. Choose one computer to be the server. It should stay turned on during class.
  2. Install XAMPP on that computer.
  3. Open XAMPP Control Panel.
  4. Click Start beside Apache.
  5. If Windows asks about firewall access, allow Apache on the private/local network.

Step B: Copy the studio into XAMPP

  1. Extract the MABNI ZIP file.
  2. Rename the extracted folder to something simple, for example: mabni-code.
  3. Copy that folder.
  4. Open C:\xampp\htdocs.
  5. Paste the folder inside htdocs.

Step C: Test on the server computer

  1. Open a browser on the server computer.
  2. Type http://localhost/mabni-code.
  3. If the home page opens, the server computer is ready.

Step D: Find the server IP address

  1. On the server computer, press Windows + R.
  2. Type cmd and press Enter.
  3. Type ipconfig and press Enter.
  4. Look for IPv4 Address. It usually looks like 192.168.1.25.
  5. Write it down. That number is the classroom address for the server.

Step E: Open from student computers

  1. Connect the student computers to the same Wi-Fi or the same wired network.
  2. Open a browser on each student computer.
  3. Type http://SERVER-IP/mabni-code.
  4. Example: http://192.168.1.25/mabni-code.

How the classroom network should look

You do not need internet. You only need all devices connected to the same local network.

  • Wireless setup: server PC and student PCs connect to the same Wi-Fi router.
  • Wired setup: server PC and student PCs connect to the same switch/router using network cables.
  • No internet setup: the router can have no internet. It can still connect the devices together locally.

If one student computer cannot open the site, check these three boring but necessary things: same Wi-Fi, correct IP address, and Apache allowed in the firewall.

Option 4: Use a Raspberry Pi as the offline server

A Raspberry Pi can replace the server PC. It is small, cheap, and less likely to be stolen by someone needing “just one laptop for five minutes,” the ancient classroom curse.

Simple temporary method

  1. Copy the extracted studio folder to the Raspberry Pi.
  2. Open Terminal inside that folder.
  3. Run: python3 -m http.server 8000 --bind 0.0.0.0
  4. Find the Pi IP by running: hostname -I
  5. From another computer on the same Wi-Fi, open: http://PI-IP:8000

Better permanent method with Nginx

  1. Open Terminal on the Raspberry Pi.
  2. Run: sudo apt update
  3. Run: sudo apt install nginx -y
  4. Copy the studio folder to /var/www/html/mabni-code.
  5. Find the Pi IP using hostname -I.
  6. From student computers, open: http://PI-IP/mabni-code.

Updating to a newer version

  1. Stop Apache only if you want. Usually you can leave it running.
  2. Rename the old folder, for example from mabni-code to mabni-code-old.
  3. Extract the new ZIP.
  4. Rename the new extracted folder to mabni-code.
  5. Copy it into htdocs or your Pi web folder.
  6. Open the app. This build uses a unique cache name and asset version, so browsers should load the new files automatically.
  7. If a stubborn browser still shows the old version, press Ctrl + F5 once.

This build also tells the service worker to delete older MABNI caches and reload open pages once after activation. Browsers still have goblin energy, but this removes most of the manual cache drama.

Common problems and fixes

Page opens on server but not studentsStudents are not on the same network, the IP is wrong, or firewall is blocking Apache.
Apache does not startAnother app may be using port 80. Close Skype/IIS, or change Apache port.
Students see old layoutPress Ctrl + F5. If still old, clear site data or unregister the service worker.
Progress missingProgress is saved per browser and per computer. Use Teacher tools to export/import progress.
Images or blocks look brokenMake sure you copied the whole folder, including assets, vendor, css, and js.
Open Studio Back Home Contact