So we saw how we can build and deploy an app with expo in the managed workflow which was pretty convenient.
Now let's say we have an app for example built with the React Native CLI. Here I'm not using any native
modules but if I were, I would of course have updated my Android and iOS configuration files to
request the right permissions and so on and I showed all of that in the non-expo module earlier in the
course.
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
Play Store.
Now the official React Native docs are a great place to get started with that, there in the documentation
under guides, you also find this running on device guide where you can learn how you build your app
for iOS or Android on the different operating systems you might be working on. Important,
you can only build for iOS on macOS now, Linux and Windows don't work because now we're not building
the app in the cloud as we did with expo but locally on our machine and there, Apple has this restriction
that you can only build iOS apps on a Mac,
it is what it is.
So now what you need now is an apple developer account, right now not necessarily a paid one, just
build the app
however if you want to build it, for the app stores you need a paid one
as mentioned earlier in this module. So you should set up such an
Apple Developer account and then open your project here, your iOS project to be precise with Xcode.
There you can click open another project, go into your project folder, there to the iOS folder and there
select this XC workspace folder or file here to open this with Xcode.
This opens your project, your iOS project which includes your React Native code of course in Xcode. Now
it's there where you now configure this app, where you set up your identifier for example, that's this
inverse URL I was talking about which could be com.academind.rn-no expo test, something
like this, where you set a version number which your users will see and your build number which can
simply be a number that you increment here, where you should choose automatically manage signing and
where you now need to choose a team which should be shown here, if not add an account and there, log in
with your Apple ID to add your apple developer account as an account here and thereafter, you should
be able to choose your team here which will be required for automatically signing the app which will
then be done by Apple
so to say. You can in general configure your app here of course and prepare it for deployment
and one important configuration is of course related to the icons you want to use. In expo,
we set up the icons conveniently in a configuration and expo generated all the icons for us.
Now it won't work like this,
now you need to set up these icons on your own and you do this by clicking on this arrow here which
takes you to the assets catalog and there you can now provide icons and you need to provide icons in
different sizes here as you can tell.
Now obviously that was a convenient thing by expo,
it did create these icons for you and you didn't have to manually create all these icons. Attached however
you find an icons.zip file which includes icons you can drag and drop in here,
so that's what I'll now do and the icons are labeled such that it should be clear what you have to drag
where and with that, you got the icons configured.
You also might want to configure the launch screen, for that you can expand this folder and there you
find this launch screen zip file. This in the end allows you to customize your launch screen, there you
can add new widgets to it, drag images into it, change the text, you see here for example and configure the
launch screen in general. You can learn more about this in the Xcode docs of course and once you did
configure all of that, you can build your app here. For that, you can also for example test it on a simulator
first by choosing a simulator version, then clicking the play button here and this will now build
your app and run it on a simulator and thereafter of course, we can also build it for deployment.
Let's just see whether this now all works, it launches this bundler process which you already saw earlier
for this standalone app because of course that's still part of development experience here.
It's still a React Native app after all which you use for building this native app and now this succeeded
and it launches the app on a simulator.
Now I'm not too interested in the app there because I only have a very basic app there which doesn't
do anything fancy but this proves that building works.
Now in the official docs if you scroll down further still in this running on device section, you also
learn how to build your app for production
if it's a non-expo app and there, we now got two important things to do.
The first important thing is that in our project view here, by clicking on this folder and then on this
icon here, you expand this folder and then go to the info.plist and now there, you'll find this app
transport security settings key.
This kind of controls how iOS controls to which web pages or web servers your app may talk and by default,
it only allows access to https servers, so SSL secure servers.
That's a good default but you might have some exceptions which you can add here
and one exception in the exception domains list is localhost.
Now that's required for development because your React Native app in the end talks to this development
server here which runs on your localhost
which is not using SSL. Normally iOS would block this,
now to not block it, this is in the exceptions list. To build this for production,
you should remove this,
you can simply clear this key here by removing it with the delete key and that's it. That's one thing
you should configure for deployment and then you need to configure such a release scheme. For that, you'd
go to product scheme, edit scheme and set this from debug to release here for run and then close this.
With that, you can now run product build here to build your app
and now this is built for release, built for production, so it's optimized and so on.
So this builds your app now for production.
Now whilst this build runs,
let's make sure we can also upload it to the Apple App Store
and for this, you should go to your Apple Developer account and here you now definitely need a paid account
and there, you now need to set up a couple of things. You need to go to certificates, IDs and profiles
here and go to identifiers
and then here add a new app ID, just this here,
the first setting, add an app ID and you need to add the app ID which is set up in your project,
so the app ID, the bundle identifier you find here, that exact identifier needs to be added here. You can
add a description, rn-demo, whatever you want but then here you need to add this ID. Now you can check
any special capabilities your app requires which my app doesn't,
so I don't need to check anything there and then I can continue, confirm this and register.
Now this is required,
otherwise you won't be able to publish your app.
Now with that ID registered, you need to go to iTunes Connect and you can simply google for that which
is in the end the service where you create that store page and where you now need to set
up your app. There you can go to my apps and add a new app here by clicking the plus new app here,
by the way you also see the app we built with expo, so click new app here, iOS, give it a name like RNNoExpo
which of course is a beautiful name
which you wouldn't really want to use but it's good for us here,
then choose the language you're building your app for, choose the bundle ID and there, choose the ID
you just set up,
if it's not showing up yet, come back a couple of minutes later it will be there then. You can then also
add your own custom identifier which will show up on your invoices basically and so on, RNNoExpo,
whatever you want and click create and this now creates the app here in iTunes Connect.
This is then also where you can manage the app for the App Store and set it up, set up its pricing and
so on.
Now with all of that done, let's wait for our build to finish here and if it failed like it did for me,
reason for that is you need to set this to generic iOS device, so make sure you have this set.
Also make sure to add on this RNWithoutExpo test, you select your development team, that's
another error I got here.
If you're still getting an error as I do, press command 1 here in Xcode, click on build settings here
with all these things selected as you see it here,
in the linking section which you'll find if you scroll down a bit and in that code stripping part
here, under release, set this from yes to no.
This is a workaround around this error which seems to be related to the automatic tests which are set
up and once you did this, try this again, run the build one more time and now this should succeed. Once this
build succeeded, you can go back to product and now the archive option is available.
If you now run this, this archives your app which is nothing else than building that bundle which previously
was built on expo's cloud servers,
so let's wait for this to finish.
Once this is done,
you should see your archive or archives if you are in the process more than once here and now here
you could distribute your app to the App Store with the configurations made on iTunes Connect and so
on which I showed earlier.
Now I'll not do this here but this is how you would deploy your React Native only app without expo managed.