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?

2. expo start

Serve It Up

  1. Open terminal in your text editor or project folder.
  2. 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.

  1. 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

expo-start

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.

metrobundler-start

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.

metrobundler-device-view

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.

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 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.

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