Expo Development Build with Expo Dev Client

hello everyone and welcome back to the channel um when you are developing react native applications using Expo you have some limitations as in what libraries you can use basically you're limited to whatever is supported by Expo and there are a lot of react native libraries out there that will uh eventually you will need to use them if you're building a production ready application so with Expo Dev client you will be actually able to do that and that's what we're going to talk about in this video H you will still have access to all the cool things that Expo application services or EAS provides you things like uh quick publishing uh apps through Apple App Store or Google Play Store also like pushing updates to your apps and that all those kind of cool things that EAS makes it so easy for uh react native developers but like I said you will also get access to uh all the other libraries that react native uh developers just have access to but Expo normally doesn't allow you to use those so uh with that let's get started so we need to create development builds every time for example you have a new react native Library that's not supported with Expo you need to uh create a new development build and or some other changes for example you make to your app. Json file or that kind of thing that will affect a uh build then you have to create a new development build uh we're going to continue working on what we've been working on so this is our uh Expo application that we've been uh building with Expo router and uh also we added the dark and light theme in a previous video it has also tail wi configured so uh if you want to check out those videos make sure to go and take a look I'll put a link uh different links to those videos as well throughout this video and also in the description box below uh but what we are having what we are starting right now is the final code from the previous video and I will put all these codes in GitHub so you will have access to uh these as well so uh what we are going to do here right now is going to create a new development build and uh we're just going to start looking at the documentation Expo documentation uh we're going to uh actually use uh uh create these using ES EAS build and not locally cuz again we have a lot of cool things that it as build we can access to and also the other thing is that you will have to uh download and studio and xcode uh on your machines and if you don't have a Macbook for example you can't have xcode so you can't build these locally so uh first thing first we're going to click on this uh create your first build and again I will put also links all these links in the description box below this video and what we're going to do is just follow the steps here first thing is that you need to have a react native app so we already have that here and we need to create an expo user account so you have the link Here expo. dev. sign up when you once you click on it it's just going to take you through the process of signing up for an account not so hard just email password some personal information and uh they don't need the credit card or anything uh you will just be able to also add a uh like a multiactor off also and that's all you will need to do and when you go to the dashboard this probably will be empty for you guys I already have a couple projects uh but we'll we'll see how this whole thing works so once we do that uh just keep in mind that they have this EAS pricing as well we are going to use the free plan which allows 30 builds per month up to 15 iOS I have an app in production and honestly uh I haven't really needed these many uh builds per month so the free plan is more than enough if you are just starting to building even for production so uh no need to worry about that uh uh going back to the um documentation over here we need to install the layer e CLI so you can just copy this and in your terminal if you're a Mac you need to add pseudo otherwise just mpm install dasg asli globally I already have it so it's just easy click enter and it's going to install uh the es CLI for you uh then the next step is to log into your Expo account so again this to you uh yes Expo account again this is what we will be doing loging from the CLI into this uh account so if you copy and do EAS login it's going to ask you for your username or email and then password and so on and so forth so I'm already logged in so I don't need to log in again um the next step over here is you can check by whether you're logged in by just using the yes who am I so let's make sure I am logged in and I am logged in that's like my account my username uh for this uh Expo as you can see RN Journey over here so we should be uh almost done here uh the last step is to configure the project so this is important because we are going to create a new file called e. Json file and uh that basically will have a lot of information about each build it also has the information about your project ID which includes things like the project name and slug that you have over here in app. Json file so if you want to make any changes to this app. Json file specifically to the name and slog uh this is time to do that so I'm actually going to make a little bit of change so I'm going to do RN Journey over here and this is basically the name of your app that will show up on uh like device and also uh the slug will be used for uh the link in the iOS and apple uh Apple and Google store so I'm going to uh save that and once I'm good with that now the next step is to configure my uh project using this command yes buil configure and then uh it's going to tell you you your project is not configure because you don't have an e. Json file currently here uh so it's going to ask you would you like to automatically create and then you'll say yes and that's going to also ask you what platforms you want it for and then just all and that's it they have also documentation over here you can take a look uh it's just what we did so nothing uh too complicated there and with that we're going to have this es. Json file and also app. Json file we will see that some uh something is added we have now this extra ke over here with some configurations and this is the project ID that has kind of reference to the uh slug that we have here so that's why we needed to make sure that is kind of like final if it's not you will have to like kind of delete it again and recreate it using this same EAS build but I think that's totally uh fine so we're already set with EAS Json file all right we have configured our project and now we can go back to the uh original link that we had here we've taken care of the prerequisites for this and now we need to install the Expo def client in our project so just copy that come back over here and then install Expo Dev client for your project and we should be able to see that in our uh package.json file so we're good the next step is um verifying your e. Json configuration So currently what we have is exactly what they're showing going there so we have this uh different uh builds for example development preview on production later on uh you will see that I will configure these in other videos but right now we are mainly focused on development and for now uh we're good we have the development uh code over there so we'll be good and then the next step is B basically creating a build for emulator or simulator so what we have Android emulator actually we ready to create a build for iOS though we need to add a uh another development uh basically for the simulator so just copy this whole thing over here and you can add that right after development don't forget to add a comma here and so this is going to take care of development for iOS Simulator the first one that we had you can use that for Android uh devices and also Android emulator but for iOS you need a separate development build uh code basically here and also for actual iOS devices you will need to create a apple developer account but at this point we're not going to do that uh we're okay with iOS develop ER iOS simulator uh and so later on again in future videos as I continue uh creating more videos and we get to a point that we ready to kind of like submit uh apps to Apple store or just test things on our physical devices well both configure those as well so I'm going to save it right now and now we are ready to build our uh basically first uh build so for Android you can just copy and then paste over here and uh if you click on it it's probably going to ask you what would you like your Android application ID to be so this is kind of what you probably seen before uh for uh Google Play Store for example your link the link to your app will be kind of like uh something like playstore.com do for example in my case r journey. r Journey so this is kind of like a reverse uh domain kind of thing so for example if your domain is uh example.com you can have like com. example. my app and uh I'm not going to really get into details of that for now I'm like cool with this one uh for example if you're Facebook you will have com. met. Instagram for example or if you have just one product like what I have here you can do just com. r journey. r Journey because you don't have any other products um so with that I'm okay with this one I'm going to click okay and then it's going to ask if I want to generate any new Android key store I'm going to click yes as well and then uh once I do that uh bill is in progress now if I go to Expo dashboard you might want to refresh the page and then you will see like a new project for example right now I have R in Journey click on that you will see that the build for Android is in progress and this normally takes a few minut minutes uh depending on how big your application is but once it's done uh then you'll be able to install it on your emulator uh or for example we can also so stop this right now and do a build for our uh iOS simulator and for that we already added the de development simulator thing in es. Json so we copy that and then we can paste it over here and this is going to also ask you about the same B bundle it unifier I tend to pick those uh select this similar uh to what I had before that's the best practice later on we are doing Firebase stuff or things like that this is just the best if you keep these the same name and then with that this one is going to be waiting in the queue because uh with the free plan you can have one build at a time and so this is uh going through right now so this one the simulator build is in the queue and the Android is building in once these are done all come back and show you uh how you can install this on your emulator and simulator so the Android build is done here you can see that and you can click on it and then you'll see basically it went through and then what we need to do here if you want to install it on your Android device you can click on install and scan this code and then it will get you to this page uh on your Android uh phone and then you you can click on Three Dots and download build we're going to do it on a in an emulator so what I'm going to do I'm just going to click on download build I've already done that actually so I have the downloaded APK file and then while I have my Android emulator open I can actually grab this and drag and drop it on my emulator just like that and it's going to install the APK and I should see it appear on my phone so like here I don't have right now any uh good icon but we'll get to that in another video so if I click on it right now it's going to open my development build and then it's going to tell me what command I need to run to be able to use this there right here MPX Expo start-- Dev client so MPX Expo start D da- client is what the command that you will be needing to use uh if you click enter it's going to start this uh Dev client and you will see that you have now you're using development build right now and if I click a it should open that application on my Android now this whole process might look similar to Expo Go app but why we did this is because there are libraries that you want to use from the react native not Expo later on that you will need to create these builds every time you add those libraries and also a lot of other things that uh you could potentially do with react native like adding native code and all those kind of things you uh will probably be able to do it using this approach as well cuz when you make changes you're actually going to create new builds uh using ES build command so like you see here this is all good and now if I make a change uh for example to my code over here like for example I go inside my tab over here and change this uh I do not need to build a new uh build for this so like I said major changes like adding new react native specific libraries or that kind of thing that require that require a new build that's when you create new builds but even if you download or install a new Expo um Library Expo supported Library uh you won't need to do a new build here so just keep that in mind with the iOS build it's also the same we currently have that for the iOS uh simulator so once that build is done you can just download it and install the uh app on your iOS machine as well so iOS simulator uh nothing different again uh only if you add new react native libraries or make changes uh that need a new build you will uh basically have to create a new build uh other than that uh every time just keep remember you're running your uh Expo you need to to add this this D- Dev D client from now on CU you're using the uh Dev client and uh with that uh you can still use the EAS uh provided benefits again like uh pushing to Apple app store Google Play Store making updates or those kind of things so uh all right that's about it if you like the video make sure to hit the like button don't forget to subscribe to the channel I will be posting a lot more videos about a lot of different related things so make sure that you hit the notification Bell as well so you're uh notified when I uh put a new video on YouTube and if you have any questions feel free to ask in the comment box below all right thank you

Channel: React Native Journey

Views: 972

Keywords:

Id: C04MMx3ucO0

Length: 19min 21sec (1161 seconds)

Published: Sun Apr 21 2024