{"_id":"5a06037134873d0010b39207","category":{"_id":"5a06037134873d0010b391ff","version":"5a06037134873d0010b391fe","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":"57bb7e47afc18c0e00529cf3","parentDoc":null,"version":{"_id":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":1,"createdAt":"2017-11-10T19:52:17.163Z","releaseDate":"2017-11-10T19:52:17.163Z","categories":["5a06037134873d0010b391ff","5a06037134873d0010b39200","5a06037134873d0010b39201","5a06037134873d0010b39202","5a06037134873d0010b39203","5a06037134873d0010b39204"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.1.0","version":"2.1.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-04-20T23:49:42.659Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Using a Mac or Linux laptop/desktop?\",\n  \"body\": \"Find instructions at [Quick Start (Mac/Linux)](http://docs.viromedia.com/v2.0.0/docs/quick-start)\"\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]\n# Install Node and the React Native CLI\nGo to the [React Native Getting Started](https://facebook.github.io/react-native/docs/getting-started.html) guide and follow the steps in the first two sections under **Installing Dependencies**(**Node** and **The React Native CLI**).\n\nNote: you do **not** need Android Studio/Xcode to use the testbed application.\n\n# Create a new React Native project.\nOpen Powershell and navigate to where you want to create the ViroReact project and run the command \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"react-native init ViroSample --version=0.49.3\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nThis will create a React Native project in the ViroSample directory.\n\n# Add a Dependency on React Viro\nRun the following commands in Powershell\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"cd ViroSample\\nnpm install -S -E react-viro\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n# Copy Files from React Viro\nCopy the files from `node_modules\\react-viro\\bin\\files\\javascript\\*` to the root of your directory.\n\nThis should override the `index.js` and `App.js` files and add `rn-cli.config.js` and a `js/` directory to your ViroSample project.\n\n# Add Your API Key\nModify the `App.js` file and add your API key you got when you signed up (or go ahead and sign up on our [website](https://viromedia.com/signup for a key)).\n\n# Download/Update the Viro Media App\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[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"If you're using Android AR...\",\n  \"body\": \"Follow the instructions under \\\"Prepare Your Device\\\" [here](https://developers.google.com/ar/develop/java/getting-started#prepare-device) to install Google's ARCore Services. This requires the `adb` command-line tool you can get by installing the [Android Platform Tools](https://developer.android.com/studio/releases/platform-tools.html) which are also installed alongside Android Studio.\\n\\nGoogle's ARCore, and consequently, Viro, only works on the following [devices](https://developers.google.com/ar/discover/#supported_devices).\"\n}\n[/block]\n# Start Your Packager Server\nIn Powershell, at the root of your new ViroReact project, run \"npm start\" which should start the React Native packager server.\n\n**Note:  Make sure your computer and phone are on the same network**\n\n# Using the Testbed App\n\n1. Open the Viro Media App on your phone\n2. Pull out the left panel and select \"Enter Testbed\"\n3. Find the local IP address of your computer (one way is to open another Powershell window and run \"ipconfig\" and look for the IPv4 Address).\n4. type in your local IP address and hit \"Go\".\n5. You should now be in a 360 degree photo of a beach with the text \"Hello World!\" in front of you. If not, then try shaking the device until a development menu appears and hit \"Reload\" and double-check that the local IP address entered was correct.\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/62800dc-HelloWorld.png\",\n        \"HelloWorld.png\",\n        2560,\n        1440,\n        \"#253c41\"\n      ]\n    }\n  ]\n}\n[/block]\n**Congratulations, you now have ViroReact set up and running!**\n\n# Next Steps/Other Resources\n1. Want to learn more about ViroReact? 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.","excerpt":"","slug":"quick-start-windows","type":"basic","title":"Quick Start (Windows)"}

Quick Start (Windows)


[block:callout] { "type": "warning", "title": "Using a Mac or Linux laptop/desktop?", "body": "Find instructions at [Quick Start (Mac/Linux)](http://docs.viromedia.com/v2.0.0/docs/quick-start)" } [/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] # Install Node and the React Native CLI Go to the [React Native Getting Started](https://facebook.github.io/react-native/docs/getting-started.html) guide and follow the steps in the first two sections under **Installing Dependencies**(**Node** and **The React Native CLI**). Note: you do **not** need Android Studio/Xcode to use the testbed application. # Create a new React Native project. Open Powershell and navigate to where you want to create the ViroReact project and run the command [block:code] { "codes": [ { "code": "react-native init ViroSample --version=0.49.3", "language": "shell" } ] } [/block] This will create a React Native project in the ViroSample directory. # Add a Dependency on React Viro Run the following commands in Powershell [block:code] { "codes": [ { "code": "cd ViroSample\nnpm install -S -E react-viro", "language": "shell" } ] } [/block] # Copy Files from React Viro Copy the files from `node_modules\react-viro\bin\files\javascript\*` to the root of your directory. This should override the `index.js` and `App.js` files and add `rn-cli.config.js` and a `js/` directory to your ViroSample project. # Add Your API Key Modify the `App.js` file and add your API key you got when you signed up (or go ahead and sign up on our [website](https://viromedia.com/signup for a key)). # Download/Update the Viro Media 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) [block:callout] { "type": "warning", "title": "If you're using Android AR...", "body": "Follow the instructions under \"Prepare Your Device\" [here](https://developers.google.com/ar/develop/java/getting-started#prepare-device) to install Google's ARCore Services. This requires the `adb` command-line tool you can get by installing the [Android Platform Tools](https://developer.android.com/studio/releases/platform-tools.html) which are also installed alongside Android Studio.\n\nGoogle's ARCore, and consequently, Viro, only works on the following [devices](https://developers.google.com/ar/discover/#supported_devices)." } [/block] # Start Your Packager Server In Powershell, at the root of your new ViroReact project, run "npm start" which should start the React Native packager server. **Note: Make sure your computer and phone are on the same network** # Using the Testbed App 1. Open the Viro Media App on your phone 2. Pull out the left panel and select "Enter Testbed" 3. Find the local IP address of your computer (one way is to open another Powershell window and run "ipconfig" and look for the IPv4 Address). 4. type in your local IP address and hit "Go". 5. You should now be in a 360 degree photo of a beach with the text "Hello World!" in front of you. If not, then try shaking the device until a development menu appears and hit "Reload" and double-check that the local IP address entered was correct. [block:image] { "images": [ { "image": [ "https://files.readme.io/62800dc-HelloWorld.png", "HelloWorld.png", 2560, 1440, "#253c41" ] } ] } [/block] **Congratulations, you now have ViroReact set up and running!** # Next Steps/Other Resources 1. Want to learn more about ViroReact? 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.