Simple registration / admissions sales site for contra dance events. React app that uses Firebase for database / serverless functions back-end / hosting.
prerequisites:
- node
- firebase account
- github account
- Install GitHub CLI
- Install Firebase CLI
- Install Google Cloud CLI
- Install Google Cloud CLI beta components:
gcloud components install beta
rm .env
rm .firebaserc
rm -rf .firebase
rm -rf node_modules
rm -rf functions/node_modules
cp .env.example .env
git remote rm origin
- Update site title in
public/index.html
- Update values in
src/config.js
- Update favicon (can use this site to generate them)
firebase login
firebase projects:create [PROJECT_ID]
firebase init database --project [PROJECT_ID]
firebase deploy --only database # accept defaults, don't overwrite dataabase rules
Enable billing on Google Cloud account from the Google Cloud console
(Very 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]
Update allowed-referrers list in google-places-api-flags.yaml
file.
gcloud services enable sheets.googleapis.com --project [PROJECT_ID]
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 to REACT_APP_GOOGLE_PLACES_API_KEY
in .env
.
firebase apps:sdkconfig web
- 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
.
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.)
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.)
bash update-github-secrets.sh
Note: answer no to the yes/no questions; this stuff is already configured.
firebase init hosting:github
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.
cd functions && npm install && cd ..
Database Update Firebase function:
gcloud iam service-accounts create firebase --project [PROJECT_ID]
gcloud iam service-accounts keys create tmp.json --iam-account firebase@[PROJECT_ID].iam.gserviceaccount.com
firebase functions:config:set database.service_account="$(cat tmp.json)"
rm tmp.json
firebase functions:config:get > functions/.runtimeconfig.json // for testing
Stripe Firebase function:
Note: Comment out the lines pertaining to Stripe in functions/index.js
if not using Stripe
firebase functions:config:set stripe.secret_key="YOUR_STRIPE_SECRET_KEY"
firebase functions:config:set stripe.site_url="https://[PROJECT_ID].web.app" // replace with actual front-end site URL
firebase functions:config:get > functions/.runtimeconfig.json // for testing
firebase emulators:start --only functions // for testing
firebase deploy --only functions // to deploy
Google Sheets Firebase function:
Create Google Cloud service account on project, save keys to firebase function config:
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 googleapi.service_account="$(cat tmp.json)"
rm tmp.json
Setup spreadsheet for recording orders:
Note: Update fields/columns as needed in functions/fields.js
and in spreadsheet.
- Make a copy of the template spreadsheet.
- Give spreadsheet edit permissions to the service account email:
sheets@[PROJECT_ID].iam.gserviceaccount.com
- Determine your spreadsheet ID - the long string of characters (likely between
/d/
and/edit
)
firebase functions:config:set googleapi.sheet_id="YOUR_SPREADSHEET_ID"
firebase functions:config:get > functions/.runtimeconfig.json // for testing
firebase deploy --only functions // to deploy
Email Confirmation Firebase function:
Configure with Sendgrid API key and from/reply/subject settings:
firebase functions:config:set 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
firebase functions:config:get > functions/.runtimeconfig.json // for testing
firebase deploy --only functions // to deploy
Add error logging for Firebase functions
Setup logs for Firebase Function (at least the spreadsheet one) to notify on severity=(ERROR OR INFO)
.
ADD MORE INFO TO THIS README SECTION.
Set environment variables in .env
npm install
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
- Set environment variables as secrets on the repo and update
.github/workflows/firebase-hosting-merge.yml
. - Deploy again after updating github secrets!