Skip to content

Setting up your instance

Jump to bottom
Ted Hwang edited this page Dec 21, 2020 · 27 revisions

Setting up your instance of mipa

After forking mipa and cloning the repository into your local environment, do the following to run your instance. These steps should take one to two hours to complete, depending what you have been developing with already.

These instructions are current as of 2020.12.21. If you notice that something in the process has changed, please help update this documentation.

Create a project on Google Firebase

  1. Go to https://console.firebase.google.com/ (you may need to create an account first)
  2. Click Add project. Name the new project something like "mipa-your-name". Enabling Google Analytics is optional.
  3. Once the Firebase project is created, click on the </> icon to add a web app. Give the app a nickname, like "my mipa web app". Check the box to set up Firebase Hosting. Then click Register app.
  4. Ignore "Add Firebase SDK" instructions. Mipa's code already has this set up. So just click Next.
  5. Install firebase-tools per on-screen instructions.
  6. Per on-screen instructions, sign in to Google; but don't initiate your project with firebase init or deploy it yet. Just click continue to console.
  7. On the firebase console, click Authentication. Then Get started to set up sign-in methods; enable Email/Password.
  8. On the firebase console, click Cloud Firestore. Then Create database; select Start in production mode; pick a database location that makes sense for you (note down the location; we'll need it later), then enable.
  9. From the bottom of the left navigation panel, change the Spark plan to Blaze plan. (This is needed to make http requests from Cloud Functions, which we need for updating the currency exchange rates used within mipa.)

Add your project's credentials

  1. Make a copy of the .env_sample file and name it .env.
  2. Back on the Firebase Console, go to Project settings > General.
  3. In the newly created .env file, add in your Firebase project's credentials from the above steps. .env is already in .gitignore so the file will not be synced back to the repository.

Modify .firebaserc

  1. Make a copy of the .firebaserc_sample file and name it .firebaserc.
  2. In the file, in the "default" property, use your project id. .firebaserc is likewise already in .gitignore and will not be synced back to the repository.

Install dependencies

For most of the project we use yarn instead of npm because of the more deterministic way it chooses dependencies. This helps us developers keep our dependencies identical.

If you don't have Node.js and yarn installed yet, first download and install them from:

Then in a terminal, from the project's root directory:

yarn install

Install Firebase tools and log in

For Windows users only: In order to log in to firebase CLI, we first need to allow Powershell to run the command. Start PowerShell as administrator and do the following.

Set-ExecutionPolicy RemoteSigned

Then, for everyone (not just Windows users):

npm install -g firebase-tools
firebase login

For Windows users, when you are done with firebase login, you can set the policy back to its default value.

Set-ExecutionPolicy Restricted

Install dependencies for Cloud Functions

Firebase Cloud Functions comes with configurations that assume the use of npm, so we'll use npm here.

cd functions
npm install
cd ..

Set configuration for Cloud Functions

We need this to update currency exchange rates.

  1. Recall the location that you noted down when you created the Firestore database. Check it against this locations list: https://cloud.google.com/functions/docs/locations to find the same or nearby location. Your region code should look something like us-central1.
  2. go to fixer.io and sign up for a free account to get an access key.
  3. Run the commands below with the information you just prepared. This will update the exchange rates once per minute, which is too frequent, but gets the currency information ready for deployment of our app.
firebase functions:config:set update_exchange_rates.region="your-region-code" update_exchange_rates.schedule="every 1 minute" update_exchange_rates.time_zone="Etc/UTC" fixer_io.access_key="your-access-key"
firebase deploy --only functions
  1. Decide on a schedule to update the currency exchange rates on a regular basis. For the syntax, see https://cloud.google.com/appengine/docs/standard/python/config/cronref#schedule_format. If you have no other special considerations, every 24 hours is a reasonable choice.
  2. If you need to specify the time zone, use a value from the TZ database name column from https://en.wikipedia.org/wiki/List_of_tz_database_time_zones. Otherwise you may keep using "Etc/UTC".
  3. Now set the configurations with your decisions from the above two steps and deploy again to update exchange rates on a regular schedule.
firebase functions:config:set update_exchange_rates.schedule="every 24 hours" update_exchange_rates.time_zone="Etc/UTC"
firebase deploy --only functions

Build the app and deploy to Firebase

This will deploy to the environment you configured in your .env file.

quasar build
firebase deploy

If all went well, mipa will be running at https://your-project-id.web.app. Register an account for yourself, and try things out!

Clone this wiki locally