Skip to content

Setting up a developer environment

Zachary Berry edited this page Aug 20, 2021 · 14 revisions

Getting Started

Obojobo uses javascript on both the client and server. The upside is this streamlines things a little (same testing framework, same language, same tooling for frontend and backend).

The UCF team behind Obojobo exclusively develops on MacOS, so we can only suggest doing the same yourself. It is possible to use other platforms, but we haven't smoothed out any of the bumps. Though, we welcome any PR's that address issues developing on other platforms.

You're going to need Node and Yarn. We highly suggest using nvm to manage node versions, as we keep supported node versions pretty narrow, and update to newer versions regularly. You may find yourself having to switch node versions between branches.

Suggested Setup Steps

  1. Install nvm using homebrew (highly suggest not installing node or yarn directly via homebrew) (UCF Developers, make sure you add nvm to your shell profile, see note below)
  2. Install the version of node used by obojobo (check engines directive in package.json)
  3. Install yarn using npm npm install -g yarn
  4. Install Docker for Mac (to run a PostgreSQL container in step 7)
  5. Fork obojobo on github and clone to your machine using git
  6. Run yarn install (or just yarn) to install all the dependencies
  7. Run yarn db:rebuild to create your PostgreSQL container and run db migrations
  8. Run yarn dev to start a development server! (watch console output for the address to open in your browser)
  9. Visit https://<yourlocalhost>:<port>/dev to find the developer dashboard

Tips

  • Always remember to run yarn install when switching branches or merging in upstream changes
  • If jest starts to report a TON of errors that look like it all of a sudden doesn't understand import, delete node_modules and run yarn install. If it persists, try to Stash your changes and clean up untracked files with git clean -dxn (remove n to actually delete). If it still persists, delete all contents of the packages directory and use git reset or git checkout to get them back.
  • You may wish to look into some self-signed localhost cert warning workarounds

Add NVM to your shell

  • When installing NVM you'll need to add NVM paths to your bash_profile (or zsh profile). Here's an example for UCF developers:
#nvm
export NVM_DIR="$HOME/.nvm"
  [ -s "/Users/<Your NID>/brew/opt/nvm/nvm.sh" ] && . "/Users/<Your NID>/brew/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/Users/<Your NID>/brew/opt/nvm/etc/bash_completion" ] && . "/Users/<Your NID>/brew/opt/nvm/etc/bash_completion"  # This loads nvm bash_completion

Lay of the Land

The Repository and Packages

Obojobo is a mono-repo. This means many npm packages are contained within this one git repository. Those are all managed using yarn workspaces. They live in the packages directory, under three main groups. The main applications, the modular content types (obonodes), and common or utility libraries.

Technologies

React is used everywhere. The visual editor is built using Slate.js. The code editor is Codemirror. The viewer uses Backbone (though our use is limited and phasing out). The base server uses Express and EJS. The library (dashboard, module pages, etc) are an express module that uses a hybrid technique of client and Server Side React and Redux.

Users and Permissions

Authentication is entirely handled via LTI. There is no way to log in directly (though our dev dashboard simulates LTI launches for convenience). This means the LMS is responsible for your users and permissions. Permissions are assigned at LTI launch events, which means the user's role in the course is their role in Obojobo. That does mean that your role can fluctuate if you launch from a course where you're an instructor then from one where you're a student.