Yale Butteries (Frontend)

Yale Butteries is a React Native + Express.js app for ordering in advance from the Yale residential college butteries.

Setting up the Development Environment

To run the full app, you will also need access to the backend repository, but you can still do plenty without it

Install the latest version of Node.js and then Yarn. Additionally, download XCode if you're using a mac, and Android Studio otherwise (you can also use Android Studio on a Mac, but with the M1 chips it's a little tricky).

In the root of frontend, run yarn to install all of the dependencies. Whenever someone adds a new package you'll need to run this command again (it'll be quicker the next time)

Now run yarn start to run the app with expo

• To run in production mode, run yarn start --no-dev

• Run on iPhone simulator (Apple computer only):

  • Download XCode
  • Open the Simulator app
  • press i from the yarn start terminal

• Run on Android simulator (difficult with ARM archicecture):

  • Download Android Studio
  • Open Android Studio, click on the three dots at the top right, and click on virtual device manager
  • Choose a device, or if this is your first time, set up a device. It doesn't matter much what the device is, just make one that works for your machine press a from the yarn start terminal
  • If you have an ARM architecture (such as Macs with M1 chips), you will need to set up an emulator in addition

• Run it on your physical phone:

  • Download the Expo app
  • Scan the QR code generated by the yarn start terminal
  • Now you should have the app on your phone, but when you try to connect to the backend it won't work. Here's how to fix that:
    • Get your IP address with ipconfig getifaddr en0 and copy the result
    • in utils/constants.ts, replace localhost with that ip address
    • In the backend, in src/controllers/Auth.ts, replace localhost with that address
    • Please do not commit these changes, as they will mess up everyone else!

With the frontend running, you'll be able to see the app and interact with it, but any backend functionality won't work, meaning you won't even be able to login with CAS. Look at the backend repository to set up the rest

Building and Deploying the App

• Likeliness of errors: Expo Go development simulator < Expo Go development on phone < Expo Go production simulator < Expo Go production on phone < simulator build < simulator build on phone < testflight build on phone < App Store app

iOS

We use Expo to turn the frontend code into a compiled binary, which we can then submit to app stores. To start, you'll need to have eas-cli installed, and will need to login to the yale_butteries Expo organization. Follow this guide

• There are a few ways to build the app, but the most important distinction is between a simulator build, a development build, and a Testflight build

  • A simulator build takes ~10 minutes and will run on either your iPhone simulator or on Expo within your phone. Any bug that appears here will probably appear in a testflight build, but things tend to work better for these
    • Make a simulator build using Expo with eas build -p ios --profile preview
    • With the new build finished, run eas build:run -p ios --latest to start it on your iPhone simulator
  • A development build takes ~10 minutes to build and runs on your phone. It can be updated dynamically once built
    • Make the development build with eas build -p ios --profile development
    • Install the app on your phone (make sure to delete any existing version of Yale Butteries) by scanning the big QR code with your camera
    • Run yarn dev, and then open the app on your phone
  • A Testflight build takes ~10 minutes to build, and ~5 minutes to submit to the Apple developer account. It should be identical to what the real app will look like, though because of this there will likely be more errors than in the simulator build
    • A Testflight build requires access to the Apple developer account, which is currently owned by Addison Goolsbee
    • First, increment version in app.json. If you forget, then after 15 minutes you'll be thrown an error and have to rebuild
    • Make a real build with eas build -p ios
    • Submit the build to the app store. Run eas submit -p ios (takes about 24 hours to approve updates)

Version Control

• For Git usage, please follow this guide: https://nvie.com/posts/a-successful-git-branching-model/

Various Other Notes