Every Way to Build your React Native App with Expo | Expo Go, Prebuild, Xcode, Android Studio & EAS

building react native applications with Expo is incredibly easy but at the same time also kind of confusing let's talk about all the ways how you can build your react native application with Expo including local builds Eis Android Studio X code and everything that you can do hey everyone what's up Simon Beck here with another tutorial on clarifying what you can do with Expo in your react native application in terms of building your app so here we go I have a completely blank new application and we're going to straight dive into this because the first thing is so easy you're just going to run npx Expo and you can follow this up with start or you can just do npx Expo this is the easiest way of building your react native application with Expo it will give you a QR code that you can scan with your Android device with your iOS device or you can simply press a I or W to open Android iOS simulator or web so I will just go with I which will bring up the iOS simulator I'm going to place it somewhere here at the same time I will show you this this is my device and we see right here I do have an expo build running on my computer so now on my actual device I can also launch the Expo go application and I will get the preview of my application so this is really the easiest the fastest way to build your re native application with Expo however there are considerably downsides to this just want to show you quickly to clarify this we do have live reload in here if we're using this application and the cool thing about Expo uh go is that we can also for example press control command Z that's a different shortcut for Android which opens up this nice view we're going to come back to that later but just keep in mind this is not the default debugging view of react native so how does all of this work I just wanted to really quickly dive into and show you how fast it works this is an application that comes bundled with a lot of sdks from Expo that means if we're using the camera uh some kind of contact plugins file system whatever it might be it is usually already bundled with this application you can just use it right out of the box however what if you want to use something like react native vision camera or some other package with Native modules that is not included in this app well then you have to turn to something else and that is what we're going to talk about in the Second Step so it's really important to understand that Expo go is a great way to quickly spin up your application it is okay for for using it while testing you can use it um like the complete time if you're only using um the Expo sdks and modules here then it's completely cool however there's also another downside right now since Expo SDK 50 or 51 there's only one version of Expo SDK bundle with the Expo goab so in the past there were multiple sdks included that's not the case anymore so you might get into problems here and there as well and that means Expo go is nice for quickly looking at your application for starting out you don't need Android uh Studio xcode you see nothing is here in my folders and it's really an easy way to look and share your application quickly but usually you want to take things a step further and that is where pre-build comes into play so Expo pre-build basically means it will take um the information you've specified in your app Json um there might be a block about plugins it might include some native settings some config plugins and then you generate an actual native project this usually works like this so let's stop this here and we do npx Expo pre-built we don't have to follow this up with anything this usually now asks us okay what would you like to name your package this is the bundle ID we'll just stick to uh the default here same for iOS and then it will create native folders for Android and iOS based on our application now here things get a bit more complicated because you can now launch them through Android Studio xcode you can continue to use the Expo CLI uh there's the term continuous native Generation Um so there's a lot already going on after you leave the comfort of the Expo go Application but bear with me we're going to walk through this so now that you have these Android and iOS folders the easiest way to run your application is going ahead with npx Expo run and then follow this up with either Android or iOS so I will just do PX Expo run iOS I will also now close this so we see what's going on we don't need this right now by the way if you run uh no npx pre-bill and just run npx Expo run iOS it will actually also on the first run do a pre-build of your project so it's kind of the same um and this might take a while because now we are actually building our own native application that will be built to our device so let's wait until this is finished all right so the build finished and we kind of see the same output it looks like we're still using the Expo go application or what's going on but notice the difference we are now using a development build so this is an important term um there you can actually still switch to the Expo go at by pressing s so now we have a build and the simulator here asked if I want to open this so I click open and we get kind of the same experience that we had before once again we we should have live reload so I can change something and it quickly changes in here as well um what has changed now this is our own application uh you see I launched this and I did not launch the Expo go Application that means on my device I also now lost the connection if I wanted to also deploy this to a device um I would have to follow up the command so I don't want to mess up the command let's do a new terminal npx run iOS D- device then I could build straight to my connected device and by the way this should now also work over the network so you don't even have to connect your uh device to your computer one caveat also that I want to quickly mention is I'm running this here on a Mac and you need a Mech to do a pre-build for iOS and to run this project on iOS the simulator like this if you're on a Windows machine you can only do this for Android and you have to use EAS which we will talk about in the end so now we have our development build as I said everything's pretty much the same but look at this if I now press command control Z I get the default react native debugging menu because this is sort of a default application it is a bit similar to what Expo eject did in the past you know Expo eject doesn't exist anymore and pre-build is the thing that gives you the most flexibility so at this point I can install any kind of native module in my react native application will Expo and use it here in um my pre-build if I want to do uh if I want to get back this cool debugging menu so this is also described here as uh the developer menu which you can by the way customize if I want to get back this thing I have to run a new command so let's kill this and let's run npx Expo install the Expo def client if if you install this package your final application resembles more closely what you have seen previously in the Expo go Application the only downsides to this approach is that in general if you install a new package you have to do a new NP Expo run iOS also one more thing to be aware of is if you add a new module that changes something in your app Json like under plugins there's a new module a new config plugin edit that changes your native project what you have to do is usually run again npx Expo prebuilt um D- clean okay so you don't need true or false uh at the end you just need npx Expo pre-build clean this will basically wipe out your IOS and Android folders in your project and do a new clean pre-build based on everything all the information in your app J Jason in the meantime here's the project coming up and you see this is now using the developer menu it gives you access to useful tools in your development build you can open it anytime with whatever so let's continue and we see if I now press control command Z here I get the def client menu that I'm used to from the Expo go application so this is pretty much everything that you have to understand about Expo pre-built um I think if you understand what Expo go is that is is this bundled app experience with preconfigured SDK versions and plugins that you can use to quickly spin up something and you can then opt out to do a pre-build and run npx Expo run iOS or Android on the simulator or on a connected device then you know like 80 85% about how you can build your react native project with Expo because usually this is now enough to debug and uh develop your application because the pre-build as I said gives you 100% flexibility you can install any native module you can use um config plugins and continuous native generation as you can see here we're still running live this is like uh a life test uh a live reload and hot reload of our application with Expo run and not the Expo go Application however let's take things a step further now you might be coming from Android Studio or IO or xcode as a native developer and you're asking yourself but maybe I just want to run it through these tools how could I do that good question I'm here to show you exactly this so as I said we do have an Android and iOS folder after doing our prebuild so the pre-build is kind of like the prerequisite uh to do what we do now what I want to do is I would actually like to open this I previously could really open this uh this folder right here let's reveal it in the finder and then I will open the XC workspace so this is a traditional xcode project now let's see what can we do we can deploy this to the iPhone 15 Pro I can do a run up here and of course at the same time we could launch Android studio uh and within Android Studio we could do something similar actually I will open Android Studio because it takes like AG is uh to uh open the stuff uh so let's bring in the Android folder here and click open an Android Studio yes I trust that project and then let's put this to the background because this takes some time to initialize in the meantime xcode is building my application and I intentionally want to show you something that usually goes wrong at this point so when you build your application through X code for whatever reason um maybe you just I don't know like it you like xcode you like the debugging tools of xcode I don't know for whatever reason you're doing this so if you do it from here we see app is launching but soon we should discover a problem because we already see uh it's trying to connect to Metro to develop JavaScript but uh it's not really working the problem here is that we still now need to start our local development server because if I check this out you see uh nothing is running so I do have to run npx Expo start again uh d d def cin I don't know if I need that I will just do npx Expo for the moment if I do this and I fetch this we see now I can select my build again I can connect and my app is working straight through xcode okay what did we just do well we just built the application the rec native application through xcode but this is app is still pointing to our local Metro server which means it's pulling out uh the stuff here and we have live reload and hot reload and refresh and whatnot but what if I kill this what if I want to install this application on a device of a friend uh I can't because I I deploy it and then I see this it's not really what I want so if you want I think they called it previously a standalone application that I can just like build on the iPhone of my wife then I would have to go into xcode and now it gets a bit more challenging so you have to now edit your scheme you have to edit the scheme you have to go uh check here the build configuration um right now it's set to debug I will now set this to release and I will close this and then I will run this again to my simulator okay so this is now building again hopefully it's not failing and we're just going to wait for a moment and then we're going to see what happens here to our iOS build all right so this build took really long like about 5 minutes I'm on a pretty fast MacBook but this was really still super slow um but notice what we do have now we do have this project if I change something in here ooh we're not connected to my server anymore well because we do have a release build of our application which also means I can kill this I can open it and it opens like the regular final application so that means if you change the release configuration here in this case the scheme to release you actually get what you would finally submit to the IOS app store at this point I could also now go ahead and run a product archive and do an archive build of this and upload the uh IPA I do get a problem because yeah I haven't selected my uh signing so we have to go here and select signing identi uh identity then I would sign and uh then I could finally do what is the shortcut for an archive wasn't there like a shortcut did they remove that anyway um so this is the release bill that I could build to some application that is not using a local development server but has really bundled everything in side I don't want to do this again uh not again please don't don't do this again okay so the thing about this is that if I now do changes here if I like change the minimum deployment Target or the display name and if I later refresh the the project with pre-build these settings would be removed so be careful about applying changes right here in xcode the recommended approach is usually that you put out a config plug-in uh and include it in your app Json so if you're using continuous native generation CNG that stuff is automatically applied to your xcode or Android project when you do a pre-build and then you have everything of the configuration again so if you have something like minimum deployment Target or things you include that in your app Json okay that's everything for the moment about xcode this should give you all the information you need to make a pre-build deploy it to your simulator or device and even do a release build and if you want to submit your app straight through xcode the classic way of building an iOS application and then handling the rest in uh App Store connect now let's talk about Android at this point hopefully my application is finished here um I also brought up my emulator device so I do have a virtual device uh you can find some guides on the internet on how to create your virtual device if you don't have one and then I will simply hit play here or whatever that button means which which will build my Andro uh my Android react native Expo application to my emulator or whatever device that I select up here however we're going to run into the same trouble that we had with iOS which means this in the default case is using a development instance which means we have to do npx Expo to spin up my local server to spin up Metro um yeah I should probably clean this I don't know why I sometimes get this uh it's not really causing any problems but it looks so ugly that I just want to get rid of it so let's do npx Expo again this will start this it is using once again a development build and meanwhile uh we see my app here on the emulator uh let's close this one behind this and I'll select my server we see it's loading here and I do get my live uh development environment okay so here we go and Android quick change and it of course instantly changes in my emulator or if I would deploy this to a connected device good um I don't want to go through the whole process again because it might take time but I just want to show you that if you want to do the same thing that we just did within xcode with Android Studio for whatever reason because Android Studio comes in my hierarchy even way lower than xcode um you could go on the side so let's see if we can see this down here I can't I think I can't zoom into Android Studio so down here there's something called build variants you can click that one and you're going to see by default it is set usually to debug if you now change this to release then what you can do is you can directly build your application uh as an APK or as a bundle okay it is now changed to this uh and you could now do I think from the top menu you have to select build uh uh where do I have to go I think I first need to kill this and then uh you can build build bundle or build apks let's say like to build it's in instantly doing this isn't there not like a dialogue coming up um well yeah if you do a generate signed bundle then you go through the process okay so you could now through Android Studio create an APK create a bundle file in the usual way with a key store files and y y y I think that procedure it should be pretty clear for the people who want to use this now a few more things and notes on these uh process and what we can do as well so if you don't want to go into these tools you don't really have to first of all what we did in xcode can be replaced bi a command if we use npx Expo run iOS we had that part before but if you pass in the configuration release it's doing pretty much the same like changing our scheme and we could also follow this up with D- device if we now wanted to build this on our device and cool thing it's coming up with my uh devices here pretty cool um same thing is almost true for Android so for Android what you could do is uh npx Expo run Android and then using D- variant release okay instead of configuration release on Android it's usually called a variant then you would build your uh release variant and this one actually built my release through Android Studio pretty nice so here we go I do have an app release aab that I can drag into mylic uh my Android device okay so this is the way how we could do the same things that we just did with xcode and Android Studio straight through the Expo CLI finally I just want to mention that if you like to do this stuff you could also do something like CD Android and then do um Gradle let's see uh Gradle and then assemble release I think there's like a command to also get like everything if I just do Gradle does it show me like all the possible commands uh I don't know if I wanted to do this I just wanted to get a list of what's possible I think this was not a good idea um yeah well I just wanted to mention that you could also straight from the command line build your application so if you use Gradle assemble release then this is the command to build your Android application straight from the command line it doesn't really tied too much into react native and Expo specific stuff I just want to mention it so you've seen it that you could do that stuff from the command line as well so we've now seen Expo go Application super easy Expo pre-build also kind of easy how to use the native tools how to use EXO tools and how to use Android Studio to build your application and this means you have like 95% of the knowledge about how to build your react native application with Expo and this actually is like enough to build an app to develop an app to release release an app and you don't need anything more Beyond this however let's also talk about EAS so I think it's quite interesting for you to see that until now I haven't mentioned the word e or anything of like paid bills everything that you've seen so far in this video is completely free using Expo using the CLI using Android studio using xcode and using the available tools to build your app which just shows you don't have to use EAS but it can dramatically simplify how you build your react native application so EAS build is a hosted service for building app binaries for your Expo and react native projects the first time I got in contact with Expo and uh looked up how to build stuff I quickly got into EAS and then local builds of EAS and everything looked so uh confusing so that's why I wanted to show you all the other things of expoo and preil and what you can do locally before we actually get into this thing because this might otherwise scare you away and say oh Expo is only paid they wanted me you use EAS no you completely don't have to use this if you don't want to but let's see what we can do so usually it starts like this in my application I would know go ahead and run EAS login and you have to install the EAS CLI so yeah uh it should be EAS C- CLI so now let me log in here logging in also means of course that you do need an account but you can create one for free at expo. deev once you are logged in you can run EAS build configure so that configures our local project okay would you like to automatically create an EAS project in your account yes I do want this so this is now creating my uh app in the dashboard right here so if I go under projects uh what did I call this right now I think I called this Expo build right I at least I hope so okay which platform would you like to configure let's say all all righty then your project is ready to build it generated an EAS Json we're going to have to look at that in a second and I can now run EAS build when you're ready to create your first build all right uh let's first of all check out the EAS Json so this is a file that just specifies a few things about our project and how Expo can now build our Android and iOS application in the cloud if you now want to build for iOS let's talk about this um first of all there's a block that you can add to your um e. Json so for Android this is quite easy if you want an Android emulator build for iOS we need this little block usually uh so let's put this right here okay so this is now a development simulator build using the development client once again what we installed in the beginning you should Now understand what development client means I want to distribute this internally and for iOS I want to use the simulator so at this time uh I want to create my cloud build and I could now run the following command Okay e build-- profile the profile we just added go away ah go away uh uh so development simulator is the name right here of my profile and then platform iOS is U well the platform iOS all right I can hit enter and what happens next is that this would be built in the cloud on the Expo servers and because I'm on a free plan I usually get like in a lower tier I do have some free builds per month that I can use but usually if you're an agency a company that's serious about that stuff you would usually upgrade your account so you're in a higher tier of that Cube um if I check out expo buildt here um what is this you didn't like my command what's your problem EAS build yeah whatever okay so it's uploading my stuff to EAS build details are here I want to open that page let's take a look and you can now um observe what is going on it's creating a new worker instance um we do have the iOS simulator buildt up here you can also get notified once this is finished and the stages is built in progress so we're just going to leave this in the background um because this might take some time um in the meantime I think we can close this so yeah you can press exit you don't have to worry about this you can continue with your work get a coffee whatever because this is now running in the cloud out however um if you now want to add your devices you also have to run some commands to um uh run EAS device create should I do this um maybe we going to do this uh EAS device create so I can know uh yes I want that account um and then I want to lock into my team and I want uh let's say I want a website this is quite interesting because on iOS it's quite hard to like publish your application for testing to other people you usually need profiles and certificates and include devices and their uu IDs in those profiles so in order to make this easier there are different ways to set this up uh allows you to manually input IDs you can have like uh import stuff from the developer portal or what I really like is a website so I could now go to this website uh right here and I could just scan this and it would easily install so installing the provisioning profile would work just by scanning this code with my device so this is pretty cool in a nice way once again a simplification from Expo to get testing devices into your iOS uh program now okay my cloud bill is running we're going to check it out once it is finished what we can do as well is use the settings from EAS but do a local build um the idea here is that if you do a local build with EAS you can basically test how your app would be built on the Expo uh EAS servers um on top of that I mean it builds your application you get a night output of that so um it is a bit easier if you're like limited if you have a free account then you can still do this locally again coming back to what I said earlier if you want to build for iOS you need a Mech you can't do an EAS local build for iOS on windows so what I would do is now pretty much the same like before EAS build-- profile I will just use development for now uh development and then I would say p iOS and follow this up with D- local all right and now what we witness is the exact same build of my application my react native application um but locally okay so here my build is running in the cloud I don't know what's going on it's still spinning up the development environment no it's almost finished oh nice we are already installing the pots I'm on a high priority Quee today and this what's going on here is uh exactly the same thing so yeah select devices I've included all the devices what you like to set up push notifications no don't want this again so after a lot of quest questions it will finally build my application and then it will do the same stuff as I said that's doing here it's using fast line in the background um you can also configure your own fast line stuff but why would you do this uh if you could just use EAS or other tools so this is Expo EAS explained for IOS as you've seen we can do it locally we just need to configure the project ones or we can build in the cloud which of course gives you access to a lot more things you can connect um your accounts your app store connect account to EAS which means the build is in the cloud it will get submitted to App Store connect and it's just a lot easier to make new releases of your application so for everyone who's doing frequent updates for every company that's doing frequent updates to the react native application e is highly recommended I've talked to many companies and they all just love it just look at the statistics in the state of react native survey okay um would be pretty cool if this would be finished uh it's already running first Lane so maybe let's wait a second until this is done all right in the meantime a few things happened so locally I ran the command to build an iOS application with EAS it generated an API uh IPA file as you can see but it put it into the Android folder I'm not entirely sure what went wrong right here because this file here should be at the top level ah it's because I'm in the the Android folder I ran the command from the Android folder okay so my bad usually this file happens right here and then you have your IPA file that you can deploy to an iOS uh device if you want to share it like this okay this is my local EAS bill at the same time I also ran the cloud build for whatever reason that failed uh and it failed at an upload task to Google API so I definitely didn't want to upload my archive in the first place so I don't know why this failed and anyway um I'm going to show you something that succeeded in a second also in the meantime what I did is sneaky Simon ran the same command for Android so we do see if I go to development builds of my project I have an Android internal build as well going on it's currently building it's running Gradle prepared the credentials so probably in a minute uh we should see my APK file that I could download here as well however I did this up front to test things and of course here in this showcase I have this finished so if you successfully do these things you can usually see something like this you get a download here I can download this would give me an okay a tar file and of course the same here for Android I could install this just with a QR code with a link really doing a lot of easy stuff however both also have this button to open with orbit so if you're interested in Expo orbit you can read about this right here it's a cool extension that you can install for mac and windows and then you can like directly run a build on your device if I now click Expo orbit here you don't see it I can select a build from EAS uh but it's kind of boring so um just check this out yourself but with orbit you could now directly deploy this EAS build to your simulator to your devices and it makes things once again a bit easier so regarding EAS you need to configure your project with EAS then you need to sometimes create devices and upload credentials um and then you can build your project either locally with EAS or as it is intended in the cloud um if you do a cloud build you can do a for both IOS and Android you can't do a local iOS build on Windows and you can finally use these archives to directly connect them to App Store connect and Google Play Store and submit them and easily build out these pipelines or do the builds locally and with Expo orbit you can just easily install that stuff later okay that's almost everything I wanted to show you I just want to mention one more thing and that is the uh great course from KD kreman here on egad uh I usually don't promote egad because on Galaxies you have basically all the courses that you need but this one is free and it's really a great resource uh if you're interested in more building deploy react native apps with Expo EAS she covers everything of that process as well in this course so you can check this one out we do have another course on building and Publishing your app on Galaxies as well so for all Galaxy Pro members you should find a similar resource and maybe I can also convince Katie to create a course for galaxies in the future that is my dream I really hope this video gave you an overview about how uh you can build your react native application with Expo the different ways we've talked about Expo go the easy way Expo pre-build once you use your own native modules and need more freedom than Expo go how you can use and leverage Android studio and xcode to build your applications locally to create archives or even submit your application and we've covered EAS which can help you to build things for example if you're on Windows and want an iOS build you can do this with EAS in the cloud or you can use EAS has to easily build up a pipeline of build commit release your application to App Store connect Play store and just have everything covered in one place that works really really Flawless you can also do updates over thee a updates really there's a whole lot more to EAS so let me know if you have more questions about EAS and we can do a specific course or video on just doing EAS or you check out the resource from KD so thanks for watching make sure you stay subscribed check out Galaxy def if you want more guidance more projects and more video courses on react native and also a supportive community and I will catch you in the next one so until then Happy coding Simon

Channel: Simon Grimm

Views: 18,071

Keywords: galaxies, galaxies.dev, simon grimm, build expo app, expo eas, react native build, expo cli, expo local build, expo apk, expo ipa, expo bundle app, build react native app

Id: cs-zgHjt5RQ

Length: 36min 44sec (2204 seconds)

Published: Tue Jun 04 2024