(adapted from https://docs.expo.dev/get-started/installation/) If you regularly do JavaScript development, you likely have many of these installed already!
- Node.js LTS release (version 14 or higher)
- Yarn Classic (1.22.x)
- Git. The Github Desktop app installs this for you- that's what I use.
- MacOS users only: Watchman
- Highly recommended: Visual Studio Code. Any text editor will do, but my examples will be in VS Code.
- Install the Expo CLI (
npm install --global expo-cli) - Install Firebase CLI (
npm install --global firebase-tools)
- Create an Expo Account. Follow the link and click "Sign Up".
- Download the "Expo Go" app on your phone from the App Store or Play Store. Sign into the app using the Expo account you just created.
- Go to the Firebase Console, click "Create a Project" or "Add Project", give it a name like "[myname]-fern-chat-2022" and accept all the default options. A google account is required for this step.
It's a good idea to restore dependencies in case the network goes wonky during the session! Fork AND clone the repo if you'd like to push anything you do to Github. Just cloning it is fine, too, if you just want to keep everything local.
- Click "Fork" at the top of this page to fork the repo.
- Clone your fork (easy way: click the green "Code" button, then "Open in Github Desktop").
- CD to the
fern-chat-2022folder and runyarn.
- I tested this setup in Powershell and it was fine. I did have to change the execution policy first, using these instructions: https://tecadmin.net/powershell-running-scripts-is-disabled-system
- I've also worked with Expo in WSL. I followed these instructions previously to get it working with the terminal inside Visual Studio code: https://code.visualstudio.com/docs/remote/wsl
- You may have to modify the Windows firewall to get the app running on your phone in the Expo Go app. If you keep getting connection timed out errors, you can try running
WF.mscand then adding an inbound rule for port 19000.
- It's been a while, but I have successfully setup most of this dev environment on a Chromebook. If you really want to try, you can follow my tips here: https://medium.com/@keith.kurak/develop-mobile-apps-on-a-chromebook-really-edd942ecd122
- I will very likely not have time to re-attempt a Chromebook setup to make sure this all still works, so YMMV!
We will walk through this during the pre-compiler, but you can also try it ahead of time to be sure that everything is installed correctly. (adapted from https://docs.expo.dev/get-started/create-a-new-app/ - see for troubleshooting tips)
- Run
expo init test-expo-appin the terminal. Choose the "blank" template. - Run
expo loginand enter your Expo account credentials. - Run
expo start. - A webpage with a QR code will appear. On iOS, scan the code with the Camera app. On Android, scan the code with the Expo Go app.
- If all goes well, the app will appear on your phone! If you have connection issues, verify your computer and phone are on the same network, or choose the "tunnel" option on the Expo web page that opened in the last step.
- Click "Run in web browser" on the QR code web page (or press 'w' in the CLI). After a while, the app should appear in your browser, as well!
- Run
yarnto restore dependencies - Run
expo loginto login to your Expo account (only required for testing on an iOS device) - Run
yarn startto start the bundler - Scan the QR code with your device to run in the Expo Go app (must be logged into Expo Go on iOS) AND/ OR
- Press
wto start webpack and run the web version.
Open these slides to follow along with the coding exercises. This has just the "TODO" slides with links to the starting branch and Gist guide.