Skip to content

RightOn Onboarding Guide

Jump to bottom
Josephina Im edited this page Apr 18, 2022 · 22 revisions

image

RightOn Environment Setup

Table of Contents

  1. Setting Up Local Environment

  2. Cloning RightOn Projects on Github

  3. Running the RightOn Website Locally

  4. Pushing RightOn Website Changes Into Production

  5. Running the RightOn Web App Locally

  6. Setting up the React Native Environment for Mobile Apps

  7. Running the RightOn Mobile App Locally

  • Setting Up Local Environment

    1. Review this Intro to React as needed and follow "Setup Option 2"

    2. Make sure you have a recent version of Node.js installed

    3. Once installed, run this command on your local machine

      npm install create-react-app -g

    4. You've installed React JS globally on your machine!

    5. To test the React environment, execute

      npm start

  • Cloning RightOn Projects on Github

    1. Navigate to a pre-existing directory or create a new one where you'd like to clone the project.

    2. Use your Github account to find RightOn's repository for the project you're looking for.

    3. Copy the HTTP/SSH key by clicking "Code" on the project repository. image

    4. In the preferred directory on your machine, execute the following command:

      git clone "https/ssh key"

      Note that "https/ssh key" is a placeholder for the actual github key of the RightOn project.

    5. You've now cloned RightOn's project from Github to your computer! Repeat steps to clone another project.

  • Running the RightOn Website Locally

    1. If the React environment setup was successful, simply start the project with the following command:

      npm start

  • Pushing RightOn Website Changes Into Production

    1. Before pushing into production, make sure the main branch and dev branch are in sync and updated. Make a Github pull request to merge your changes (local branch) to the dev branch and main branch respectively.

    2. Navigate to the main branch.

    3. Run the main branch build script for the website with the following command:

      npm run build

      This should create a temporary /build directory in your local project.

    4. Navigate to your file manager where the website project is located on your computer.

    5. Visit the RightOn AWS website and log in with your account. Navigate to the AWS S3 Bucket Service. image

    6. Search for the "www.rightoneducation.com" bucket image

    7. Open it and click "Upload". Drag the contents inside the build folder into the upload section. (Make sure to upload the contents of the build folder, not the build folder itself.) image image

    8. Confirm your upload by doing a hard refresh of the live website

    9. You've updated the live website!

  • Running the RightOn Web App Locally

    1. In order to run the web app locally, ask your dev team lead for the AWS export file and add it to your src directory. The AWS exports file will give you access to our AWS API. Without this file, you might encounter the following error:

    image

    1. Keeping the file outside our public repo provides an added layer of security. For further details, check in with any dev lead.
    2. Navigate to the web/src directory and add the provided AWS exports file. Your directory should now look like this.

    image

    1. You can now run the RightOn web app!

  • Setting up the React Native Environment for Mobile Apps

    1. Expo CLI

      1. Expo CLI is a quick and easy environment for beginner app developers to start learning React Native.
      2. This is the first mobile app environment you can set up for React Native.
      3. Follow Official React Native Setup to check along.
      4. Install the Expo App on your mobile device.
      5. You can now start your project on your computer and use your mobile device to launch the app on your computer.

    2. React Native CLI

      1. This is the second mobile app environment you can set up for React Native. This is also the required environment to develop RightOn’s mobile app.
      2. Follow Official React Native Setup for your Development OS (Windows, Linux, Mac) and Mobile OS (Android, IOS).
      3. In the Android Studio, for the emulator to connect properly, make sure your environmental variables use the correct paths. This can be referenced with any Android Studio setup documentation or YouTube videos.
      4. You can now start your project using React Native CLI!

  • Running the RightOn Mobile App Locally

    1. As with the web app, you'll need to request the AWS exports file from one of the dev leads. For mobile app development, add it to your mobile app src directory. Both AWS exports files from the web-app and mobile app are different.

    2. Navigate to the src directory of the mobile app and add the aws-exports file. Your directory should look like this.

      image

    3. If you are receiving errors about missing specific dependencies run the React Native Doctor command (After launching the Metro Bundler in your environment) and it should automatically fix such errors.

    4. If problems still persist, check with a dev lead.

Clone this wiki locally