Getting Started on Development

Understanding the Front End

  1. Basics. You’ll want a reasonably thorough grounding in Javascript and React. The tutorials in Code Academy are pretty good, though not free.

  2. Pushkin is a Single Page Application (SPA) based on React. For a gentle introduction to this stack, read this tutorial, which also describes incorporating authentication with auth0. Note that this tutorial is slightly out of date in that auth0 now uses auth0-spa-js for SPAs, and create-react-app suggests using function components rather than class components.

  3. To fill in your understanding of React, we recommend the two-part Codecademy.com Learn ReactJS course.

  4. Next, you probably want to learn more about routing using React-Router. We use v5, which is nearly identical to v4. If you read up on React Router, you’ll see a lot of discussion of dynamic routing, though you can probably safely ignore this. One of the better tutorials available is here, though it’s a bit short.

  5. You’ll also want to understand Redux better. Redux is used to keep track of application-level state variables. For Pushkin, a primary usecase is keeping track of subject IDs. The best tutorial we’ve found for React-Redux is the official one. Note that it’s a little out-of-date with regards to use of object spread syntax (which is now supported by Node) and with how to handle asynchronous requests: we’ll be using redux sagas for that, so read up on that as well. A good place to start on why redux sagas are worth using is here.

  6. At this point, we recommend going back through the tutorial in #2 above.

Understanding Docker

There are a number of tutorials on Docker. For ongoing use, this cheatsheet is pretty useful.

Testing Pushkin Modules Locally

For information on running tests with Jest, see Testing Pushkin with Jest

The content on this page may be out of date - stay tuned for edits!

Currently, the most convenient way to test new version of Pushkin modules locally is getting the tarball of the pushkin modules you modified and putting it into the node test project folder.

  1. If you have a node project for test the new version of Pushkin modules (pushkin-api, pushkin-client, pushkin-worker, etc.), create a folder in the project dir named “testPackages”.

  2. Get the tarball of the pushkin modules to be tested, like “pushkin-api-1.2.0.tgz”. Put this tarball into the testPackages folder.

  3. Modify the package.json file in the project dir like this:

"dependencies": {
"pushkin-api": "file:testPackages/pushkin-api-1.2.0.tgz",
... ...
}

That is, modify the path of the Pushkin module to the local test version, so that Yarn will find it locally rather than in the npm repository.

After you yarn add all of the dependencies, you can write the test codes.

Pushkin jsPsych

A slightly-modified version of the core jsPsych script available on NPM under pushkin-jspsych.

Global variables are removed and what would normally have been assigned to window.jsPsych is exported as the default export. It has all the same properties. It should be assigned to the window object by the page using it, like so:

import jsPsych from 'pushkin-jspsych';
window.jsPsych = jsPsych;

This prevents conflicts when multiple pages are using different versions of jsPsych. It also allows plugins to be used without any modification needed to suit this version.