{"__v":0,"_id":"5841ca79ae05ac2500ba263d","category":{"version":"5841ca79ae05ac2500ba2621","project":"578c4badbd223d2000cc1441","_id":"5841ca79ae05ac2500ba2622","__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":1,"_id":"5841ca79ae05ac2500ba2621","project":"578c4badbd223d2000cc1441","createdAt":"2016-12-02T19:24:41.091Z","releaseDate":"2016-12-02T19:24:41.091Z","categories":["5841ca79ae05ac2500ba2622","5841ca79ae05ac2500ba2623","5841ca79ae05ac2500ba2624","5841ca79ae05ac2500ba2625","5841ca79ae05ac2500ba2626"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.0.46","version":"0.0.46"},"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/7fc82aa-quickstart_banner.jpg\",\n        \"quickstart_banner.jpg\",\n        1200,\n        452,\n        \"#322139\"\n      ]\n    }\n  ]\n}\n[/block]\nQuick start guide to get you setup and developing VR experiences in 10 mins! (No XCode required)\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"\",\n  \"body\": \"iOS Only - we currently only support iOS and OSX. Android support is coming soon.\"\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 Viro Command Line Interface\n\nInstall 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\": \"shell\"\n    }\n  ]\n}\n[/block]\n## 3. 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## 4. Download the Viro Media iOS Testbed App\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/89e249a-viro_app_icon_120.png\",\n        \"viro_app_icon_120.png\",\n        120,\n        120,\n        \"#33c0f0\"\n      ]\n    }\n  ]\n}\n[/block]\nInstall the [Viro Media App](https://itunes.apple.com/us/app/viro-media/id1163100576?mt=8) from the AppStore on your iOS device. The app is free.\n\n## 5. NPM Start\n\nFrom the root of your project, run the command: `npm start` to start the packager server.\n\n## 6. View HelloWorldScene.js\n\nOpen the Viro Media App on your iOS device. Tap on the menu icon in the top left and tap on \"Enter Testbed\". 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:** Check out our [Tutorial](doc:tutorial) where we go through how to modify the Hello World VR Scene.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/f681a20-HelloWorld.jpg\",\n        \"HelloWorld.jpg\",\n        800,\n        450,\n        \"#304542\"\n      ]\n    }\n  ]\n}\n[/block]\n**Troubleshooting:** Ensure your `react-viro` version in your project's package.json file matches the version at the bottom of the Testbed screen.\n* If they do not match, then you may need to either update your Viro Media App **or** downgrade your react-viro version in your package.json.\n\nOnce you are ready to publish or distribute your app, XCode is required and you will need to complete the instructions under [Installing Viro](doc:starting-a-new-viro-project-1).","excerpt":"","slug":"quick-start","type":"basic","title":"Quick Start"}
[block:image] { "images": [ { "image": [ "https://files.readme.io/7fc82aa-quickstart_banner.jpg", "quickstart_banner.jpg", 1200, 452, "#322139" ] } ] } [/block] Quick start guide to get you setup and developing VR experiences in 10 mins! (No XCode required) [block:callout] { "type": "info", "title": "", "body": "iOS Only - we currently only support iOS and OSX. Android support is coming soon." } [/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 Viro Command Line Interface Install Viro CLI by running the following command in your terminal: [block:code] { "codes": [ { "code": "npm install -g react-viro-cli", "language": "shell" } ] } [/block] ## 3. 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. ## 4. Download the Viro Media iOS Testbed App [block:image] { "images": [ { "image": [ "https://files.readme.io/89e249a-viro_app_icon_120.png", "viro_app_icon_120.png", 120, 120, "#33c0f0" ] } ] } [/block] Install the [Viro Media App](https://itunes.apple.com/us/app/viro-media/id1163100576?mt=8) from the AppStore on your iOS device. The app is free. ## 5. NPM Start From the root of your project, run the command: `npm start` to start the packager server. ## 6. View HelloWorldScene.js Open the Viro Media App on your iOS device. Tap on the menu icon in the top left and tap on "Enter Testbed". 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:** Check out our [Tutorial](doc:tutorial) where we go through how to modify the Hello World VR Scene. [block:image] { "images": [ { "image": [ "https://files.readme.io/f681a20-HelloWorld.jpg", "HelloWorld.jpg", 800, 450, "#304542" ] } ] } [/block] **Troubleshooting:** Ensure your `react-viro` version in your project's package.json file matches the version at the bottom of the Testbed screen. * If they do not match, then you may need to either update your Viro Media App **or** downgrade your react-viro version in your package.json. Once you are ready to publish or distribute your app, XCode is required and you will need to complete the instructions under [Installing Viro](doc:starting-a-new-viro-project-1).