Firebase Integration
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.
For setting up the online experiment, we recommend using either the user cookiecutter template or the create-react-app template.
Hint
The cookiecutter template also provides a template for the AutoRA workflow used in online experiments.
Installation
To make sure that node
is installed on your system, run the following command.
node -v
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
cookiecutter https://github.com/AutoResearch/autora-user-cookiecutter
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 cookiecutterREACT_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
Next
- You will not need to run the command that is displayed after first clicking
Next
, so clickNext
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 underBuild
. - 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
firebase init
- 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 pressEnter
. - 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
REACT_APP_devNoDb="False"
in the .env
file.
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
firebase deploy
Hosting
.