{"__v":0,"_id":"58cc1b01a6281b3b00f38ed5","category":{"version":"58cc1b00a6281b3b00f38e81","project":"578c4badbd223d2000cc1441","_id":"58cc1b00a6281b3b00f38e82","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-10-25T23:36:45.975Z","from_sync":false,"order":0,"slug":"basics","title":"Basics"},"parentDoc":null,"project":"578c4badbd223d2000cc1441","user":"576c22a3808cf02b00d37419","version":{"__v":5,"_id":"58cc1b00a6281b3b00f38e81","project":"578c4badbd223d2000cc1441","createdAt":"2017-03-17T17:21:04.720Z","releaseDate":"2017-03-17T17:21:04.720Z","categories":["58cc1b00a6281b3b00f38e82","58cc1b00a6281b3b00f38e83","58cc1b00a6281b3b00f38e84","58cc1b00a6281b3b00f38e85","58cc1b00a6281b3b00f38e86","58cc2b1f06e0900f004e516c","58cc2b3106e0900f004e516d","58cc321106e0900f004e521c","58cc32570c03971b00236bc7"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-12-02T17:16:30.414Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/135969a-quickstart_banner_a.jpg\",\n        \"quickstart_banner_a.jpg\",\n        1200,\n        452,\n        \"#230e20\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Viro Platform requires a key.\",\n  \"body\": \"Make sure to sign up [here](http://www.viromedia.com/signup) to get your key emailed to you.\"\n}\n[/block]\nQuick start guide to get you setup and developing VR experiences in 10 mins! (No Xcode or Android Studio required)\n\n## Prerequisites\n\n1. OSX or Linux computer\n2. Recent Android or iOS Device (Android 5.0+ & iOS 9.0+)\n3. Cardboard headset (you can find some QR codes [here](http://www.hypergridbusiness.com/faq/vr-headset-qr-codes/))\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Cardboard Only\",\n  \"body\": \"This Quick Start guide uses our Viro Media App which supports Cardboard only. If you want to set up to use GearVR or Daydream, please see the \\\"Set up Android Studio with Viro\\\" guide below. If you do not have a Cardboard device, you can find a QR code to scan below.\"\n}\n[/block]\n## 1. Install Dependencies - Homebrew, Node and Watchman\n\nInstall Homebrew by running the following command in your terminal:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"**/usr/bin/ruby -e \\\"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)\\\"\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nInstall Node by running the following command in your terminal:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"brew install node\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nInstall Watchman by running the following command in your terminal:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"brew install watchman\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n## 2. Install React Native Command Line Interface\n\nInstall React Native CLI by running the following command in your terminal:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"npm install -g react-native-cli\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n##3. Install React Viro Command Line Interface\n\nNow install the React Viro CLI by running the following command in your terminal:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"npm install -g react-viro-cli\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"For Mac OS install CocoaPods before running step 5\",\n  \"body\": \"Run the following in your terminal and input computer password if needed:\\n\\nEnsure you have at least [Ruby 2.2](https://www.ruby-lang.org/en/downloads/) installed, you can check this by running `ruby -v`.\\n\\n`sudo gem install cocoapods.`\\n\\nIf you already have CocoaPods installed, you should still run `pod repo update` in order to ensure your manifest is updated with the latest package versions.\"\n}\n[/block]\n## 4. Generate ViroSample project\n\nIn your terminal, navigate to where you want to create your Viro project, run:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"react-viro init ViroSample --verbose\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nTerminal should say: \"Installing react-viro package from npm...\". The installation may take a couple mins, so proceed to the next step while it completes. \n\n## 5. Download the Viro Media Testbed App\n\nInstall the Viro Media app from the app store on your device. The app is free.\n\n**iOS**\n[Viro Media App](https://itunes.apple.com/us/app/viro-media/id1163100576?mt=8)\n\n**Android**\n[Viro Media App](https://play.google.com/store/apps/details?id=com.viromedia.viromedia)\n\n## 6. Add your key to HelloWorldScene.js\n1) **For iOS**: Edit index.ios.js under your project directory and replace API_KEY_HERE with the key emailed to you.\n2) **For Android**: Edit index.android.js under your project directory and replace API_KEY_HERE with the key emailed to you.\n \n## 6. NPM Start\n\nFrom the root of your project, run the command: `npm start` to start the packager server.\n\n## 7. View HelloWorldScene.js\n\n1) Open the Viro Media App on your iOS or Android device. \n2) Tap on the menu icon in the top left and tap on \"Enter Testbed\". \n3) Find your ngrok url (https://xxxxxx.ngrok.io) which is printed at the top of the terminal window where you ran `npm start`. Enter that into the empty text field on the Testbed screen (xxxxxx.ngrok.io) and press \"Go\". \n\n**Congratulations, you now have Viro set up and running!**\n\n# Next Steps/Other Resources\n1. Want to learn more about the Viro Platform? Check out our [Tutorial](doc:tutorial) where we go through how to modify the Hello World VR Scene.\n2. New to React Native? Check out the React Native [Tutorial](https://facebook.github.io/react-native/docs/tutorial.html) which goes over some basic concepts of React Native which we leverage.\n3. Want to build your application for Daydream or GearVR? Check out our [Set up Android Studio with Viro](doc:installing-viro-android) guide which will guide you through setting up Android Studio and building for other platforms.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/deb984c-HelloWorld.png\",\n        \"HelloWorld.png\",\n        2560,\n        1440,\n        \"#253c41\"\n      ]\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"quick-start","type":"basic","title":"Quick Start"}
[block:image] { "images": [ { "image": [ "https://files.readme.io/135969a-quickstart_banner_a.jpg", "quickstart_banner_a.jpg", 1200, 452, "#230e20" ] } ] } [/block] [block:callout] { "type": "info", "title": "Viro Platform requires a key.", "body": "Make sure to sign up [here](http://www.viromedia.com/signup) to get your key emailed to you." } [/block] Quick start guide to get you setup and developing VR experiences in 10 mins! (No Xcode or Android Studio required) ## Prerequisites 1. OSX or Linux computer 2. Recent Android or iOS Device (Android 5.0+ & iOS 9.0+) 3. Cardboard headset (you can find some QR codes [here](http://www.hypergridbusiness.com/faq/vr-headset-qr-codes/)) [block:callout] { "type": "warning", "title": "Cardboard Only", "body": "This Quick Start guide uses our Viro Media App which supports Cardboard only. If you want to set up to use GearVR or Daydream, please see the \"Set up Android Studio with Viro\" guide below. If you do not have a Cardboard device, you can find a QR code to scan below." } [/block] ## 1. Install Dependencies - Homebrew, Node and Watchman Install Homebrew by running the following command in your terminal: [block:code] { "codes": [ { "code": "**/usr/bin/ruby -e \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)\"", "language": "shell" } ] } [/block] Install Node by running the following command in your terminal: [block:code] { "codes": [ { "code": "brew install node", "language": "shell" } ] } [/block] Install Watchman by running the following command in your terminal: [block:code] { "codes": [ { "code": "brew install watchman", "language": "shell" } ] } [/block] ## 2. Install React Native Command Line Interface Install React Native CLI by running the following command in your terminal: [block:code] { "codes": [ { "code": "npm install -g react-native-cli", "language": "shell" } ] } [/block] ##3. Install React Viro Command Line Interface Now install the React Viro CLI by running the following command in your terminal: [block:code] { "codes": [ { "code": "npm install -g react-viro-cli", "language": "text" } ] } [/block] [block:callout] { "type": "info", "title": "For Mac OS install CocoaPods before running step 5", "body": "Run the following in your terminal and input computer password if needed:\n\nEnsure you have at least [Ruby 2.2](https://www.ruby-lang.org/en/downloads/) installed, you can check this by running `ruby -v`.\n\n`sudo gem install cocoapods.`\n\nIf you already have CocoaPods installed, you should still run `pod repo update` in order to ensure your manifest is updated with the latest package versions." } [/block] ## 4. Generate ViroSample project In your terminal, navigate to where you want to create your Viro project, run: [block:code] { "codes": [ { "code": "react-viro init ViroSample --verbose", "language": "shell" } ] } [/block] Terminal should say: "Installing react-viro package from npm...". The installation may take a couple mins, so proceed to the next step while it completes. ## 5. Download the Viro Media Testbed App Install the Viro Media app from the app store on your device. The app is free. **iOS** [Viro Media App](https://itunes.apple.com/us/app/viro-media/id1163100576?mt=8) **Android** [Viro Media App](https://play.google.com/store/apps/details?id=com.viromedia.viromedia) ## 6. Add your key to HelloWorldScene.js 1) **For iOS**: Edit index.ios.js under your project directory and replace API_KEY_HERE with the key emailed to you. 2) **For Android**: Edit index.android.js under your project directory and replace API_KEY_HERE with the key emailed to you. ## 6. NPM Start From the root of your project, run the command: `npm start` to start the packager server. ## 7. View HelloWorldScene.js 1) Open the Viro Media App on your iOS or Android device. 2) Tap on the menu icon in the top left and tap on "Enter Testbed". 3) Find your ngrok url (https://xxxxxx.ngrok.io) which is printed at the top of the terminal window where you ran `npm start`. Enter that into the empty text field on the Testbed screen (xxxxxx.ngrok.io) and press "Go". **Congratulations, you now have Viro set up and running!** # Next Steps/Other Resources 1. Want to learn more about the Viro Platform? Check out our [Tutorial](doc:tutorial) where we go through how to modify the Hello World VR Scene. 2. New to React Native? Check out the React Native [Tutorial](https://facebook.github.io/react-native/docs/tutorial.html) which goes over some basic concepts of React Native which we leverage. 3. Want to build your application for Daydream or GearVR? Check out our [Set up Android Studio with Viro](doc:installing-viro-android) guide which will guide you through setting up Android Studio and building for other platforms. [block:image] { "images": [ { "image": [ "https://files.readme.io/deb984c-HelloWorld.png", "HelloWorld.png", 2560, 1440, "#253c41" ] } ] } [/block]