{"_id":"5b8469e2146f290003ee252c","category":{"_id":"5b8469e2146f290003ee24fc","version":"5b8469e2146f290003ee2585","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":"5b8469e2146f290003ee2585","project":"578c4badbd223d2000cc1441","__v":0,"forked_from":"5b74987b8326970003cfc12d","createdAt":"2018-04-23T20:03:35.726Z","releaseDate":"2018-04-23T20:03:35.726Z","categories":["5b8469e2146f290003ee24fb","5b8469e2146f290003ee24fc","5b8469e2146f290003ee24fd","5b8469e2146f290003ee24fe","5b8469e2146f290003ee24ff","5b8469e2146f290003ee2500","5b8469e2146f290003ee2501","5b8469e2146f290003ee2502","5b8469e2146f290003ee2503"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.10.0","version":"2.10.0"},"githubsync":"","__v":0,"updates":["59ec69e173b8560010f44970"],"next":{"pages":[],"description":""},"createdAt":"2016-10-31T18:22:59.993Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"# Prerequisites\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Have you run through the Quick Start guide?\",\n  \"body\": \"Run through steps 1-4 on the Quick Start guide before beginning this guide.\"\n}\n[/block]\n# 1. 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# 2. 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# 3. 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```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# 4. 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[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"If your app doesn't support `use_frameworks!` in Cocoapods...\",\n  \"body\": \"Read this page [Integrating w/o use_frameworks! (Cocoapods)](doc:no_use_frameworks)\"\n}\n[/block]\n# 5. 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# 6. 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\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Interesting in trying out ARKit 1.5 Features?\",\n  \"body\": \"Read this guide: [Enable ARKit 1.5 (Beta) Features](doc:enable-arkit-15-beta-features)\"\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\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](https://github.com/viromedia/viro/issues).","excerpt":"","slug":"starting-a-new-viro-project-1","type":"basic","title":"Set up Xcode with ViroReact"}

Set up Xcode with ViroReact


# Prerequisites [block:callout] { "type": "warning", "title": "Have you run through the Quick Start guide?", "body": "Run through steps 1-4 on the Quick Start guide before beginning this guide." } [/block] # 1. 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] # 2. 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/ # 3. Install CocoaPods We use CocoaPods to manage our dependencies on iOS. Run the following in your terminal and input computer password if needed: ```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] # 4. 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. [block:callout] { "type": "warning", "title": "If your app doesn't support `use_frameworks!` in Cocoapods...", "body": "Read this page [Integrating w/o use_frameworks! (Cocoapods)](doc:no_use_frameworks)" } [/block] # 5. 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. # 6. 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] [block:callout] { "type": "info", "title": "Interesting in trying out ARKit 1.5 Features?", "body": "Read this guide: [Enable ARKit 1.5 (Beta) Features](doc:enable-arkit-15-beta-features)" } [/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...** 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](https://github.com/viromedia/viro/issues).