Setting up Your Dev Environment - eyecuelab/walkertreker GitHub Wiki

1. Get access to EyeCue Lab tools

Ask EyeCue Lab for:

access to the Heroku Hosting (you create an account and they add you as a user)
access to the Postman Group for querrying the API (you create an account and they add you as a user)
access to the Github repos @ eyecuelab/walkertreker and @ eyecuelab/walkertrekker-api you create an account and they add you as a user)
the ENV files: this will be a folder containing the environment files for walkertreker and walkertrekker-api, sent to your email. Walkertreker will have .env, app.json, android keystore, google-service.json files. Walkertrekker-api will only have a .env file.

2. Get Expo Set Up

Expo is "an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React." Essentially it bootstraps React Native apps, making development easier by providing a framework for typical needs. Check out the docs for more information.

Things you should know

We use Expo SDK 35 - when perusing the docs, make sure you are looking at the docs for SDK 35
We use a managed workflow - this enables us to make use of the many built-intools that Expo offers.
The docs are your friend! If you see an import from expo in the project that you need to know about, search for it in the docs! If you're not sure how to implement something, search for a snack (a code snippet) about it. Still need help? Reach out in the forums.

Our cheat-sheet to get your Expo environment up and running

This is based off of Expo's tools documentation. Here's our overview:

If you don't already have it, install Node.js (You'll need this for the back-end as well)
Get the relevant Expo tools:

Download expo-cli npm install expo-cli --global This will enable you to run commands like expo start, which serves the project on Expo so that you can run it on your phone or emulation.
On your phone, navigate to the Play Store (Android) or the App Store (iOS) and download Expo-client. Expo-client is what runs the app on your phone during development. When you serve your project with Expo CLI, it generates a development URL that you can open in Expo client to preview your app.

Don't have a phone for development?

Use an emulator/simulator! There's a variety of tools out there for emulating iphones and androids. We have some suggestions and tips, but no step-by-step guides.

Things to know

Developing on an emulator is much slower than on a physical device.
Testing the following functions is limited or impossible: background fetch, push notifications and others. Keep in mind what you are working on before working with an emulator.
Setting up an emulator is not entirely straightforward - find a good guide online that can take you through the process.
Youe emulator will need to be connected with Expo-client in some way, shape or form!

Tools to checkout

GenyMotion is a light-weight emulating tool that was suggested to us by a few EyeCue Lab devs.
Android Studio is the classic IDE for Android and has options for emulating. This a large program with a lot of extras. Make sure to configure to work with Expo.
XCode is the classic IDE for iOS and has options for emulating. Again, Make sure to configure to work with Expo.
Check out the expo docs!

Good luck!

3. Connect to the api: remote or local

A quick overview: the 'remote' api is hosted on Heroku, and is the published version of the Github repo @ eyecuelab/walkertrekker-api and it's corresponsing PostgreSQL database. The 'local' api will be one that you set up and run off of a local copy of the 'walkertrekker-api' repo and a copy of the PostgreSQL database. As you will learn, the FRONT_END_ENPOINT in the .env file of walkertreker is what points to either the remote api, or a local api.

Go to the walkertrekker-api wiki to learn how to set up a local database and api

First Thing's First:

Pre-requisite: You need the ENV files for walkertreker and walkertrekker-api. After that, go ahead and

Clone down Walkertreker and Walkertrekker-api.
Make a new branch off of master, npm install.
Drop in the relevant .env files to the respective projects

Discussion on the environment files

These hold sensitive data regarding the various accounts that walkertreker uses to work. That's why you had to ask someone at EyeCue Lab for them, why they are always in every project's .gitignore list, and not available on the remote Github repos. The important file for connecting to the api is the .env file.

For Walkertreker, the .env should have the following fields:

CLIENT_APP_KEY
DATABASE_URL
TWILIO_ACCOUNT_SID
TWILIO_AUTH_TOKEN
TWILIO_NUMBER
CLOUDINARY_URL
FRONT_END_ENDPOINT

To connect to the remote or a local api, you will be changing the value of FRONT_END_ENDPOINT

FRONT_END_ENDPOINT is used in walkertreker/src/sagas.js and in walkertreker/src/socket.js, but it's value is set in the .env file. It is worth noting that those two files are the only ones that communicate with the database (look for the api routes!), and therefore need the endpoint. See the commented out code src/socket.js for a list of example end points. Two things to remember:

1. The remote endpoint is always "https://walkertrekker.herokuapp.com". When you use the remote endpoint, it is connecting to Heroku and you do not need to run your local copy of the api and database.

2. When you set up a connection to your local api, the endpoint will be "http://<your-ip-address>:5000", and you will need to run your local copy of the api and database.

For example, Stuart has two local endpoints he uses: when he is at EyeCue Lab, he uses "http://10.1.10.17:5000", and when he works from home he uses "http://192.168.0.46:5000". The port is always 5000. This is because the server set up in walkertrekker-api, located at walkertrekker-api/server.js, listens on port 5000.

--->Check out the walkertrekker-api wiki to learn about running the api and database locally <---

4. App.json vs fake-app.json vs package.json

App.json

This is where the Expo options are configured. If you change it, you will need to manually share the contents of app.json with your work partner, as it is not pushed to remote with everything else. See the Expo docs on App.json.

fake-app.json

This originated from Joe and Josh, apparently a necessary thing for some aspect of the project. You could follow-up with Joe about this. It has zero effect on the project, and can be ignored.

package.json

You know what this is! General project configurations and where your dependencies are listed.

5. `expo install` vs `npm install`

I'm assuming you are familiar with npm install. expo install is the same as npm, but specific to Expo dependencies. You can use expo install to install other non-expo packages. When you do this, Expo knows what version to install based on your SDK, something that npm install does not do. Two examples:

When upgrading to a more recent SDK, after running expo start some of the first terminal outputs were about how some Expo dependency versions were not correct and to run the command expo install <package-name> and that it will automatically know what version to install
There was a case to fix a bug with UI manager which involved npm uninstalling react-native-gesture-handler and runningexpo install react-native-gesture-handler. See this part of the wiki to learn more about that bug.