Deployment Guide

Deployment Guide

This guide covers deploying your experiment to Firebase Hosting. The deployment process ensures your experiment is accessible online and creates permanent snapshots of your code for reproducibility.

Pre-Deployment Checklist

Before deploying, verify the following:

1. Code Quality

   • Run yarn lint to format code and check for errors
   • Fix any TypeScript errors or ESLint warnings
   • Remove any development-only console.log statements

2. Firebase Configuration

   • Verify you've completed the Firebase Setup steps
   • Check that firebaseCred in creds.ts contains your Firebase credentials
   • Ensure Firestore security rules are deployed with yarn deploy-rules

3. Testing

   • Test your experiment locally with simulateMockDatabase = false to verify Firestore connectivity
   • Check that data is correctly saved to Firestore
   • Test in multiple browsers
   • Verify response collection and completion code display

Deployment with Release Script

The template includes a release script that automates the deployment process with version tracking:

yarn release

What the Release Script Does

1. Prompts you to increment the version number (major, minor, or patch)
2. Creates a git commit with the version change
3. Injects the version number and git commit hash into the built application
4. Builds and optimizes the application
5. Deploys to Firebase Hosting

This approach ensures that the exact code version used for each participant is tracked in your data.

Version Tracking

Each participant's data includes:

• The version number from package.json
• The git commit hash
• A timestamp

This makes your research reproducible by allowing you to identify exactly which code was used to collect specific data.

Manual Deployment Steps

If you prefer to deploy manually without the release script:

1. Build the project:

   yarn build:prod

2. Deploy to Firebase:

   yarn deploy

Note that this method does not automatically update version numbers or commit to git.

Testing Deployed Application

After deployment:

1. Visit your Firebase Hosting URL (shown after deployment, usually https://your-project-id.web.app)
2. Complete a test run of your experiment
3. Verify data is correctly saved to Firestore by checking the Firebase Console
4. Test Prolific integration if applicable

Monitoring Your Deployment

Firebase Console

Monitor your deployment in the Firebase Console:

• Hosting: View deployment status and history
• Authentication: Monitor user sessions
• Firestore: Check database operations and data storage
• Usage: Monitor quotas and limits

Analytics (If Enabled)

If you enabled Google Analytics during Firebase setup:

• View user engagement metrics
• Monitor error rates
• Check performance statistics

Updating Your Deployment

To update your deployed experiment:

1. Make your changes locally
2. Test thoroughly
3. Run the release script again:

   yarn release

Rollback Process

If you need to revert to a previous version:

1. In the Firebase Console, go to Hosting
2. Find the previous deployment in the deployment history
3. Click "Rollback" next to the version you want to restore
4. Verify the rollback was successful by visiting your site

Multiple Environments

For more complex research projects, you might want separate development and production environments:

1. Create separate Firebase projects (e.g., "my-experiment-dev" and "my-experiment-prod")

2. Use .firebaserc to manage multiple project targets

3. Deploy to different environments as needed:

   firebase use dev
   yarn deploy
   
   firebase use prod
   yarn deploy

Next Steps

• Continue to Data Collection to set up Prolific integration
• Learn how to retrieve data with the data retrieval script