Serve It Up! - eyecuelab/walkertreker GitHub Wiki
1. Before you start
Have you....
- Set Up your Environment?
- Npm Installed?
- Set Your .env FRONT_END_ENDPOINT to the remote enpoint?
- Or, if you have your local api set up, set your .env FRONT_END_ENDPOINT to the local endpoint?
expo start
2. Serve It Up
- Open terminal in your text editor or project folder.
- Run
expo start
--> Expo will generate a QR code for the project in your terminal
--> Expo will automatically open its Metro Bundler, also known as DevTools. If it doesn't automatically open you can press the key d
in your terminal and it should open the dev tools.
--> The information in the terminal and Metro Bundler are virtually the same
Note: when you start your project, Expo may ask you to sign into your Expo account via terminal.
- Load the project on the Expo-Client App: on iOS, open camera and it will recognize the QR code and a notification will appear to open Walkertreker; on Android, open your Expo-Client app and select the option to scan for a QR code.
Terminal View
Take note of the options Expo makes available to you
Metro Bundler View
- Blue Box: This area logs the same information that your terminal logs. It tells you that the tunnel created to host on Expo is available, it shows you progress on the Javascript bundling.
- Yellow Box: This gives you connection options for the QR code. Try to use LAN, if you can. Learn more about that here. This is also where you would select to load project on an emulator/simulator.
- Pink Box: When Expo finishes building the JavaScript bundle, your device appears in the left hand column.
Metro Bundler Device View
- Yellow Box: This is the output of the device you have loaded the project onto. It shows the same information that is output in the Walkertreker project terminal.
- Red Box: These are console.logs written in the project code.
- Pink Box: What a warning looks like: written in yellow and doesn't break the project. Errors are written in red and break the project.
Booting Up: Loading to Home Page Success
This is what your project should look like as it is loading up. Arriving to the New Player Sign Up page means you've successfully booted the project.
--->--->
These are the typical console.logs at start-up:
3. Common Errors/Warnings & What To Do
Above all else:
There are many errors that happen because of connection time-outs when you the app is loading. This is not because your project is broken! This could happen when:
- building the initial JavaScript bundle, or when you close your connection
- starting/shutting down the debugger
- starting/shutting down the toggle inspector
If you see any of the following screens:
--> Hit Reload JS or Hit Try Again!!!
--> Do it multiple times!!!
Fixing Mystery Bugs:
If there are errors with imports, or something is not loading or something that's missing, this is:
- either due to actual errors in the code base (and you should hunt down that bug!)
- or possibly some error in your in your package-lock or node_modules.
npm install
. The package-lock contains all the versions of your dependencies' sub-dependencies, so re-installing can refresh the project in a positive way. There's also opportunity for a fresh install to break your project's inter-dependencies.
It's typically a good idea to delete node_modules and try rebuilding the bundle. If that doesn't work, try also deleting package-lock.json and running Regardless, it's always a good measure to delete + reinstall node_modules and/or package-lock.json.
4. Expo-Client Dev Menu
Shake it, shake it, shake it, shake it, shake it, shake it, shake it, shake it, shake it, shake it like a Polaroid picture!
When you are inside walkertreker on your phone, you can access the development mode menu by... you guessed it, shaking your phone! Not quite like a polaroid in Andre 3000's "Hey Ya", but pretty close! Sometimes it takes a second, but it does show up.
See the photos below for all the options:
- Reload JS Bundle: when you need a refresh
- Show Perf Monitor: not sure what this does
- Disable Live Reload: stops a reload every time you save in the project
- Debug Remote JS: toggles either Expo's remote debugger, or React-Native-Debugger if you've installed and configured it. Checkout out the section on debugging for more information
- Toggle Element Inspector: a very cool tool that makes remote debugging even more powerful by allowing you to target elements on the screen and learn about their properties
First photo: the dev menu
Second & Third photos: view of Toggle Element Inspector on, showing its menu options:
- Inspect: Select an element on the screen to learn about it.
- Perf: This turns on interactions with the screen. As in, you're button touch won't select it as an element, but click it as the button it is.
- Network: List of network activity.
- Touchables: Shows areas of screen that respond to touch. Note: You can have multiple menu options selected at once.
5. Next Steps
-
Learn about creating a player here
-
Learn about helpful tips to work with local state (Redux + Sagas), such as loading a specific game or clearing local state, by checking out Managing Local state
-
Learn about working with ESLint & PropTypes by navigating to ESLint, Husky & PropTypes
-
For more info on errors and warnings, see Something Not Working? Common Errors
-
Set up the coolest debugger out there: React-Native-Debugger