Getting Started #

Before starting your first React VR project, you have to install the dependencies used to build and manage React VR apps: Node.js and the React VR CLI.

Installing Node.js #

If you already have Node.js installed, make sure it is at least version 4.0.

Running the Samples #

To run the sample applications, you must first install the required packages through the node.js package manager.

  1. Open a terminal or command prompt window.

  2. Navigate to the React VR Preelease preview folder.

  3. Enter:

    npm install
  4. Wait for npm to finish downloading and installing software.

  5. Start the server. Enter:

    npm start
  6. If you are on Windows, enable the Firewall exception when you are asked to do so.

  7. After starting the server, open your browser to http://localhost:8081/Samples and explore the samples.

Creating your first project #

We can use the React VR command line interface tool to generate a new project called “WelcomeToVR.” The tool creates a new folder containing the skeleton for a React VR project and fetches all the necessary external dependencies.

  1. If you are still running npm in your terminal window, press CTRL+C to stop it.

  2. Navigate to a directory where you want to put your new project.

  3. Install the React VR CLI tool. Enter:

    npm install -g react-vr-cli
  4. Use the React VR CLI tool to create a new application under a WelcomeToVR folder and install the required dependencies. Enter:

    react-vr init WelcomeToVR
  5. Change directory to your new WelcomeToVR project directory.

  6. Use the start command to initialize your local development server. Enter:

    npm start
  7. Open your browser to http://localhost:8081/vr/index.html. You should see something similar to the following:

Hello! #

Click and drag around the world in your browser or open it up on your mobile device to see more.

If you're using a web browser that supports WebVR such as the Carmel Developer Preview browser from Oculus, you should be able to put on your headset and explore the world in full VR. For more information on VR capable browsers, see the VR Browsers topic.

Our next topic explores the code that brings this scene to life.

You can file an issue on GitHub if you see a typo or error on this page!