1 00:00:02,450 --> 00:00:09,560 So we saw how we can build and deploy an app with expo in the managed workflow which was pretty convenient. 2 00:00:09,560 --> 00:00:15,770 Now let's say we have an app for example built with the React Native CLI. Here I'm not using any native 3 00:00:15,770 --> 00:00:21,650 modules but if I were, I would of course have updated my Android and iOS configuration files to 4 00:00:21,650 --> 00:00:27,410 request the right permissions and so on and I showed all of that in the non-expo module earlier in the 5 00:00:27,410 --> 00:00:27,830 course. 6 00:00:28,130 --> 00:00:32,870 So now let's say we're happy with the app and we want to publish it to the Apple App Store and the Google 7 00:00:32,870 --> 00:00:34,190 Play Store. 8 00:00:34,190 --> 00:00:38,900 Now the official React Native docs are a great place to get started with that, there in the documentation 9 00:00:38,930 --> 00:00:44,660 under guides, you also find this running on device guide where you can learn how you build your app 10 00:00:45,050 --> 00:00:50,000 for iOS or Android on the different operating systems you might be working on. Important, 11 00:00:50,000 --> 00:00:55,190 you can only build for iOS on macOS now, Linux and Windows don't work because now we're not building 12 00:00:55,190 --> 00:01:01,250 the app in the cloud as we did with expo but locally on our machine and there, Apple has this restriction 13 00:01:01,460 --> 00:01:03,730 that you can only build iOS apps on a Mac, 14 00:01:03,740 --> 00:01:04,580 it is what it is. 15 00:01:05,510 --> 00:01:12,820 So now what you need now is an apple developer account, right now not necessarily a paid one, just 16 00:01:12,820 --> 00:01:13,480 build the app 17 00:01:13,480 --> 00:01:17,590 however if you want to build it, for the app stores you need a paid one 18 00:01:17,590 --> 00:01:20,950 as mentioned earlier in this module. So you should set up such an 19 00:01:20,950 --> 00:01:27,550 Apple Developer account and then open your project here, your iOS project to be precise with Xcode. 20 00:01:28,330 --> 00:01:35,980 There you can click open another project, go into your project folder, there to the iOS folder and there 21 00:01:35,980 --> 00:01:41,560 select this XC workspace folder or file here to open this with Xcode. 22 00:01:41,620 --> 00:01:48,940 This opens your project, your iOS project which includes your React Native code of course in Xcode. Now 23 00:01:48,990 --> 00:01:53,810 it's there where you now configure this app, where you set up your identifier for example, that's this 24 00:01:53,870 --> 00:02:02,910 inverse URL I was talking about which could be com.academind.rn-no expo test, something 25 00:02:02,910 --> 00:02:08,330 like this, where you set a version number which your users will see and your build number which can 26 00:02:08,330 --> 00:02:13,280 simply be a number that you increment here, where you should choose automatically manage signing and 27 00:02:13,280 --> 00:02:20,320 where you now need to choose a team which should be shown here, if not add an account and there, log in 28 00:02:20,320 --> 00:02:26,350 with your Apple ID to add your apple developer account as an account here and thereafter, you should 29 00:02:26,350 --> 00:02:31,360 be able to choose your team here which will be required for automatically signing the app which will 30 00:02:31,360 --> 00:02:32,830 then be done by Apple 31 00:02:32,830 --> 00:02:38,970 so to say. You can in general configure your app here of course and prepare it for deployment 32 00:02:39,010 --> 00:02:44,640 and one important configuration is of course related to the icons you want to use. In expo, 33 00:02:44,650 --> 00:02:50,430 we set up the icons conveniently in a configuration and expo generated all the icons for us. 34 00:02:50,470 --> 00:02:52,410 Now it won't work like this, 35 00:02:52,480 --> 00:02:59,650 now you need to set up these icons on your own and you do this by clicking on this arrow here which 36 00:02:59,650 --> 00:03:06,570 takes you to the assets catalog and there you can now provide icons and you need to provide icons in 37 00:03:06,570 --> 00:03:09,050 different sizes here as you can tell. 38 00:03:09,270 --> 00:03:11,610 Now obviously that was a convenient thing by expo, 39 00:03:11,610 --> 00:03:17,690 it did create these icons for you and you didn't have to manually create all these icons. Attached however 40 00:03:17,690 --> 00:03:22,550 you find an icons.zip file which includes icons you can drag and drop in here, 41 00:03:22,550 --> 00:03:29,740 so that's what I'll now do and the icons are labeled such that it should be clear what you have to drag 42 00:03:29,740 --> 00:03:35,560 where and with that, you got the icons configured. 43 00:03:35,750 --> 00:03:40,790 You also might want to configure the launch screen, for that you can expand this folder and there you 44 00:03:40,790 --> 00:03:48,610 find this launch screen zip file. This in the end allows you to customize your launch screen, there you 45 00:03:48,610 --> 00:03:55,660 can add new widgets to it, drag images into it, change the text, you see here for example and configure the 46 00:03:55,660 --> 00:04:01,920 launch screen in general. You can learn more about this in the Xcode docs of course and once you did 47 00:04:01,920 --> 00:04:09,700 configure all of that, you can build your app here. For that, you can also for example test it on a simulator 48 00:04:09,700 --> 00:04:14,710 first by choosing a simulator version, then clicking the play button here and this will now build 49 00:04:14,710 --> 00:04:19,920 your app and run it on a simulator and thereafter of course, we can also build it for deployment. 50 00:04:19,930 --> 00:04:27,840 Let's just see whether this now all works, it launches this bundler process which you already saw earlier 51 00:04:27,850 --> 00:04:33,630 for this standalone app because of course that's still part of development experience here. 52 00:04:33,700 --> 00:04:42,070 It's still a React Native app after all which you use for building this native app and now this succeeded 53 00:04:42,100 --> 00:04:44,140 and it launches the app on a simulator. 54 00:04:44,140 --> 00:04:49,270 Now I'm not too interested in the app there because I only have a very basic app there which doesn't 55 00:04:49,270 --> 00:04:53,370 do anything fancy but this proves that building works. 56 00:04:53,480 --> 00:04:57,970 Now in the official docs if you scroll down further still in this running on device section, you also 57 00:04:57,970 --> 00:05:00,030 learn how to build your app for production 58 00:05:00,520 --> 00:05:05,510 if it's a non-expo app and there, we now got two important things to do. 59 00:05:05,530 --> 00:05:10,900 The first important thing is that in our project view here, by clicking on this folder and then on this 60 00:05:10,900 --> 00:05:20,290 icon here, you expand this folder and then go to the info.plist and now there, you'll find this app 61 00:05:20,290 --> 00:05:22,820 transport security settings key. 62 00:05:22,870 --> 00:05:29,470 This kind of controls how iOS controls to which web pages or web servers your app may talk and by default, 63 00:05:29,470 --> 00:05:35,470 it only allows access to https servers, so SSL secure servers. 64 00:05:35,470 --> 00:05:39,270 That's a good default but you might have some exceptions which you can add here 65 00:05:39,370 --> 00:05:44,120 and one exception in the exception domains list is localhost. 66 00:05:44,180 --> 00:05:49,450 Now that's required for development because your React Native app in the end talks to this development 67 00:05:49,450 --> 00:05:51,680 server here which runs on your localhost 68 00:05:51,820 --> 00:05:55,820 which is not using SSL. Normally iOS would block this, 69 00:05:55,900 --> 00:06:01,000 now to not block it, this is in the exceptions list. To build this for production, 70 00:06:01,060 --> 00:06:02,080 you should remove this, 71 00:06:02,080 --> 00:06:08,230 you can simply clear this key here by removing it with the delete key and that's it. That's one thing 72 00:06:08,230 --> 00:06:15,630 you should configure for deployment and then you need to configure such a release scheme. For that, you'd 73 00:06:15,640 --> 00:06:24,700 go to product scheme, edit scheme and set this from debug to release here for run and then close this. 74 00:06:25,760 --> 00:06:30,470 With that, you can now run product build here to build your app 75 00:06:30,470 --> 00:06:35,090 and now this is built for release, built for production, so it's optimized and so on. 76 00:06:35,090 --> 00:06:37,530 So this builds your app now for production. 77 00:06:38,720 --> 00:06:39,980 Now whilst this build runs, 78 00:06:39,980 --> 00:06:42,940 let's make sure we can also upload it to the Apple App Store 79 00:06:42,950 --> 00:06:48,590 and for this, you should go to your Apple Developer account and here you now definitely need a paid account 80 00:06:49,550 --> 00:06:55,250 and there, you now need to set up a couple of things. You need to go to certificates, IDs and profiles 81 00:06:55,250 --> 00:06:58,370 here and go to identifiers 82 00:06:58,370 --> 00:07:02,140 and then here add a new app ID, just this here, 83 00:07:02,150 --> 00:07:07,690 the first setting, add an app ID and you need to add the app ID which is set up in your project, 84 00:07:07,700 --> 00:07:14,240 so the app ID, the bundle identifier you find here, that exact identifier needs to be added here. You can 85 00:07:14,240 --> 00:07:22,840 add a description, rn-demo, whatever you want but then here you need to add this ID. Now you can check 86 00:07:22,870 --> 00:07:26,410 any special capabilities your app requires which my app doesn't, 87 00:07:26,410 --> 00:07:31,740 so I don't need to check anything there and then I can continue, confirm this and register. 88 00:07:31,750 --> 00:07:32,680 Now this is required, 89 00:07:32,680 --> 00:07:36,010 otherwise you won't be able to publish your app. 90 00:07:36,040 --> 00:07:42,510 Now with that ID registered, you need to go to iTunes Connect and you can simply google for that which 91 00:07:42,510 --> 00:07:48,090 is in the end the service where you create that store page and where you now need to set 92 00:07:48,090 --> 00:07:57,710 up your app. There you can go to my apps and add a new app here by clicking the plus new app here, 93 00:07:57,710 --> 00:08:06,010 by the way you also see the app we built with expo, so click new app here, iOS, give it a name like RNNoExpo 94 00:08:06,160 --> 00:08:08,070 which of course is a beautiful name 95 00:08:08,140 --> 00:08:11,110 which you wouldn't really want to use but it's good for us here, 96 00:08:11,260 --> 00:08:17,600 then choose the language you're building your app for, choose the bundle ID and there, choose the ID 97 00:08:17,620 --> 00:08:19,210 you just set up, 98 00:08:19,360 --> 00:08:26,060 if it's not showing up yet, come back a couple of minutes later it will be there then. You can then also 99 00:08:26,060 --> 00:08:32,750 add your own custom identifier which will show up on your invoices basically and so on, RNNoExpo, 100 00:08:32,750 --> 00:08:39,170 whatever you want and click create and this now creates the app here in iTunes Connect. 101 00:08:39,260 --> 00:08:44,750 This is then also where you can manage the app for the App Store and set it up, set up its pricing and 102 00:08:44,750 --> 00:08:45,910 so on. 103 00:08:45,980 --> 00:08:52,870 Now with all of that done, let's wait for our build to finish here and if it failed like it did for me, 104 00:08:52,870 --> 00:08:59,220 reason for that is you need to set this to generic iOS device, so make sure you have this set. 105 00:08:59,220 --> 00:09:03,810 Also make sure to add on this RNWithoutExpo test, you select your development team, that's 106 00:09:03,810 --> 00:09:05,170 another error I got here. 107 00:09:06,150 --> 00:09:14,510 If you're still getting an error as I do, press command 1 here in Xcode, click on build settings here 108 00:09:14,600 --> 00:09:17,020 with all these things selected as you see it here, 109 00:09:19,930 --> 00:09:26,170 in the linking section which you'll find if you scroll down a bit and in that code stripping part 110 00:09:26,180 --> 00:09:32,180 here, under release, set this from yes to no. 111 00:09:32,200 --> 00:09:36,280 This is a workaround around this error which seems to be related to the automatic tests which are set 112 00:09:36,280 --> 00:09:45,020 up and once you did this, try this again, run the build one more time and now this should succeed. Once this 113 00:09:45,020 --> 00:09:49,760 build succeeded, you can go back to product and now the archive option is available. 114 00:09:49,850 --> 00:09:56,570 If you now run this, this archives your app which is nothing else than building that bundle which previously 115 00:09:56,570 --> 00:09:59,490 was built on expo's cloud servers, 116 00:09:59,810 --> 00:10:01,340 so let's wait for this to finish. 117 00:10:02,490 --> 00:10:03,430 Once this is done, 118 00:10:03,430 --> 00:10:08,620 you should see your archive or archives if you are in the process more than once here and now here 119 00:10:08,620 --> 00:10:13,660 you could distribute your app to the App Store with the configurations made on iTunes Connect and so 120 00:10:13,660 --> 00:10:15,310 on which I showed earlier. 121 00:10:15,360 --> 00:10:20,890 Now I'll not do this here but this is how you would deploy your React Native only app without expo managed.