CRA Template For Firebase

A template to set up a website with an AutoRA experiment via Firebase.

This template can be installed via NPM:

npx create-react-app my-autora-experiment --template autora-firebase

Quickstart Guide

Installation

To make sure that node is installed on your system, run the following command.

node -v

If you don't see a version number or the version number is below 16.0, install or update node following the instruction on the node.js website.

When node is available on your system, you can use create-react-app by running the following command.

npx create-react-app path/to/react/pp --template autora-firebase

If you want to use cookiecutter, run the following command and follow the instructions.

cookiecutter https://github.com/AutoResearch/autora-user-cookiecutter

This creates your project folder. Before writing code for your website, you also need to set up a Firebase project.

Firebase Project Setup

Initialize Firebase Account And Project

• Create and log in to a Firebase account on the Firebase website.
• Create a Firebase project by clicking add project and enter a project name.
• You can choose to disable google analytics in the next page if you are not planning on using it for your project.

Copy Web App Credentials

• Navigate to the Firebase console and select the project
• To create a new web app, click on Add App or the <> symbol and follow the prompts
• Enter a name for the Firebase app (could be the same as the project name)
• Check Also set up Firebase Hosting for this app
• Click Register App. This auto-generates a script with several values that you need to copy for the next step.
• Copy the auto-generated values from the Firebase console to the corresponding variables in the .env file in the project folder that was created on your system using create-react-app or cookiecutter

REACT_APP_apiKey=
REACT_APP_authDomain=
REACT_APP_projectId=
REACT_APP_storageBucket=
REACT_APP_messagingSenderId=
REACT_APP_appId=
REACT_APP_devNoDb="True"
REACT_APP_useProlificId="False"
REACT_APP_completionCode="complete"

• Click on Next
• You will not need to run the command that is displayed after first clicking Next, so click Next again
• Click Continue to console

Firestore Setup

AutoRA includes cloud storage for task data using Firestore. Follow these steps to initialize Firestore:

• Navigate to the current project in the developer console and select Firestore Database from the sidebar under Build.
• Click Create Database
• Select production mode and click Next
• Choose the current location and click Enable

Configure Your Project For Firebase

In the project folder, enter the following commands in your terminal: First log in to your Firebase account using

firebase login

Then initialize the Firebase project in this folder by running:

firebase init

An interactive initialization process will now run in your command line. For the first question, select these options:

• Firestore: Configure security rules and indexes files for Firestore
• Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
• For a Firebase project, use the one you created earlier
• Use the default options for the Firestore rules and the Firestore indexes.
• !!! IMPORTANT !!! Use the build directory instead of the public directory here.
• When asked for the directory, write build and press Enter.
• Configure as a single-page app; don't set up automatic builds and deploys with GitHub.
• Don't overwrite the index.html file if the question pops up.

Write Code For Your Experiment

To write code for your experiment, use the main.js file in the src/design folder. For example, you can use jsPsych and install packages using npm. The main function should return an observation (the data created by a participant).

You can test the experiment locally using

npm start

During development, the Firestore database will not be used. If you want to load conditions from the database, you need to upload them first (for example using the AutoRA Firebase Experimentation Manager) and set REACT_APP_devNoDb="False" in the .env file.

Using Prolific Id's

If you want to recruit participants via Prolific, we highly recommend setting REACT_APP_useProlificId="True" in the .env file. This will speed up the recruitment of participants.

Build And Deploy To Firebase

To serve the website on the internet, you must build and deploy it to Firebase. To build the project, run

npm run build

To deploy to Firebase, run

firebase deploy

This will make the website available on the web. You can find the URL of the website in the command line or on the Firebase console of your project under Hosting.