Installation

Installation

This guide walks you through setting up your development environment for the jsPsych template.

Setup

• Visual Studio Code (or other IDE)
• Git
• Node.js
• Yarn
• Firebase
• Firestore
• Prolific

This template is designed to work with minimal upfront setup. At a minimum, you should have an IDE (VS Code is recommended), Node.js, and Yarn.

Prerequisites

Node.js

It is common practice to install Node.js with a version manager. I use fnm. You could also consider

• fnm
• nvm
• n
• Volta
• homebrew (unlike the others, this is not a version manager, it will install a single system-wide node)

Yarn

Yarn is a package manager. To install it, you can follow the official install guide, or just use the commands given in the Installing Dependencies section below.

Fork the template

1. Fork the template repository:

   • Go to jspsych-template
   • Click Use this template
   • Select Create a new repository

2. Clone your fork:

git clone --branch main https://github.com/YOUR-USERNAME/YOUR-REPO.git your-project-name
cd your-project-name

(replacing YOUR-USERNAME and YOUR-REPO).

Installing Dependencies

# Enable corepack
corepack enable

# Set yarn version
yarn set version stable

# Install dependencies
yarn install

If corepack enable fails, running npm install -g corepack might be necessary.

IDE Configuration

VS Code Setup

1. Open the workspace:

• File > Open Workspace from File...
• Select VSCodeProject.code-workspace

2. Install the required extensions

• When you open VSCodeProject.code-workspace for the first time, VS Code will prompt you to install the recommended extensions. If you allow this, it will install this list from the code-workspace file:

"extensions": {
  "recommendations": [
    "dbaeumer.vscode-eslint", 
    "esbenp.prettier-vscode", 
    "bradlc.vscode-tailwindcss", 
    "arcanis.vscode-zipfs", 
    "yoavbls.pretty-ts-errors", 
    "streetsidesoftware.code-spell-checker"
  ]
}

If these are not installed automatically, you can install them manually by search for each id (e.g. dbaeumer.vscode-eslint).

Verifying Installation

1. Start the development server (from within the project directory):

yarn dev

2. Open your browser and navigate to the URL shown in the terminal (usually http://localhost:5173)

3. You should see the template homepage

Next Steps

• Continue to Firebase Setup to configure your backend
• Check out the Development Workflow to start building your experiment