This template monorepo is made of :
/apps/account
- A react app with firebase authentication. Sets the authToken to cookies for cross subdomain authentication./apps/calculator
- A react app. Pings the API on first load to authenticate using the authToken in the cookie./services/bouncer
- A fastify API proxy with authenticates all server requests and forwards them to the appropriate server./services/api
- A generic fastify API which consumes a Firebase database.
There are a few other /packages
to keep the code organized. The /packages
are:
/packages/colors
- A small colour library for manipulating colours./packages/common
- A place to put common code that is used by both the app and api./packages/common-client
- A place to put common code that is used by the frontend apps./packages/common-services
- A place to put common code that is used by the services APIs./packages/ui
- A collection of UI components.
The tech stack includes the following main technologies.
Note: To make commits, use
yarn commit
instead ofgit commit
to trigger commitizen.
- Replace occurences of
template-3
andTemplate 3
with the name of the project.
- Go to firebase console and create a new project.
- Go to the authentication tab and enable email, google authentication and anonymous authentication.
- Create a default firestore database.
- Create a
.env
file in the root of each project within/apps
and copy the values from the comment inapps/*/src/core/configs/environment.ts
. - Go to the project settings and create a new web app. Copy the relevant values from the object in the code block, into
/apps/*/.env
. Seepackages/common-client/src/configs/firebase.ts
to understand how the env variables are then loaded in. - Run
yarn && yarn start:turbo
to start the app. At this stage you should be able to log in with your gmail account. You will get knocked back to the error page though because the server isn't running. - Kill the app for now.
- In the firebase console go to
Settings > Service Accounts > Generate New Private Key
and download the file. - Rename it to
firebase-service-account.json
and put it in theservices/*/src/configs
directory. This name is already in the.gitignore
. - Create
/services/*/.env
and copy the values from the comment inservices/*/src/configs/environment.ts
. - Run
yarn start
, this will take a minute or two to build. It will also start the frontend using concurrently. - Go to the calculator app in the browser and navigate to the settings page. Click "Sign In", you should get redirected to the auth app and then brought back to the settings page of the calculator app.
Other notes:
- Use
yarn start:build
to also rebuild the api container if you make changes to the api. - Use
yarn stop
to stop the container.
Search the repo for TODO
and follow instructions.
The steps below roughly follow this article.
Open the Cloud Shell and follow through the steps below.
# To make things easier, set the project ID and account name as variables:
export PROJECT_ID="project-id-232323" # You can find this in the query string of the URL
export ACCOUNT_NAME="your-account-name" # This can be anything you want but it must be 6-30 letters to be used as a service account
# Now roll through the rest pasting the commands as is
# Enable the necessary services:
gcloud services enable cloudbuild.googleapis.com run.googleapis.com containerregistry.googleapis.com
# Create a service account:
gcloud iam service-accounts create $ACCOUNT_NAME \
--description="Cloud Run deploy account" \
--display-name="Cloud-Run-Deploy"
# Give the service account Cloud Run Admin, Storage Admin, and Service Account User roles. You can't set all of them at once, so you have to run separate commands:
gcloud projects add-iam-policy-binding $PROJECT_ID \
--member=serviceAccount:$ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com \
--role=roles/run.admin
gcloud projects add-iam-policy-binding $PROJECT_ID \
--member=serviceAccount:$ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com \
--role=roles/storage.admin
gcloud projects add-iam-policy-binding $PROJECT_ID \
--member=serviceAccount:$ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com \
--role=roles/iam.serviceAccountUser
# Generate a key.json file with your credentials, so your GitHub workflow can authenticate with Google Cloud:
gcloud iam service-accounts keys create key.json \
--iam-account $ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com
# Run the following to print the contents of the key.json file and copy it to somewhere handy for now.
cat key.json
# Delete the file. You'll need to paste the contents into a GitHub secret next.
rm key.json
Head over to GitHub
-
Go to your GitHub repository and click
Settings > Secrets and variables > Actions > New repository secret
. -
Add the following secrets:
-
GCP_PROJECT_ID
- The project ID you used in GCP. -
GCP_EMAIL
- The email address of the service account you created in GCP. It should look something like$ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com
. Find it inside of key.json under the propertyclient_email
. -
GCP_CREDENTIALS
- The contents of thekey.json
file you created in GCP. -
Click the variables tab and app the following variable:
-
GCP_SERVICE_NAME
- The name of the app you want to deploy to Cloud Run. e.g.template-3-api
-
Run
base64 -i firebase-service-account.json
on your production version of thefirebase-service-account.json
and add the result to a secret namedFIREBASE_SERVICE_ACCOUNT
Continuous deployment to Cloud Run is now set up. Any time you push to the main
branch, the app will be deployed to Cloud Run.
Do that now to allow Cloud Build to generate a url for the api.
Create a new project and connect the GitHub repo. You can then set up the following environment variables:
VITE_SERVICES_API_URL
VITE_FIREBASE_PROJECT_ID
VITE_FIREBASE_MESSAGING_SENDER_ID
VITE_FIREBASE_MEASUREMENT_ID
VITE_FIREBASE_APP_ID
VITE_FIREBASE_API_KEY
VITE_ENVIRONMENT
- Go to https://vercel.com/account/tokens and create a token, record the token.
- In the terminal, run
npx vercel login
and sign in with the preferred method. - Run
mkdir vercel && cd vercel && npx vercel link
and follow the instructions to link the existing project. - In the sidebar, navigate to
vercel/.vercel/project.json
and copy theorgId
andprojectId
values. - Add the secrets to the GitHub repo. Delete the vercel directory you created.
VERCEL_TOKEN=xxxx
VERCEL_ORG_ID=xxxx
VERCEL_PROJECT_ID=prj_xxxx
Go to services/api/src/configs/corsWhitelist.ts
and whitelist any sites for CORS. A value of null
will allow all sites.
Commit to the main branch and the app should be deployed.