Setting up and Testing AFrame With Node JS

So a big struggle for me and many others is when programming with AFrame you cant load assets from your computer, stuff like images or 3d models. You can only get assets if they are hosted on a website. While this is easily fixed by developing on Git-Hub, Glitch, Nocities, or Surge, (All recommended by the Aframe docs) I personally like developing on my own computer with the text editor of my choice, not to mention that most of the time your code stored by web-based editors are public. That’s why I like node js. Plus you get a lot more functionality with Node as with a little work you can create games and multiplayer experiences.

The first step you want to take is to download Node.js. Next, you want to set up your file where you are going to store your Node server, inside your folder create an app.js file, a server folder, a client folder, and a node_modules folder. You also want to create an empty index.html file inside the client folder.

The app.js file is where we program our server, if you just want to program Aframe you can just copy my code for the folder and you will be good to go in that area. The Client folder is where you put all the files you want to be accessed externally by your aframe program. The server file is where you put all the stuff you only want your server to access. The node_modules folder is where node plugins go. Finally, the index.html is where you want to put all your HTML and aframe code.

Next, you are going to open up your computer’s console and navigate to your folder.

>cd C:/path/to/folder/here/

next inside your folder run the npm init to set up your app:

>npm init

It will ask you to set several things, you can change them, but the defaults are fine.

The next thing we will do is install the express library, this is how our server is going to give us files, like our index.html file.

>npm install express

Now we need to set up our app.js so it will return files. Copy and past the code below into your app.js file.

console.log("server started");

var express = require('express');
var app = express();
var serv = require('http').Server(app);
app.get('/',function(req, res) {//listens for when the client opens the site.
    res.sendFile(__dirname + '/client/index.html');
});
app.use('/client',express.static(__dirname + '/client'));//listens for when the client wants files.
serv.listen(2000);

Your server should be ready to go now, put some html you want to test in your index.html. To test our code we first start our server, open your folder in the command line again and type in:

node app.js

you should see the message “server started” that means it is ready. open a web browser and type in:

localhost:2000/

and press enter. you should now see the product of your html in the index.hml. You are now ready to go, just one more very important note, when calling files, you want to start them with client/ examples:

<img src="image.png" /> //code would not work
<img src="client/image.png" /> //code will work

And that’s all for now, thanks for reading!