{"_id":"5a06037134873d0010b3920d","category":{"_id":"5a06037134873d0010b39200","version":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-03-17T18:59:29.780Z","from_sync":false,"order":1,"slug":"getting-started-ios","title":"iOS - Platform Setup"},"user":"578c4a62bd223d2000cc143e","parentDoc":null,"project":"578c4badbd223d2000cc1441","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":["59ec69e173b8560010f44970"],"next":{"pages":[],"description":""},"createdAt":"2016-10-31T18:22:59.993Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"*This documentation was inspired by React Native's [Getting Started](https://facebook.github.io/react-native/docs/getting-started.html) guide.*\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Quick Start\",\n  \"body\": \"If you already completed the Quick Start Guide, skip down to Step 5: Installing Xcode. In order to distribute your application to the iOS App Store, you will need Xcode.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"body\": \"* homebrew\\n* node.js\\n* watchman\\n* React Native Command Line Interface\\n* Viro Command Line Interface\\n* Xcode\\n* Cocoapods. \\n* For VR -> [Google Cardboard HMD](https://vr.google.com/cardboard/get-cardboard/index.html) (to view the finished VR app)\\n* A physical iPhone running iOS 7 or higher.\",\n  \"title\": \"Key Dependencies\"\n}\n[/block]\n## 1. Install Homebrew, Node and Watchman\n\nInstall Homebrew by running the following command in your terminal (follow all the prompts, inputting your password when needed):\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]\nOnce Homebrew is installed, install Node by running the following command:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"brew install node\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nOnce Node is installed, install Watchman by running the following command:\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 the react-native CLI by running the following command:\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 the Viro React Command Line Interface\n\nInstall the react-viro CLI by running the following command:\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. Create Your First ViroReact Project\n\nIn your terminal, navigate to where you want to create your ViroReact project. To generate a project named ViroSample, run:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"react-viro init ViroSample --verbose\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nYou should now have a directory named ViroSample arranged similar to this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ViroSample/\\n├── App.js\\n├── android\\n├── app.json\\n├── bin\\n├── index.android.js\\n├── index.ios.js\\n├── index.js\\n├── ios\\n├── js\\n├── node_modules\\n├── package.json\\n├── rn-cli.config.js\\n└── setup-ide.sh\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"* App.js - the main Javascript file containing the logic for the application\\n* android - the directory containing the Android source\\n* app.json - miscellaneous React Native property file\\n* bin - contains various scripts\\n* index.android.js - legacy file that points to App.js to launch your application for Android\\n* index.ios.js - legacy file that points to App.js to launch your application for iOS\\n* index.js - entry file that points to the main application in App.js\\n* ios - directory containing the iOS source\\n* js - directory containing the Javascript source\\n* node_modules - directory containing all the node modules as specified by the package.json file\\n* package.json - file that tells node what modules are required\\n* rn-cli.config.js - file that configures the React Native CLI (we use it to whitelist new file extensions for the packager server)\\n* setup-ide.sh - script used to automatically set up Xcode and Android Studio from scratch.\",\n  \"title\": \"What each file/directory means\"\n}\n[/block]\nIn the sample project, the `App.js` file simply contains boilerplate which launches into the `HelloWorldScene.js` contained inside the `/js/` directory.\n\n## 5. Install Xcode\n\nInstall Xcode 9 through the Appstore [here](https://itunes.apple.com/us/app/xcode/id497799835?mt=12).\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"To develop using XCode, you will need a paid Apple Developer account.\",\n  \"body\": \"If you do not have an account, use the Viro Media Testbed App by following the instructions at [Using the Testbed App](http://docs.viromedia.com/docs/develop-with-viro#section-using-the-testbed-app-no-xcode-required-).\"\n}\n[/block]\n## 6. Install Ruby\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\nIf you have an older version, follow the instructions here based on your OS/package manager/ruby manager:\n\nhttps://www.ruby-lang.org/en/documentation/installation/\n\n##7. Install CocoaPods\n\nWe use CocoaPods to manage our dependencies on iOS.\n\nRun the following in your terminal and input computer password if needed:\n\n```sudo gem install cocoapods```\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"If 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\\nThis could take a while as the command performs a git pull of the entire CocoaPods manifest repository.\"\n}\n[/block]\n## 8. Run `setup-ide.sh` script\n\nIn the terminal, navigate to the root of your project (**not** your iOS project, but ViroReact project) and run the following command:\n\n```./setup-ide.sh ios```\n\nWhich will set up the project to work with Viro.\n\n## 9. Create and add your Apple account to Xcode\n\nFirst, we need to open Xcode. To do so, open a new terminal window and navigate to the `ios` directory in your project and run:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"open ViroSample.xcworkspace\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nYour workspace should now be open in Xcode.\n\nTo add your Apple Account to Xcode follow the instructions here:\nhttps://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/AddingYourAccounttoXcode/AddingYourAccounttoXcode.html\n\nOnce you add your Apple ID to Xcode, select your Project in the left navigation panel, select your App target and under the Signing section, select your Team. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/734eb0c-Screen_Shot_2016-11-16_at_12.41.15_PM.png\",\n        \"Screen Shot 2016-11-16 at 12.41.15 PM.png\",\n        1048,\n        518,\n        \"#eae9ea\"\n      ]\n    }\n  ]\n}\n[/block]\nDo the same for the <ProjectName>Tests target too.\n\n## 10. Run the Application\n\nConnect your device to your development machine. Tap \"Trust\" if prompt appears on your computer and/or device.\n\nThen, select your connected device in the top Active Scheme dropdown menu:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/22e4f9b-select_device.png\",\n        \"select_device.png\",\n        766,\n        236,\n        \"#e6e6e6\"\n      ]\n    }\n  ]\n}\n[/block]\nRun the application and you should see the Hello World scene.\n \n**Congratulations, you now have ViroReact set up and running!**\n\n**Next Steps:** Check out our [VR Tutorial](doc:tutorial) or [AR Tutorial](doc:tutorial-ar) where we go through how to build a simple experience.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/b07d6b0-viro_smile.gif\",\n        \"viro_smile.gif\",\n        180,\n        159,\n        \"#000000\"\n      ],\n      \"sizing\": \"smart\"\n    }\n  ]\n}\n[/block]\n# Troubleshooting\nHere's a list of known issues that may appear during the installation process. Post [here](http://stackoverflow.com/search?q=react+viro) if you have an issue not listed here.\n\n**Missing node_modules Directory/Error with `npm install` command**\n\nThis is probably because you do not have `node.js` installed and so, the init script failed to run `npm install`. To fix this, go to your root directory and run the below commands:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"npm install\\ncd ios\\npod repo update\\npod install\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nOnce you run those commands, your project should be properly set-up. Now you can start developing!\n\n**Unable to connect to the package server...**\n\nTODO: For all packager server issues, refer to the documentation about the packager server (add link to the packager server page explaining local network vs ngrok and how to switch between them)\n\nDuring development, ViroReact borrows React Native's package server which, rather than bundle your javascript files and assets, starts a local server on your development machine with which your development device connects to in order to get the files it needs. If you see this error, then either your package server isn't running or there's an issue with the connection between your development machine and device.\n\nHere are a few things you can try to resolve this issue:\n* The packager may not be running, to run it, you need to run `npm start` from your project's root\n* Try disconnecting and connecting to the network (on both device and dev machine)\n* Try performing a clean build and re-install of the app\n* You may need to disconnect your laptop from ethernet\n\nProblems with installation? Need extra help? Post your issue [here](http://stackoverflow.com/search?q=react+viro).","excerpt":"","slug":"starting-a-new-viro-project-1","type":"basic","title":"Set up Xcode with ViroReact"}

Set up Xcode with ViroReact


*This documentation was inspired by React Native's [Getting Started](https://facebook.github.io/react-native/docs/getting-started.html) guide.* [block:callout] { "type": "danger", "title": "Quick Start", "body": "If you already completed the Quick Start Guide, skip down to Step 5: Installing Xcode. In order to distribute your application to the iOS App Store, you will need Xcode." } [/block] [block:callout] { "type": "success", "body": "* homebrew\n* node.js\n* watchman\n* React Native Command Line Interface\n* Viro Command Line Interface\n* Xcode\n* Cocoapods. \n* For VR -> [Google Cardboard HMD](https://vr.google.com/cardboard/get-cardboard/index.html) (to view the finished VR app)\n* A physical iPhone running iOS 7 or higher.", "title": "Key Dependencies" } [/block] ## 1. Install Homebrew, Node and Watchman Install Homebrew by running the following command in your terminal (follow all the prompts, inputting your password when needed): [block:code] { "codes": [ { "code": "**/usr/bin/ruby -e \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)\"", "language": "shell" } ] } [/block] Once Homebrew is installed, install Node by running the following command: [block:code] { "codes": [ { "code": "brew install node", "language": "shell" } ] } [/block] Once Node is installed, install Watchman by running the following command: [block:code] { "codes": [ { "code": "brew install watchman", "language": "shell" } ] } [/block] ## 2. Install React Native Command Line Interface Install the react-native CLI by running the following command: [block:code] { "codes": [ { "code": "npm install -g react-native-cli", "language": "shell" } ] } [/block] ## 3. Install the Viro React Command Line Interface Install the react-viro CLI by running the following command: [block:code] { "codes": [ { "code": "npm install -g react-viro-cli", "language": "text" } ] } [/block] ## 4. Create Your First ViroReact Project In your terminal, navigate to where you want to create your ViroReact project. To generate a project named ViroSample, run: [block:code] { "codes": [ { "code": "react-viro init ViroSample --verbose", "language": "shell" } ] } [/block] You should now have a directory named ViroSample arranged similar to this: [block:code] { "codes": [ { "code": "ViroSample/\n├── App.js\n├── android\n├── app.json\n├── bin\n├── index.android.js\n├── index.ios.js\n├── index.js\n├── ios\n├── js\n├── node_modules\n├── package.json\n├── rn-cli.config.js\n└── setup-ide.sh", "language": "shell" } ] } [/block] [block:callout] { "type": "info", "body": "* App.js - the main Javascript file containing the logic for the application\n* android - the directory containing the Android source\n* app.json - miscellaneous React Native property file\n* bin - contains various scripts\n* index.android.js - legacy file that points to App.js to launch your application for Android\n* index.ios.js - legacy file that points to App.js to launch your application for iOS\n* index.js - entry file that points to the main application in App.js\n* ios - directory containing the iOS source\n* js - directory containing the Javascript source\n* node_modules - directory containing all the node modules as specified by the package.json file\n* package.json - file that tells node what modules are required\n* rn-cli.config.js - file that configures the React Native CLI (we use it to whitelist new file extensions for the packager server)\n* setup-ide.sh - script used to automatically set up Xcode and Android Studio from scratch.", "title": "What each file/directory means" } [/block] In the sample project, the `App.js` file simply contains boilerplate which launches into the `HelloWorldScene.js` contained inside the `/js/` directory. ## 5. Install Xcode Install Xcode 9 through the Appstore [here](https://itunes.apple.com/us/app/xcode/id497799835?mt=12). [block:callout] { "type": "danger", "title": "To develop using XCode, you will need a paid Apple Developer account.", "body": "If you do not have an account, use the Viro Media Testbed App by following the instructions at [Using the Testbed App](http://docs.viromedia.com/docs/develop-with-viro#section-using-the-testbed-app-no-xcode-required-)." } [/block] ## 6. Install Ruby Ensure you have at least [Ruby 2.2](https://www.ruby-lang.org/en/downloads/) installed, you can check this by running `ruby -v`. If you have an older version, follow the instructions here based on your OS/package manager/ruby manager: https://www.ruby-lang.org/en/documentation/installation/ ##7. Install CocoaPods We use CocoaPods to manage our dependencies on iOS. Run the following in your terminal and input computer password if needed: ```sudo gem install cocoapods``` [block:callout] { "type": "info", "body": "If 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\nThis could take a while as the command performs a git pull of the entire CocoaPods manifest repository." } [/block] ## 8. Run `setup-ide.sh` script In the terminal, navigate to the root of your project (**not** your iOS project, but ViroReact project) and run the following command: ```./setup-ide.sh ios``` Which will set up the project to work with Viro. ## 9. Create and add your Apple account to Xcode First, we need to open Xcode. To do so, open a new terminal window and navigate to the `ios` directory in your project and run: [block:code] { "codes": [ { "code": "open ViroSample.xcworkspace", "language": "shell" } ] } [/block] Your workspace should now be open in Xcode. To add your Apple Account to Xcode follow the instructions here: https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/AddingYourAccounttoXcode/AddingYourAccounttoXcode.html Once you add your Apple ID to Xcode, select your Project in the left navigation panel, select your App target and under the Signing section, select your Team. [block:image] { "images": [ { "image": [ "https://files.readme.io/734eb0c-Screen_Shot_2016-11-16_at_12.41.15_PM.png", "Screen Shot 2016-11-16 at 12.41.15 PM.png", 1048, 518, "#eae9ea" ] } ] } [/block] Do the same for the <ProjectName>Tests target too. ## 10. Run the Application Connect your device to your development machine. Tap "Trust" if prompt appears on your computer and/or device. Then, select your connected device in the top Active Scheme dropdown menu: [block:image] { "images": [ { "image": [ "https://files.readme.io/22e4f9b-select_device.png", "select_device.png", 766, 236, "#e6e6e6" ] } ] } [/block] Run the application and you should see the Hello World scene. **Congratulations, you now have ViroReact set up and running!** **Next Steps:** Check out our [VR Tutorial](doc:tutorial) or [AR Tutorial](doc:tutorial-ar) where we go through how to build a simple experience. [block:image] { "images": [ { "image": [ "https://files.readme.io/b07d6b0-viro_smile.gif", "viro_smile.gif", 180, 159, "#000000" ], "sizing": "smart" } ] } [/block] # Troubleshooting Here's a list of known issues that may appear during the installation process. Post [here](http://stackoverflow.com/search?q=react+viro) if you have an issue not listed here. **Missing node_modules Directory/Error with `npm install` command** This is probably because you do not have `node.js` installed and so, the init script failed to run `npm install`. To fix this, go to your root directory and run the below commands: [block:code] { "codes": [ { "code": "npm install\ncd ios\npod repo update\npod install", "language": "shell" } ] } [/block] Once you run those commands, your project should be properly set-up. Now you can start developing! **Unable to connect to the package server...** TODO: For all packager server issues, refer to the documentation about the packager server (add link to the packager server page explaining local network vs ngrok and how to switch between them) During development, ViroReact borrows React Native's package server which, rather than bundle your javascript files and assets, starts a local server on your development machine with which your development device connects to in order to get the files it needs. If you see this error, then either your package server isn't running or there's an issue with the connection between your development machine and device. Here are a few things you can try to resolve this issue: * The packager may not be running, to run it, you need to run `npm start` from your project's root * Try disconnecting and connecting to the network (on both device and dev machine) * Try performing a clean build and re-install of the app * You may need to disconnect your laptop from ethernet Problems with installation? Need extra help? Post your issue [here](http://stackoverflow.com/search?q=react+viro).