Simple registration / admissions sales site for contra dance events. React app that uses Firebase for database, hosting, and serverless functions back-end.
- Create Firebase account if needed
- Create GitHub account if needed
- Install node if needed
- Install GitHub CLI
- Install Firebase CLI
- Install Google Cloud CLI
- Install Google Cloud CLI beta components:
gcloud components install beta
- Login to the Firebase CLI:
firebase login
- ME:
cp -R [TEMPLATE_DIR] [DESTINATION_DIR] && cd [DESTINATION_DIR] && gh repo create [NAME] --private --source=. --remote=upstream
- ANYONE ELSE: Fork template project and clone it to a local directory
bash clear-old-settings.sh
- Update site title in
public/index.html
- Update values in
src/config.js
- Update favicon (can use this site to generate them)
- Copy desired logo to
public/logo.png
and set to desired height (likely <= 80px)
firebase projects:create [PROJECT_ID]
firebase init database --project [PROJECT_ID] # accept defaults, don't overwrite dataabase rules
firebase deploy --only database
Enable billing on Google Cloud account from the Google Cloud console
(Unlikely to actually owe any money for small scale use, but set a billing alert to be safe.)
- Setup OAuth consent screen
- user type: internal
- values for other fields don't really matter
- not necessary to add any scopes
gcloud billing accounts list
gcloud billing projects link [PROJECT_ID] --billing-account [BILLING_ACCOUNT_ID]
- From Firebase console, click "Add app" and choose the web one
- Get Firebase web app config values
firebase apps:sdkconfig web
- Add those values to
.env
file
- generate a long random string as your token (avoid symbols)
- set your token as the value for REACT_APP_TOKEN in
.env
- firebase functions:config:set shared.token="INSERT_TOKEN_HERE"
Stripe configuration:
- On Stripe console, disable all payment methods except Cards, Apple Pay, Google Pay
- Copy the publishable key to the
.env
file. (Use test key until ready to launch.) - firebase functions:config:set stripe.secret_key="YOUR_STRIPE_SECRET_KEY"
PayPal configuration:
- Don't want to accept Venmo? Comment out the venmo line in
config.js
. - Copy the client ID to the
.env
file. Ignore the secret key. (Use sandbox mode key until ready to launch.) - Comment out the lines related to Stripe in
functions/index.js
- Update allowed-referrers list in
google-places-api-flags.yaml
file.
gcloud services enable places-backend.googleapis.com --project [PROJECT_ID]
gcloud services enable maps-backend.googleapis.com --project [PROJECT_ID]
gcloud beta services api-keys create --flags-file=google-places-api-flags.yaml --project [PROJECT_ID]
- Copy
keyString
value toREACT_APP_GOOGLE_PLACES_API_KEY
in.env
.
- Register site with recaptcha
- label: [doesn't really matter]
- reCAPTCHA type: v2 not a robot challege
- Domains: localhost, [PROJECT_ID].web.app, EXAMPLE.COM (obviously replace with actual domain)
- Google Cloud Platform: associate with this google cloud project
- Copy site key value to
REACT_APP_RECAPTCHA_SITE_KEY
in.env
.
bash update-github-secrets.sh
firebase init hosting:github # answer no to questions, as this is already configured
rm .github/workflows/firebase-hosting-pull-request.yml
- Update
firebaseServiceAccount
value in.github/workflows/firebase-hosting-merge.yml
to name of GitHub secret set by previous step.
Setup spreadsheet for recording orders:
- Make a copy of the template spreadsheet.
- Update fields/columns as needed in spreadsheet and in
functions/fields.js
. - Determine your spreadsheet ID - the long string of characters (likely between
/d/
and/edit
)
Enable Sheets API, create Google Cloud service account, save keys to firebase function config:
gcloud services enable sheets.googleapis.com --project [PROJECT_ID]
gcloud iam service-accounts create sheets --project [PROJECT_ID]
gcloud iam service-accounts keys create tmp.json --iam-account sheets@[PROJECT_ID].iam.gserviceaccount.com
firebase functions:config:set sheets.googleapi_service_account="$(cat tmp.json)"
firebase functions:config:set sheets.payment_id_column="[PAYMENT_ID_COLUMN_LETTER]" # e.g. AA
firebase functions:config:set sheets.sheet_id="YOUR_SPREADSHEET_ID"
rm tmp.json
- Give spreadsheet edit permissions to the service account email:
sheets@[PROJECT_ID].iam.gserviceaccount.com
Create a Sendgrid API key, configure firebase functions with that and from/reply/subject settings:
firebase functions:config:set email.sendgrid_api_key="SENDGRID_API_KEY"
firebase functions:config:set email.from='"Example" <example@example.com>' email.subject='Example Contra Dance Registration'
firebase functions:config:set email.reply_to='example@example.com' # only if needed
cd functions && npm install && cd ..
firebase deploy --only functions
Setup logs for appendrecordtospreadsheet Firebase function to notify on severity=(ERROR OR INFO)
:
- Do this two-line query:
(resource.type="cloud_function" resource.labels.function_name=("appendrecordtospreadsheet") resource.labels.region="us-central1") OR (resource.type="cloud_run_revision" resource.labels.service_name=("appendrecordtospreadsheet") resource.labels.location="us-central1")
severity=(ERROR OR INFO)
- then click on "Create alert"
- Ensure
.env
is filled in with environment variables
npm install
npm start
- Ensure all environment variables are set as repo secrets
- Ensure all environment variables are listed in
.github/workflows/firebase-hosting-merge.yml
, including firebaseServiceAccount - If update Github secrets, must redeploy