On this page, you can find information on how to set up a Firebase website to collect observations for an AutoRA workflow. You can find information on how to connect such a website to AutoRA and how to automatically recruit participants via Prolific at the following pages, respectively: AutoRA Firebase Experimentation manager, AutoRA Prolific Recruitment Manager.
The cookiecutter template also provides a template for the AutoRA workflow used in online experiments.
To make sure that
node is installed on your system, run the following command.
nodefollowing the instruction on the node.js website.
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
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 Appor the
<>symbol and follow the prompts
- Enter a name for the Firebase app (could be the same as the project name)
Also set up Firebase Hosting for this app
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
.envfile 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"
- Click on
- You will not need to run the command that is displayed after first clicking
Next, so click
Continue to console
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 Databasefrom the sidebar under
- Select production mode and click
- Choose the current location and click
Configure Your Project For Firebase
In the project folder, enter the following commands in your terminal: First log in to your Firebase account using
- 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
- 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
Using Prolific Id's
If you want to recruit participants via Prolific (for example using the AutoRA Prolific Recruitment Manager), we highly recommend setting
REACT_APP_useProlificId="True". 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