Skip to content

Getting Started

Jacob Smith edited this page Jan 12, 2021 · 12 revisions

Welcome to the getting started guide. This app runs on Firebase, a suite of software tools created by Google that work to help you quickly build web and mobile apps. There is a lot of information online so I won't bore you with any more information about Firebase here.

Even for local development, the web & mobile apps depend Firebase for authentication, data storage and media storage. If you want to help develop features and/or fix bugs, let me know and I can pass along the Firebase configuration. Alternatively, you can create your own Firebase project.

Before starting, make sure you have this repository cloned locally 💻

1. Node & npm

First, you'll have to make sure you have node v12 and npm installed correctly. If not installed, we recommend the following steps to getting them set up.

  1. Install Node Version Manager (NVM)
  2. Install Node and npm using NVM

Although these instructions use npm, yarn can also be used if desired.

2. Dependency Installation

You can install all dependencies in one go using the following command.

npm run bootstrap

This runs npm install in the root the repository and the app, functions and native-audio folders.

We install firebase-tools during this process. This Firebase CLI will be used in future steps so definitely check out the documentation.

2. Firebase Project Creation

The first step is to create a new project in the Firebase console. Head to the console, sign into your Google account, click the "Add project" button, give your project a name and then click "Continue". On the next page, choose whether you want to enable analytics and continue with the setup. Once you're done, click the "Create project" button and let Firebase do it's thing :) Once the project is ready, click "Continue".

3. Firebase Authentication

From the Firebase console, head to the "Authentication" tab (on the left) and then click "Get started". It should then take you to the "Sign-in method" tab. Click the "Email/password" row, turn on the first toggle (not the "Email link (passwordless sign-in)" toggle) and then click "Save".

Don't create any users now, there is a script that does this instead.

4. Firebase Cloud Firestore

Head to the "Cloud Firestore" tab and click "Create database". Select "Start in test mode", "Next", select your desired region (the default value is probably fine) and finally click "Enable".

6. Firebase Functions

In the "Functions" tab, click "Upgrade project". If you haven't set up a google cloud billing account before, there is lots of information online. Once you have a one set up, click "Purchase" in the modal. I recommend setting up a budget by clicking the "Set a budget alert". Once you've set your budget, click "Close".

7. App Configuration

Click on the gear icon next to "Project Overview" > "Project settings". In the "General" tab, go down to the "Your apps" (it should say "There are no apps in your project") section and click on the web icon. Give your app a nickname and then click "Register app". Your web app configuration will show up on the next section. Copy these values and paste them in the app/.env file in the placeholders. Each property (e.g. apiKey) has a corresponding placeholder in the .env file (e.g. SNOWPACK_PUBLIC_API_KEY).

8. Retrieving App ID

In the firebase console, click the gear icon again > "Project settings" and then find your "Project ID". Copy this down since you'll need it for future steps :)

9. Downloading Service Account File

This repository supports both staging and production environments. The scripts folder contains admin scripts that can be used to do routine operations such as creating user accounts. Each script can be configured to run with either environment (more details in scripts/README.md) but you'll need a service account first.

Click the hear icon again > "Project settings" and then select the "Service accounts" tab on the top. Next, make sure "Firebase Admin SDK" is selected and then click "Generate new private key" > "Generate Key". Store this file in the root of the repository as serviceAccountKey.relar-production.json or serviceAccountKey.relar-staging.json. You'll use this file later!

8. Google Cloud CLI Installation

Next, install the gcloud and the gsutil Google Cloud CLI utilities. You'll use these to configure Google Cloud Storage settings.

curl https://sdk.cloud.google.com | bash
exec -l $SHELL

This installs both gcloud and gsutil. You'll have to login to this CLI utility as well (make sure to login to the same Google account).

gcloud init

See the official gsutil installation documentation here.

9. CORS

Now that you have gsutil installed and configured, you can deploy CORS configuration to your storage bucket. First, add https://<PROJECT_ID>.web.app to the origin property in storage.json and remove any values that aren't needed. Next, deploy this configuration to your storage bucket.

gsutil cors set storage.json gs://<PROJECT_ID>.appspot.com

8. Sentry (Optional)

If you want to turn on Sentry, replace the value of SNOWPACK_PUBLIC_FIREBASE_DSN in app/.env with your own Sentry DSN value. This DSN will look something like https://abcd1234@123abc.ingest.sentry.io/1234567. If you don't want to turn on Sentry just yet, use an empty string instead.

9. SendGrid API Key

Send Grid is an email service that Relar uses to send emails to users. You will need an API key to send out a few emails. Here is some documentation that explains how to get an API key.

Once you have the API key,

10. Functions Configuration

You'll need to set a few functions configuration options before it can run.

firebase functions:config:set --project PROJECT \
  env.sendgrid_api_key="<SEND_GRID_API_KEY>" \
  env.notification_email="<YOUR_EMAIL>" \
  env.sentry_dsn="<SENTRY_DSN>"

Setting the notification_email is optional. This email will be used to notify you when a new user signs up or you receive feedback.

10. Building

To get things deployed, you'll have to build them first. Run the following set of commands to build the functions, native-audio and app folders.

# in native-audio/
npm run build

# in functions/
npm run build

# in app/
npm run build:web-production

Note that this builds the web app for production. Another section below will detail how to build the mobile app.

11. Firebase CLI Login

You'll have to login using the same Google account that you created your project under before you can deploy anything.

npx firebase-tools login

12. Deployment

This is the last step, hooray!! Just run the deploy command with the correct project ID.

# <PROJECT_ID> should be replaced with the value you just copied
npx firebase-tools deploy --project <PROJECT_ID>

If everything goes well, Relar should be running at https://<PROJECT_ID>.web.app.

Clone this wiki locally