{"_id":"59bc03d41d2d8d001a3445ac","category":{"_id":"59bc03d31d2d8d001a34457e","version":"59bc03d31d2d8d001a34457d","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-10-25T23:36:45.975Z","from_sync":false,"order":0,"slug":"basics","title":"Getting Started"},"project":"578c4badbd223d2000cc1441","user":"576c22a3808cf02b00d37419","parentDoc":null,"version":{"_id":"59bc03d31d2d8d001a34457d","project":"578c4badbd223d2000cc1441","__v":2,"createdAt":"2017-09-15T16:46:11.721Z","releaseDate":"2017-09-15T16:46:11.721Z","categories":["59bc03d31d2d8d001a34457e","59bc03d31d2d8d001a34457f","59bc03d31d2d8d001a344580","59bc03d31d2d8d001a344581","59bc03d31d2d8d001a344582","59bc03d31d2d8d001a344583","59bc284b7c3f420010f965e6"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2.0.0"},"__v":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:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Using Windows?\",\n  \"body\": \"Find instructions at [Quick Start (Windows)](doc:quick-start-windows)\"\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 AR/VR experiences in 10 mins! (No Xcode or Android Studio required)\n\n## Prerequisites\n\nAR\n1. OSX computer\n2. iOS Device with A9 chip or higher and running iOS 11\n\nVR\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\n## 1a. **[OSX ONLY]** Install Dependencies - Homebrew, Node and Watchman\n\nOur recommended way of installing the dependencies on OSX is to use Homebrew, but you can use whatever you want as long as both `node` and `watchman` are installed and in your PATH.\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## 1b. **[LINUX ONLY]** Install Dependencies - Node and Watchman\n\nUse your local package manager to install `node` and `watchman`\n\nCommon Linux Flavors (you may need to `sudo` before each command):\n\n**Ubuntu, Mint, Debian, etc**\n```\napt-get install node\napt-get install watchman\n```\n\n**Fedora, RHEL, CentOS, etc** \n```\nyum install node\nyum install watchman\n```\n\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 Viro Command Line Interface\n\nNow install the 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## 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\n\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**Don't have a key? Sign up [here](https://viromedia.com/signup)!**\n\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. Open Hello World in Testbed App\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[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"NGROK ISSUES\",\n  \"body\": \"If you do not see the ngrok address in your terminal, open a new tab, navigate to your workspace and then run \\n\\n`./node_modules/react-viro/bin/run_ngrok.sh`\"\n}\n[/block]\n## 8. View Hello World in Testbed App\n\nAndroid users will see a 360 degree photo of a beach with the text \"Hello World!\" in front of you. iOS users will see a menu screen \"Choose Your Desired Experience\" with 2 options: AR or VR. Tap VR to get to the 360 beach Hello World scene.\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]\nIf you tap on AR, you will be taken to HelloWorldSceneAR.js and see text that says \"Initializing...\" and then changes to \"Hello World\". \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/4414726-IMG_2931.PNG\",\n        \"IMG_2931.PNG\",\n        1242,\n        2208,\n        \"#3e5371\"\n      ]\n    }\n  ]\n}\n[/block]\nIf you are having issues loading either scene, try shaking the device until a development menu appears and hit \"Reload\", double-check that the ngrok URL entered was correct or try using your computer's local IP address (your phone will need to be on the same network).\n\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 VR](doc:tutorial) or [Tutorial AR](doc:tutorial-ar) where we go through how to modify the Hello World Scenes.\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. Check out our code samples on Github to see what else you can build with Viro -> [Viro Github](https://github.com/viromedia/viro)","excerpt":"","slug":"quick-start","type":"basic","title":"Quick Start (Mac/Linux)"}

Quick Start (Mac/Linux)


[block:callout] { "type": "warning", "title": "Using Windows?", "body": "Find instructions at [Quick Start (Windows)](doc:quick-start-windows)" } [/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 AR/VR experiences in 10 mins! (No Xcode or Android Studio required) ## Prerequisites AR 1. OSX computer 2. iOS Device with A9 chip or higher and running iOS 11 VR 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/)) ## 1a. **[OSX ONLY]** Install Dependencies - Homebrew, Node and Watchman Our recommended way of installing the dependencies on OSX is to use Homebrew, but you can use whatever you want as long as both `node` and `watchman` are installed and in your PATH. 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] ## 1b. **[LINUX ONLY]** Install Dependencies - Node and Watchman Use your local package manager to install `node` and `watchman` Common Linux Flavors (you may need to `sudo` before each command): **Ubuntu, Mint, Debian, etc** ``` apt-get install node apt-get install watchman ``` **Fedora, RHEL, CentOS, etc** ``` yum install node yum install watchman ``` ## 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 Viro Command Line Interface Now install the Viro CLI by running the following command in your terminal: [block:code] { "codes": [ { "code": "npm install -g react-viro-cli", "language": "text" } ] } [/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 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. **Don't have a key? Sign up [here](https://viromedia.com/signup)!** ## 6. NPM Start From the root of your project, run the command: `npm start` to start the packager server. ## 7. Open Hello World in Testbed App 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". [block:callout] { "type": "info", "title": "NGROK ISSUES", "body": "If you do not see the ngrok address in your terminal, open a new tab, navigate to your workspace and then run \n\n`./node_modules/react-viro/bin/run_ngrok.sh`" } [/block] ## 8. View Hello World in Testbed App Android users will see a 360 degree photo of a beach with the text "Hello World!" in front of you. iOS users will see a menu screen "Choose Your Desired Experience" with 2 options: AR or VR. Tap VR to get to the 360 beach Hello World scene. [block:image] { "images": [ { "image": [ "https://files.readme.io/deb984c-HelloWorld.png", "HelloWorld.png", 2560, 1440, "#253c41" ] } ] } [/block] If you tap on AR, you will be taken to HelloWorldSceneAR.js and see text that says "Initializing..." and then changes to "Hello World". [block:image] { "images": [ { "image": [ "https://files.readme.io/4414726-IMG_2931.PNG", "IMG_2931.PNG", 1242, 2208, "#3e5371" ] } ] } [/block] If you are having issues loading either scene, try shaking the device until a development menu appears and hit "Reload", double-check that the ngrok URL entered was correct or try using your computer's local IP address (your phone will need to be on the same network). **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 VR](doc:tutorial) or [Tutorial AR](doc:tutorial-ar) where we go through how to modify the Hello World Scenes. 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. Check out our code samples on Github to see what else you can build with Viro -> [Viro Github](https://github.com/viromedia/viro)