React 360 by Example: Part 1

Taking a first dip into VR development using familiar tools and syntax.

Motivation

I recently purchased an Occulus Go, a pretty decent $200 standalone VR headset, to explore VR development; not so much for gaming but for productivity applications (training comes to mind).

As I was gearing up to develop for the Occulus Go using Unity, a colleague of mine mentioned WebVR and in particular React 360. With a background in JavaScript and React, it seemed like a natural line of exploration for me; thought to share my experience.

Prerequisites

Basic familiarity with React, basic familiarity with Git, Node.js installed, Git installed, and a GitHub account.

Hello World

note: The final result of this article is available in the hello branch of the repository larkintuckerllc/hello-react-360.

We first create a new project folder, e.g., hello-react-360, with:

npx react-360-cli init hello-react-360

We can develop locally with:

npm run start

We can generate a production build with:

npm run bundle

Observations:

• The production build is the build folder
• The static assets folder, static_assets, is not automatically copied into the build folder

To avoid having to repeatedly manually copy the static_assets folder, we create a script; scripts/copy-assets.sh:

and we update the bundle script in package.json:

...
"bundle": "node node_modules/react-360/scripts/bundle.js && sh scripts/copy-assets.sh",
...

Deploying

In order to view this application using a VR capable device, e.g., the Occulus Go, we need to publish the build folder, e.g., to GitHub Pages.

We create a GitHub repository for this project; will assume you have a way to accomplish:

• Initialize it as a Git repository
• Add all the files
• Create a commit
• Create a GitHub repository
• Add the GitHub repository as a remote
• Push master branch to GitHub

We install the library gh-pages:

npm install -D gh-pages

create a script, scripts/deploy.js:

and create a deploy script in package.json:

...
"deploy": "node scripts/deploy.js"
...

We deploy the application:

npm run deploy

This command automatically creates a GitHub gh-pages branch consisting of the build folder and thus publishes it to GitHub Pages.

In my particular case, the application is available at:

https://larkintuckerllc.github.io/hello-react-360/

Next Steps

Now that we have a way to both develop locally as well as publish to production, we begin to dive into the details of React 360 in the next article React 360 by Example: Part 2.