How to setup a development server for mindAR?

[alantiong16]

Hi, I tried to run a local server using node but was not able to get image-tracking/debug.html to run.

The error shows the following:
Uncaught TypeError: Failed to resolve module specifier "@tensorflow/tfjs". Relative references must start with either "/", "./", or "../".Understand this error

Any help would be much appreciate!

[abewartech]

This is a common issue when running MindAR (or any modern JavaScript project using ES modules) directly from a local file without a proper development server. The error occurs because the browser can't resolve the npm package imports (like @tensorflow/tfjs) when opening the HTML file directly via file:// protocol.

Here's how to set up a proper development server:

Solution 1: Use a Simple HTTP Server (Recommended)
Option A: Using Node.js (http-server or serve)

1. Install a simple HTTP server globally:

npm install -g http-server
or

npm install -g serve

2. Navigate to your MindAR project directory:

cd path/to/mind-ar-js

3. Start the server:

http-server -c-1 # Disable caching
or

serve

4. Open your browser and go to:

http://localhost:8080/examples/image-tracking/debug.html
(Port might be 3000 or 5000 depending on the server)

Option B: Using Python (if you have Python installed)

# Python 3
python3 -m http.server 8080

# Python 2
python -m SimpleHTTPServer 8080

Then visit: http://localhost:8080/examples/image-tracking/debug.html