5 simple steps to quickly start a new VR project

A step by step guide on setting up a new A-Frame project in React

A-Frame is a great way to get into developing VR, especially for those who come from a Javascript background. For those who dont know what A-Frame is, here is the official description taken directly from the first paragraph of “What is A-Frame” on their website:

A-Frame is a web framework for building virtual reality (VR) experiences. As originators of WebVR, the Mozilla VR team developed A-Frame to be the easiest as well as the most powerful way to develop WebVR content. As a fully open project, A-Frame has grown to be one of the largest and most welcoming VR communities.

The purpose of this tutorial is to help you get started with A-Frame as quickly as possible so you don’t have to waste time figuring out how to set up. If you already have react set up, skip to the last part. Here is a link to github if you want to see the final setup.

If you want to see their official docs, click on this link.

Step one: Create an empty repository

In this tutorial, we’ll call this project vr-hello-world. For creating folders, you can use the mkdir command in terminal or the right-click>new folder.

• Create a folder somewhere on your drive and name it vr-hello-world.
• Go to the vr-hello-world folder directory in terminal
• Next initialize git and yarn in the repository by typing: git init and after it finishes the setup, yarn init and follow the steps.
• touch .gitignore to create a ‘.gitignore’ file
• Open the .gitignore file that you just created and add node_modules and client/dist/bundle.js into the file. This will tell git to ignore the node_modules folder and the final bundled javascript file.

Step 2: Create a file structure

In project, there will be two main components, a client and a server. So create two folders and name it ‘client’ and ‘server’.

Since this project will use webpack to bundle the react code, add another two folders into the client folder, and name them ‘src’ and ‘dist’

Step 3: Creating the Server

This will create a Node/Express server that will serve the client whenever the url is called.

• Create a file inside the server folder and name it index.js.

• Inside terminal, type yarn install and press enter. This will install yarn, a node package manager.

• yarn add express nodemon path this will tell yarn to add express, nodemon, and path as dependencies.

• Add "start": "nodemon server/index.js into scripts

• Set up your server by adding this snippet into index.js:

  const express = require('express'); var app = express();

  app.use(express.static(__dirname + '/../client/dist'));

  app.listen(5000, () => { console.log(listening on port 5000!); });

Now run yarn start in the terminal and you should see listening on port 5000! in the console.

Step 4: React and Webpack

Now we can get started on the client side.

• First we need to add all the dependencies for react and to bundle and transpile our code:yarn add webpack babel-core babel-loader babel-polyfill babel-preset-react babel-preset-es2015 react react-dom

• Next, let’s configure babel. In the terminal type:touch .babelrc, and inside .babelrc add this:{ "presets": ["latest"] }

• We still need to configure webpack. Inside the terminal type:touch webpack.config.js, then add this into the file:

  var path = require('path'); var SRC_DIR = path.join(__dirname, '/client/src'); var DIST_DIR = path.join(__dirname, '/client/dist');

  module.exports = { entry: ${SRC_DIR}/index.jsx, output: { filename: 'bundle.js', path: DIST_DIR }, module : { loaders : [ { test : /.jsx?/, include : SRC_DIR, loader : 'babel-loader', query: { presets: ['react', 'es2015'] } } ] } };

• Go to “package.json” and add this:

  "scripts": { "start": "nodemon server/index.js", "build": "webpack -w" },

• We’re finally done with the set up. Let’s create a file to work with. Go into client > src and create index.jsx file. Add this to the file:

  import React from 'react'; import ReactDOM from 'react-dom';

  class App extends React.Component { render () { return (<div>hello world</div>) } }

  ReactDOM.render(<App />, document.getElementById('app'));

• Then we need to create an index.html file. Go to client > dist and create index.html and add this:

  <!DOCTYPE html> <html> <head> <title>VR Hello World</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="bundle.js"></script> </body> </html>

• Now we’re ready. Go to the terminal and type yarn build and after it’s done, type yarn start . You should see listening on port 5000! in the terminal. Open your browser and type localhost:5000 and you’ll see “hello world” printed on the screen.

Step 5: Set up A-Frame

• First install A-Frame dependencies. In the terminal, type:yarn add aframe aframe-react aframe-particle-system-component

• Then add this into index.jsx (this code is copied directly from aframe-react official repo):

  import React from 'react'; import ReactDOM from 'react-dom'; import 'aframe'; import {Entity, Scene} from 'aframe-react'; import 'babel-polyfill'; import 'aframe-particle-system-component';

  class App extends React.Component { render () { return ( <Scene> <Entity geometry={{primitive: 'box'}} material={{color: 'red'}} position={{x: 0, y: 0, z: -5}}/> <Entity particle-system={{preset: 'snow'}}/> <Entity light={{type: 'point'}}/> <Entity gltf-model={{src: 'virtualcity.gltf'}}/> <Entity text={{value: 'Hello, WebVR!'}}/> </Scene> ) } }

  ReactDOM.render(<App />, document.getElementById('app'));

Now go to localhost:5000 and this should render on the page:

That’s it. Have fun hacking in VR!