Let's say you have created a new Expo project. You run npx expostart and it opens expogo. But actually you have heard that development builds are recommended for production apps.
So when you should make the switch between expogo to a development build? What does these concepts mean exactly? Keep watching to find out.
So before we start building our application, Let's first understand that development builds and expo go are both tools for developing react native applications, but they differ in how to get started and what they can do. So let's first start by creating a new expo app. So I'll just go ahead and run this command npx create expo app at latest.
So if I press enter, it's going to ask me if I want to install the create expo app package. So I'll just go ahead and say yes and press enter. And now my app name is going to be just my app because we used npx this is creating the project using npm so we need to wait a little bit until the dependencies are installed okay and the project is ready so let's open this in vs code okay so this is my brand new application let's just start the development server by saying npx expo start and press enter now this is going to start by default expo as you can see here and let's go ahead and run this on a simulator so i'll just press i to open this in my simulator Okay, so the simulator is open, as you can see here. Now we are inside the app, but if I go ahead and go to the home screen of my simulator, you're going to see that I have this ExpoGo app. And this is what ExpoGo is.
It's an app built with Expo, by the way, but it's unique compared to other apps. It functions as a sandbox environment specifically for testing and running Expo projects. So let's go ahead and press the ExpoGo app. And now we can see the Hello World. Okay, so far so good, but you might be wondering why do we need an app to build my app?
That's a great question. And the answer is that React Native provides core APIs. React Native is like the low-level API stuff that we can use, such as native modules, native components, debugger integration, JavaScript engine integration, among other things. These are low-level APIs, but to build a full-feature application, we need more capabilities that... don't come with React Native by default.
So like navigation, routing, push notifications, over-the-air updates, haptics, etc. And installing these common APIs that don't come with React Native by default can take quite some time and requires you to rebuild your application each time that you need a dependency. Finally, to test on a real device, you need to connect your phone to the computer and run the app through Xcode or Android Studio. You might need to have your developer account already set up.
And that's a lot of work just to get the environment ready to start developing and running your application. ExpoGo already comes with pre-installed commonly used libraries so you can quickly prototype and develop apps. And you just saw that it took me like a minute to create this new application.
And now we are ready to start editing. For example, if I quickly go to the index screen, come down here to the title and say, welcome ExpoGo and hit save. We have library loading, we have already navigation integrated with Expo Router, and we are ready to start actually shipping instead of fighting the framework, instead of installing libraries that we always need.
Now, this is great, and we have our application running very quickly on a simulator, but we can also do the same on a real device using Expo Go. So to do that, we can simply go to the App Store in your real device and search for Expo Go. Download the app and then scan this QR code that you can see here on the screen. Once you scan this QR code, the app, the project that you are working on is going to be loaded in the Xfoco application of your real device. And you're going to have the same benefits, live reloading.
You can quickly prototype and see what you're doing on your real device. That is huge. And notice that we don't need an Apple developer account yet. We don't even need to have Xcode or Android Studio.
Furthermore, you can be using Windows Machine. and still develop an iOS application by scanning the QR code with the iPhone camera app. So this is great.
We can start prototyping now and I can see the results on my real device using ExpoGo and on the simulator using ExpoGo as well. This is a great way to start prototyping and developing quickly, but it has some limitations. One of the limitations of ExpoGo is that you can only use libraries bundled in ExpoGo.
And to quickly learn if the library that you want to use is supported in ExpoGo, You can use the React Native directory. This is at pretty cool website that is going to tell you if the library is compatible with expo go and just by going to the react native directory i can quickly see some of the popular libraries and we can see that this is compatible with the new architecture with android ios expo go and even web now the only thing you have to do is just search for the library that you want to use let's say that i want to use the react native fiesta and i can quickly realize that this is going to work on expo go most expo sdk packages have partial or complete compatibility with expo go let's say that we want to use expo camera so i can just search for expo camera here or just go to the expo documentation and of course most of these packages from expo are going to be compatible with expo go so you can quickly start integrating libraries that use native functionality like the camera and still use expo go and it's also important to keep in mind that expo go is going to be compatible with any JavaScript library. Now, the limitation that I was mentioning before is that sometimes you're going to need a third-party library, libraries that are developed by the community. And in this case, if I just search for camera, you can see that the first one is Vision Camera, which is not compatible with ExpoGo.
Whereas the Expo Camera, you can see that New Architecture, Android, ExpoGo, iOS, and even Web. Another disadvantage of using ExpoGo is that at the end of the day, it's just a sandbox environment. And it does not accurately simulate some packages or some functionalities like notifications or OAuth authentication, analytics.
Additionally, because XBOCT doesn't use your app specific package name or bundle identifier, you might experience different behavior compared to a production build. So keep that in mind. And by the way, it's totally fine if from day zero or from the start of your application. you encounter that you cannot still use Xboct. And that's totally fine.
You have reached the point where Xboct is limiting your workflow. And at this point, Xboct has got you up to speed. And now it's time to smoothly graduate to using a development build. Okay, so let's create our first development build.
But what exactly is a development build before we do that? Well, a React Native app consists in two parts, the native app bundle, which is installed on a physical device and the JavaScript bundle that runs inside it. So in the case of expo go, the expo go app itself serves as a native app bundle. However, with a development build, you are creating this native app bundle yourself instead of relying on an already published app like expo go.
Think of development builds as your own customized version of expo go tailored with just the native code required to run the React Native app. You are developing. This gives you full control over the native runtime, allowing you to install native libraries, modify project configurations, or even write your own native code.
With Development Builds, you enjoy the benefits of any native library while still retaining the excellent developer experience that comes with Expo projects, which means we will have the benefits of library loading, and also we can install and test on real devices without having to deal with Xcode or Android Studio. There's two ways we can create a development build. One is locally, which is going to require to have Xcode and Android Studio if you want to run this on a simulator. But if you don't want to deal with Xcode or Android Studio, we can use EIS, which stands for Expo Application Services, to build our application in the cloud and then install it on a real device. We're going to see both in this case.
First, if I want to create a development build locally, I can simply run the command npx. expo per build. This is going to generate the native code for Android and iOS using a technique called continuous native generation.
Now, because so far our application didn't have any package or any bundle identifier. Now the CLI is asking us, which package do you want to use for your development build? So in this case, I'll just leave the default, but sometimes you'll have to change this for something more custom, like the name of your company and then come and then the name of your app.
So I just go ahead and press enter. And now it's asking me for the that was the Android package. Now I need to specify the iOS bundle identifier, go ahead and select the default as well. And on the left, as you can see, now we have an Android folder, and an iOS folder as well.
And these two folders contain the native code for our application. Now to run this native code, like I mentioned before, we need to have Xcode for iOS and Android Studio for Android. And for more information about how to set up your environment and how to install this, I'll leave a link in the description down here. So I already have Xcode and I already have the simulator, as you can see here on the right.
So I can simply say npx export run. And in this case, The command, it's a bit different. I'm saying basically run this native code on the iOS simulator.
So if I hit enter, this is going to work a bit different because now at this point, we are using the entire native code that lives inside this folder and you can open and check it out. But it's not recommended to modify this iOS folder since it's auto-generated by Expo every time that we run. npx pre-build so if you modify something the next time that you run npx expo pre-build to generate this folder the changes that you made before might be overwritten okay and as you can see the development build is ready now in this case the terminal is letting us know that we are using development builds and now on the right the simulator is asking me if i want to open this new app now we are not using expo go we have this native app called my app, which is the name of my app.
And if I press on open, the bundle is going to load. And now we see the same result. But in this case, we're using a development build, which you can rest assured that is the final result that the users are going to get. Once you publish this application, you can install libraries or packages that use native code and you should be go to go now, some of the key differences is that if I go back, you can see that this is a, an app itself, right? This is the app is not longer inside expo.
Go. Okay. So these are the differences.
Now, if I go back to my app, I can continue doing the same development and we would get the same results. So if I go to the index quickly, let's say that I want to say that build and hit save, we still have library loading and we don't need to rebuild this application unless we install a new native dependency or we did some native changes. Now this is one way in when we can create a development build and this is working fine. but sometimes you want to test a development build on a real device.
To do that, we can use EAS CLI. So I'll clear my terminal. And as I was mentioning before, EAS, ex-publication services, come with many services that we can use. And one of them is going to be EAS Build that allows us to build applications in the cloud and then install them on simulators or install it on real devices.
So let's use the CLI. So as you can see here on the right, this is my real iPhone that I'm using here. And I want to test this in like a production environment that I can be sure that the users are going to see once I publish this application. So let's use EAS build to create a build for my iPhone.
The first thing that you need to do is make sure that you have the EAS CLI installed. So you can check that by saying npm install, passing the flag globally EAS CLI. So if you hit enter.
just to make sure that you're using the latest version and you already have EAS CLI. Okay, just to make sure that we have the CLI, we can say EAS version, and I'm using the version that you can see here. Okay, now the next thing that we need to do is log in into our Expo account.
So we can say EAS, log in and hit enter. Now it's telling me that I'm already logged in as Beto at Expo, which is the account that I want to use. But if you are not logged in yet, just go ahead and sign in and if you don't have an account just go ahead and create an account at expo.dev so i'll cancel this process now now we can also check if you already are if you are already signed in by saying eas who am i and hit enter now this is going to tell me my account that i'm using right now with eas and some other information about my account now the next thing that i'll do is say eas init this will initialize a new eas project in my application or in this project that I'm right here. Now you need to run this on the project that you want to initialize, of course. So I'll use my account, my personal Beto at Expo.
And would you like to create a project? Of course, I want to create a project. This is going to create a new project on the Expo dashboard. Okay, now the next thing that I want to do is run the command EAS build configure and hit enter. So this is going to create a file for configuring different flows.
or settings that I want to apply for each build. So I want to configure this for iOS and Android, so I'll just hit all and hit enter. And if I scroll here on the left, you can see that I have now this eas.json file.
If I make this smaller, you're going to find some information about the builds. So we have profiles like, for example, development, preview, and production. This is great for testing in a development.
And then once you're sure that the... Settings are okay. You can then switch to a preview and then share that with the Q&A team. And finally, create a build for production once you know that your application is going to work just fine. Okay, now we are ready to build the application.
So we can trigger a build by saying that I want to build using the profile development. And the profile development is this one right here, which means we want to install the application using the development client. This is going to allow us to see some developer tools on the application. And then we are selecting the platform iOS. Now something very important guys, before I triggered this build is that because I created the iOS and Android folder in my project, EAS is going to think that I have made some changes to these iOS and Android folders, and it's not going to preview the iOS or Android project if we contain these two folders in our project.
So to prevent this and actually allow EIS to build this application, we can simply add those two files to the gitignore. Okay, so we can say iOS and Android. Now we are not tracking these two and EIS is going to use the gitignore. to ignore these files so that we actually build this application.
So keep that in mind. So let's go ahead and close this. You can also use a.eisignore file if you prefer, but by default, EIS is going to use the gitignore.
So once we have ignored these two files, let's go ahead and trigger this build by pressing enter. Now, this is going to ask me if I want to install the Expo Development client. This is... This is good. I do want to install this package because this package is going to allow us to install this on a real device.
So let's say yes. And this is going to install this dependency. And then it's going to start building my application.
Now, it's asking me for my Apple credentials because we want to install this on a real device. I have to sign in into my Apple developer account. And then we need to generate a certificate from Apple. so that they gave us permissions to install this in a real device.
And we also need to register our our devices. So in this case, I'm using my team and my account. And then I'm selecting these two devices that I already have here.
If you don't have a device, you can add it, the CLI is going to ask you. So let's go ahead and hit enter. And this is going to start using my credentials, it's going to push my code to the EIS servers.
And it's going to start the build. in the cloud. We can double check this by going to the Expo dashboard. And in the dashboard, you can see that I have my app, which is a newly created application. So I'll just go ahead and select it.
And if I reload here, you should be able to see that we are building this application. Now we can click here and we can see the status of this application. We can see everything about and even we can see the logs as well.
So you can come here and monitor everything. or you can just go back to the project and wait for the build to be done. Okay, and our application is finally ready.
The you can go to the expo.dev dashboard to see the details about these build, you can see that we were waiting two minutes and the build took around six minutes. And also the logs, like everything, every single detail when we are pre building installing the pods, you can check the Xcode log and everything in here. And finally, once this is done, you can also come to the terminal.
And because we trigger from this terminal using the CLI, we can scan this QR code or we can just copy this link. So I just copy this. And then what I like to do is just go to my Safari and I'll paste this link.
And this is going to take me basically to the same screen that we were right here. And from here in my device, I can just press install. So let's confirm here. And this is going to ask me if I want to install this application on my real device, which is huge. Now, if I go to my home screen, you can see that my app is right there.
So I can just press on it. And by the way, I need to have the development server running. So to start this, we can say MPX Expo start. And because we installed the development client by default, this is going to be using development build now.
Okay. So yeah, we're not using expo go anymore. Now on my device, what I'll do is just first of all, sign in to my account. So let's say login, continue, and I'll use my expo account and then I can close this. And from here I can just, just close this.
I'll just go back to the app and now it's detecting the server, as you can see here and the bundle is working on my real device. How huge is that? Same thing as before, which is huge right now is that we're using the development client.
So if I just come here and make a change. This is going to be reflected on my real device using a development build, which is amazing. Now, if I switch, for example, to light mode, everything is working just great.
Now, having a development build allows us to test authentication, push notifications, and all those things that your app needs. Using EIS build is the fastest way to create a development build, and it does not require using Xcode as you saw or Android Studio installed in your machine, we still have library loading, and we don't have to be building the application each time, unless we install a new native dependency, or we do something that requires changes in the native code. So there we have it, guys. Now, you might be wondering, so when do I have to use ExpoGo versus Development Build?
And the answer is, if you are building a real-world application, you should use a Development Build, even if you are not using any native libraries. A development build provides the look and feel of what users will experience once your app is published. That said, ExpoGo is an excellent starting point for both beginners and more experienced developers transitioning to cross-platform mobile development. You can start your project with ExpoGo and then switch to a development build as needed. That's it.
I hope you liked this video. I hope you learned something new. If you have any questions, please let me know in the comments.
Don't forget to subscribe, give it a like, and I'll see you in the next one. Thanks for watching.