I'm really excited to start building mobile applications with you.

So before we can get started we first need to set up the Expo system on our machines. Now, you should already have the core tools, such as Node and then Yarn already installed on your system. If you don't, simply refer back to the course material in how you can set up a development environment for front-end programming.

So the first thing, with those installation instructions already gone through, the first thing we need to do is set up the Expo system on our machine. Now before we actually do that let me talk a little bit about what Expo is. So Expo is a framework that sits on top of React Native, and it helps us to streamline our entire development process. Everything from creating the project all the way to deploying it to the app stores.

Expo gives us a number of very helpful tools. These are tools such as a much easier integration for push notifications and for compiling the applications down into the code that they need to be structured as. And then to be able to push that to the app store, there's so many things that Expo does for us and so it's a very common pattern for React Native developers to work directly with Expo because it really helps to just streamline the entire process.

So in order to get started with Expo you can come to expo.io/learn, and this is going to walk you through the steps. And we're also going to do it ourselves. So, you can definitely click around the documentation. We're gonna be looking at the documentation throughout this entire course and so you can start by doing that.

Then make sure that you have NodeJS installed, and you should already have that, the third step is to download the command line tool. So, I already have this on my system, and we're going to install it globally. So, you can just copy this code right here, switch over into the terminal or Powershell or whatever you're using and run that command.

npm install expo-cli --global

Now if you do not have Expo already installed on your system this is gonna go out to the npm registry and it's gonna pull that code down. I already have it installed and I have it installed globally so I don't have to worry about that. It's just gonna tell me that it's either gonna upgrade me or it's just gonna tell me that I already have that installed. So that is the command for installing the Expo CLI.

Now while that's running let's look at the commands that you need in order to start your first project.

So the very first thing is we're gonna have a command called expo init. That is going to initialize an Expo project. And you're gonna see that we have a number of templates that we get to pick from, and they can give us some nice starter code, and we can get started with that.

So if this is already run through, and right now it's going through and showing these warnings.

Don't worry, when you see these warnings, you only run into issues if you see a ton of errors. The warnings are just something that are built into the installation process, just to give you a little bit of information on how to do it. Now I'm going to simply fast forward through this part of the installation instructions, and when it's done I'm going to come back and we're going to create our very first Expo project.

Okay, it's all installed and now we can get started. You can see I'm using expo-cli version 3.11.3.

They do upgrade the versions quite a bit, usually about once a month or so, and there may even be a time that you're gonna see that we upgrade it throughout this course.

So now that that is all installed, if you come back here, and if you remember the command is expo init and then my-new-project. Now, the my-new-project, that's just the name of your application, so, we're gonna call this expo init, and we're gonna call ours the memipedia. It'd probably help if I actually spelled it right. Memipedia-app. Just like this, and I'm gonna hit return.

expo init memipedia-app

Now what Expo's gonna do is it's gonna give me a set of templates to choose from, and definitely feel free to experiment with each one of these.

We're gonna be using the TypeScript template in ours. But feel free to check out each one of these. You can use the arrows to move up and down to pick out exactly what you want to work with.

Now we're gonna use a managed workflow, and we're gonna go with a blank TypeScript project.

So I'm gonna select that, hit return, and now it's going to go through, and it's gonna start building this application. It's gonna ask us a few questions, it asks for the name of your app visible on the home screen. So this is when you see your app on the home screen with the little icon, this is how you want that to show up. So for us, I want to call it MemiPedia, just like that. Then you can see it already gave us our slug based on the name that we picked out.

So I'm gonna hit return and it's gonna say that it found Yarn, assuming that you have Yarn installed on your system, and that's what we're gonna use to install dependencies. So just type a Y there to say yes that's what we're gonna use. And now it's going in, it's building the entire application for us.

Now, depending on how fast or slow your internet is and also how fast or slow expo is at the moment, it might take a little while. So once again, I'm gonna fast forward through this part and we'll come back when it's done. Okay, and we are back. If everything ran through smoothly with your installation and the application was created, then you should have some output that looks like this, where it says that the project is ready and to get started it gives you a few instructions.

So we're gonna follow those. So I'll say cd, so I'll change into the memipedia-app, and then from there we can type yarn start. Now there's another command that you can run that's called expo start. I usually run that one. So I can just say expo start, and what this is going to do is it's gonna start building the entire, and it's gonna compile all the JavaScript into the structure it needs in order to run on our phones.

It's also going to open up a special URL. So I'm going to come here, and you'll see for me it runs on local host 19002.

And so it opened up in a different window for me, but this is going to start building the application so that we can run it directly on our phones. Now there are a couple ways that you can see this actually running on your own system.

Now if you have a Mac you can run the iOS simulator. It takes quite a bit of installation that you're gonna have to work with. So you're gonna have to have x code installed and the simulator and so it can take a while to install those. That's what I'm gonna be doing this in this course. And then if you have an Android device or emulator, then you can work with that.

But this is something that's really cool, and it's one of my favorites. It's what I'd recommend for you personally to do, is that you can actually run it right now on your phone, and so I'll show you how to do that. If you come back to the expo.io page, the learn page, right here you can see step five is to preview your project.

So after we ran expo start you can go and download the iOS app if you have an Apple phone, an iPhone, or an Android app if you have an Android phone. So, you can go to those respective app stores, download the Expo Client, and you're going to have to download it and then create a free account.

)

Once you do that what you're gonna be able to do is come back to this page here and if you see this code here, you see this image, what you can do is open up your camera, so just open up your camera on your phone and then hover over that code, and you should see something like this where it says Expo QR Code.

Click on that when it pops up, and then it is going to build that directly on your phone, and you're gonna be able to use it just like a regular mobile application, which I think is pretty awesome. It's something that years ago that would have taken a lot of work and Expo does it for us just automatically.

So you'll also have a couple options here. Depending on the type of network that you're running you can either run on a tunnel or on a LAN connection. I've found that when I'm working from coffee shops or someplace that has some stricter type protocols, that I need to run on the tunnel, and that's gonna create a dedicated URL that I can tunnel directly into, and it'll build the application there.

And if I'm at home and my phone's on the same WiFi as my regular network, then I'm gonna be able to run it just on the LAN and it's a little bit faster. So if you got everything working there you should now have your application installed and running on your phone, which is pretty cool. And in the next guide, we're going to start analyzing and really walking through the file system and seeing exactly what Expo created for us.

Resources

• Source code