Plantly Project Setup

[00:00:00]
>> Kadi Kraman: In this course, we will be building our native app on the local machine. So for this, you need to set up your local native build environment. So you need specific special tools to build the native app locally. For iOS, you need X code. X code is an app that's available on the Mac App Store.

[00:00:24]
>> Kadi Kraman: And if you don't have this downloaded and you want to build your iOS app, this is only available on macOS, then I recommend you start your download now because as you can see, it is a 3.5 gigabyte download, which is wild. And after you've downloaded it, I would also open X code, just using command space and type in X code.

[00:00:44]
And the first time you open it, it should also prompt you to install your simulators, which is another couple of gigabytes. In order to build Android apps, you need Android Studio. So this is available for Mac windows, and Linux, and it is a smaller download, but still worth starting early.

[00:01:03]
The best instructions for how to set up your Native Build environment are on the official React Native documentation. So if you go to reactnative.dev and set up your environment, it has instructions on how to set up based on your development operating system and T target of what you want to build.

[00:01:22]
In this case, you will probably have a node installed already but it will tell you all the other things you need to install so in case of Android, you need to install Java. You need to set your environment variables for Java, home is the lander studio, etc. So, I'm hoping to do a step by step instruction on how to set up your build environment because it will differ based on whether you're on Windows or Linux or Mac OS.

[00:01:46]
And whether you're doing iOS and Android and it will just take a really long time. So I recommend you download X code and or Android Studio and then follow these instructions on the official React Native documentation. We are in fact going to start this workshop with Expo Go, so if you look at our topics, we're going to do a development build here.

[00:02:07]
So at this point, hopefully you have your development environment set up. Let's start by creating a brand new project. You will need to have node installed for this so if you do node-V, then we're looking for a long-term support version, so in case of nodes, the even-numbered versions are long-term support.

[00:02:28]
So 18 is getting a bit old now, but 20, 22 in the future, 24, etc. I'm going to be using node 20. And secondly, regarding package managers, all modern package managers are supported, so you can use npm, yarn-classic, yarn-modern, pmpm, bun, etc. I'm going to be using yarn-classic, but you can use any of these.

[00:02:51]
But you can check the documentation if you're using especially yarn-modern or pmpm or bun to see if there's any caveats around the installation. So Yarn Classic is a little bit old now, it's still popular among React Native developers and that's actually because this plug and play model that Yarn 2 and PMPM use was actually incompatible.

[00:03:15]
Well it is incompatible with how React Native native modules are required. So in our iOS and android directories, we tend to import specific files, from our node modules, but the PMPM node linking model actually gets rid of our node modules builder. So this will break there is a workaround now.

[00:03:32]
So if you have this config file by setting the node link at the node modules, and it's the same for PMPM, using node linker hoisted, then you can still use these package managers, but just FYI, that's why I'm using Yarn 1, Yarn Classic. So the command to create a new X-Wire app is npx create X-Wire app.

[00:03:54]
>> Kadi Kraman: And to do-- help, it will print out the usage information for this command. And mpx is a node package executor. You get mpx when you install nodes, so it's part of node, and it lets you execute node packages without installing them on your local machine. So here, by default, if you just create X web, it will use a default template, which has a bunch of code already set up.

[00:04:20]
So it will have navigation set up, it will have dark and light mode, it has a bunch of components. And it's just meant to give you a head start so you have some code to start with and you get an idea of where you can build. You could reset this template, but in this case, let's just start with a blank typescript template.

[00:04:39]
And the other thing here It gives you commands here on how to create this project on various package managers and in our doc site are provided commands for Yarn, npm, pmpm. And bun to create an app called plantly and trigger the default template. So I'm going to be using yarn and this should trigger this choose a template prompt and I'm going to choose a blank TypeScript template.

[00:05:06]
Now you might be wondering whether you have to use TypeScript and honestly, I'd very, very much recommend it. Most modern software projects these days use TypeScript and it's very much become an industry standard for JavaScript project. So it is good for your career usually it's a learn TypeScript if you haven't yet.

[00:05:23]
But if you really don't want to, you can choose a blank TypeScript template instead. I'll be using TypeScript throughout this course, but because TypeScript is additive, you could remove the typing information and write in JavaScript. Now, this is some quick setup that I always do whenever I start a new project, which is set up linting.

[00:05:42]
So ESLint and Prettier go hand-in-hand. ESLint is a code linter and Prettier is a code formatter. So ESLint tells you if you're doing something incorrect and Prettier just formats your code so you can focus on writing your code rather than worrying about where your braces should go. From sdk50, there is a CLI command that sets up ESLint for you.

[00:06:06]
So if we cd into our newly created directory and npx expo lint. And because I don't have ESLint set up, It will prompt me if I want to install ESL and configure it on this project. Let's choose yes.
>> Kadi Kraman: Now when I open this project, you see that it's created this ESLint RC for us.

[00:06:48]
I also want to set up prettier and for this we need to install some libraries. So if you're using yarn, you want to use this otherwise use NPX, explore, install.
>> Kadi Kraman: And we want to update our ESLint RC to include the Prettier plugin and some rules.
>> Kadi Kraman: Lovely and the good thing about Prettier is that you get that all the pretty arrows are all fixable, yeah.

[00:07:24]
So now that I've added this, I'm expecting to see some prettier errors here. And that's because Prettier defaults to double quotes. The good thing is that we can run MPX.
>> Kadi Kraman: We can run your lint command with-- fix and it will automatically update these. So you'll then command was added automatically to your scripts.

[00:07:49]
So it would just be ESLint so it will be mpm run lint or yarn lint or etc. To now run your project you want to start the bundler. So as I mentioned earlier, we're going to be using the Expo Go Standbox initially. So we want to run the start command to start the metro bundler on here.

[00:08:08]
So let's do yarn start or you can do mpx expo start.
>> Kadi Kraman: This will print out a QR code that you can scan in with Expo Go. I'm gonna plug in my phone to show you. Okay, I'm gonna uninstall Expo go so we're starting from scratch just in case.

[00:08:32]
So on iOS you will go to the App Store, search for Expo Go.
>> Kadi Kraman: You want to install the app.
>> Kadi Kraman: And we'll open it.
>> Kadi Kraman: So on iOS, you can scan their QR code in app and actually originally Expo Go had this functionality, but Apple wasn't happy about it.

[00:08:57]
So now the way that you open your app in Expo Go on iOS is you open your camera app and then scan it. And then this will deep link into Expo Go. Now, if you've just installed it, this won't work the first time, so I found that I need to start quizzing the app and then you will prompt me if I want to connect to devices on my local network.

[00:09:22]
So I'll do allow and just do camera again.
>> Kadi Kraman: Okay, so now this is my app from my local dev server running on Expo Go. You need to make sure that your phone is connected to the same Wi-Fi network as your computer and that's because this bundling process is running on local host so you need to be on the same network.

[00:09:49]
If for some reason that isn't possible or it isn't working then you can actually get around it by using tunnel. You can do mpx expo start --tunnel. The first time you run this, it will prompt you to install an Ngrok package. But then what this does is that it exposes this JavaScript bundle to a web API.

[00:10:11]
So you could scan it and run it without being on the same network. And this is actually a really cool because it allows you, you could conceivably, if you're working with someone, let's say in Australia and you're in the US, you could run a local dev server. You can give them the link and they could run it on their phone, which is pretty cool.

[00:10:33]
Let me just show you this on Android as well.
>> Kadi Kraman: There you go on my android phone, let me just delete.
>> Kadi Kraman: I still X forego, so we're starting from the same point. So we're gonna go to the playstore.
>> Kadi Kraman: And search for Expo Go and install it.

[00:11:10]
>> Kadi Kraman: And we open it. And you notice that on your Android phone, you do have an option to scan the QR code in app because Android doesn't have the same restriction than as iOS. So we'll go scan the QR code, allow the permissions, and then we can scan this, and it will open our local app on our Android phone.

[00:11:35]
>> Kadi Kraman: Again If this isn't working, make sure that you're on the same network as your computer, and if it still isn't working, then try the -- tunnel option. So it is actually quite especially common on windows, we've found, because windows has a firewall, so the dev server doesn't always get around the firewall.

[00:11:52]
So you can change the firewall to allow that port, but as a quick workaround you can use -- tunnel. You can not use it, that will be preferred though because it will be a bit faster on Logo host. And lastly, I'm going to be, it will be handy for me to run this on a simulator.

[00:12:10]
So I'm actually going to run this locally instead of on a phone, so it'll be easier to screen share.
>> Kadi Kraman: There we go.
>> Kadi Kraman: So this was our starting point.