Bluemix React VR Starter

This project is designed to get you up and running quickly with a light-weight React VR experience hosted in the cloud that you can share with everyone.

If you want to save the tutorial for later (or already know what you're doing and want it hosted quickly) You can use this handy button to do a quick deploy.

Before you begin
Clone the App
Run the App
Deployment
1. Cloud Foundry Deployment
2. Container Deployment
Browser Support
Next Steps

1. Before You Begin

Things you'll need:

2. Clone the App

To start, clone this repository locally on your machine.

git clone https://github.com/craigkj312/node-react-vr-starter && cd node-react-vr-starter

Now that you have the code locally you should take a moment to look through the project a bit. Here is a basic explanation of the more important files:

.
├── src                                 // The un-bundled code of the VR app.
│   ├── components                      // Any React VR components used in the app.
│   │   └── infoPanel.component.vr.js   // An example React VR component that displays a View with an Image and Text.
│   └── styles                          // Styling for the React VR components.
│       └── main.stylesheet.js          // An example React VR StyleSheet which styles the InfoPanel.
├── vr                                  // Contains the bundled React VR app.
│   ├── build                           // The actual bundled js files are in here.
│   ├── static_assets                   // Any static assets (like images) that the app uses go in here.
│   ├── client.js                       // Client-side configuration that launches the bundled React VR app.
│   └── index.html                      // The index file which wraps the bundled React VR app.
├── index.vr.js                         // The main React VR component which acts as the base of the React VR app.
├── manifest.yml                        // The configuration file which tells Cloud Foundary how to upload your app.
├── package.json                        // Lists basic project information and is used to install required packages.
├── rn-cli.config.js                    // Configuration file for the React packager. 
└── server.js                           // The main node server file which hosts the static content.

3. Run the App

Install the dependencies from the package.json file.

npm install

(Note: yarn install may also be used if you have yarn)

Bundle the React VR app. This repository contains a pre-bundled build of the app, but this is good to know for when you start making changes to the code.

npm run build

Run the app.

npm start

View your app at: http://localhost:3000

4. Deployment

There are a couple ways that this project is set up to be deployed. You can either upload it using Cloud Foundry, or you can build a container image with it. Choose whichever path works best for you.

4a. Cloud Foundry Deployment

Before deploying to Bluemix you'll need to make some modifications to the manifest.yml file. Open it up and change the name field to be whatever you wish to call your new app.

applications:
- name: <Your-App-Name>
  random-route: true
  memory: 128M

The manifest.yml file has a lot of different configuration options. One of the most important is the ability to set a specific route. If you'd like to learn how, you can check our documentation here.

Next we'll be using the Cloud Foundary CLI to push our application.

Choose your API endpoint.

cf api <API-endpoint>

Replace the API-endpoint in the command with an API endpoint from the following list.

https://api.ng.bluemix.net # US South
https://api.eu-gb.bluemix.net # United Kingdom
https://api.au-syd.bluemix.net # Sydney

cf login

From within the node-react-vr-starter directory push your app to Bluemix.

cf push

(Note: After making changes to the app, you need run npm run build before your cf push to bundle your app for hosting.)

This can take a minute. If there is an error in the deployment process you can use the command cf logs <Your-App-Name> --recent to troubleshoot.

4b. Container Deployment

This repository also contains a Dockerfile that allows you to build a Docker container image. This container image can be uploaded to a platform of your choice by following one of these docs:

If you just want to run in a container locally you can follow these steps:

First download and install the Docker Tools. Once you have that done you'll want to run the following command in the same directory as the Dockerfile.

docker build -t <your username>/react-vr-app .

This will build a docker image that will live locally. To check your images you can use:

docker images

Assuming you see your newly built image in that list you can then use the following command to run your container locally.

docker run -p 3000:3000 -d <your username>/react-vr-app

Now you should be able to view your app at: http://localhost:3000

You can also verify that your container is running with the command:

docker ps

For more information about Docker containers check out the Docker Documentaion

5. Browser Support

WebVR is still in its infancy and right now only a few browsers give full VR support. In most browsers the webpage will act like an interactive 360 video where you can "turn" by dragging the mouse, but if you want to see your content inside a VR headset you'll need to make sure you're using a webVR supported browser. If you're using a compliant browser you'll see a little "View in VR" button in the bottom left corner of the view.

Here are a few recommendations for browsers:

Desktop:

Firefox Nightly
Google Chrome
- Note: You'll need to enable webVR support by going to chrome://flags/#enable-webvr

Cardboard and Daydream:

Google Chrome
- Note: You'll need to enable webVR support by going to chrome://flags/#enable-webvr

GearVR

Carmel

For more information about webVR browsers you can check support status here.

6. Next Steps

That's it! You now have a Virtual Reality application running live on Bluemix (or somewhere of your choosing). Start sharing the link with your friends!

Ok, maybe you want to make a few changes to the app first. In that case I would recommend checking out the React VR Documentation. It has a lot of great content and should help you get up to speed developing your app. If you aren't familiar with common React programming patterns, you can also check out the React Documentation.

If you have more questions about Bluemix, or would like to know what services can be added to your app, you can check out the Bluemix Documentation.

License

This project is licensed under Apache 2.0. Full license text is available in LICENSE.

Acknowledgments

Borodar for the great skybox.
Frank Rodriguez for the illustration.

craigkj312 / node-react-vr-starter