Automatic dev/staging/prod mode based on environment variables (#50)

### Summary

This diff setups up the infrastructure to automatically build different variants of course plan suitable for dev/staging/production. The CI build job is changed to use staging build, so we want accidently break stuff in prod database while play-testing.

Behaviors for three different variants are listed below:
- dev: non-mimized code, dev database
- staging: minimized code, dev database
- prod: minimized code, prod database

### Test Plan

I tested all three modes locally. To facilitate testing, I globally installed `serve` that can directly statically serve a directory locally.
In the new dev environment, I have not been granted alpha whitelist yet. Indeed both dev version (`by npm run serve`) and the staging version (`npm run build:staging && serve dist`) alerted that I do not have access. The prod version (`npm run build && serve dist`) directly autoloads into the page for me, since I'm previously granted alph  access to the prod version.

### Notes

Relevant docs: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

.env.development

@@ -0,0 +1,2 @@
+NODE_ENV=development
+VUE_APP_FIREBASE_MODE=dev

.env.production

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_FIREBASE_MODE=prod

.env.staging

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_FIREBASE_MODE=dev

.github/workflows/ci-build.yml

@@ -20,7 +20,7 @@ jobs:
       - name: NPM Install
         run: npm install
       - name: Build
-        run: PUBLIC_URL="/course-plan/${{ github.event.number }}" npm run build
+        run: PUBLIC_URL="/course-plan/${{ github.event.number }}" npm run build:staging
       - name: Upload Built Static Assets
         uses: actions/upload-artifact@master
         with:

package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build:staging": "vue-cli-service build --mode staging",
+    "build": "vue-cli-service build --mode production",
     "lint": "vue-cli-service lint",
     "format": "prettier --write '**/*.{js,vue,scss,css,html}'",
     "format:check": "prettier --check '**/*.{js,vue,scss,css,html}'"

src/firebaseConfig.js

@@ -3,30 +3,33 @@ const firebase = require('firebase/app');
 require('firebase/auth');
 require('firebase/firestore');
 
-// Production config
-const config = {
-  apiKey: 'AIzaSyDkKOpImjbjS2O0RhIQNJLQXx2SuYbxsfU',
-  authDomain: 'cornell-courseplan.firebaseapp.com',
-  databaseURL: 'https://cornell-courseplan.firebaseio.com',
-  projectId: 'cornell-courseplan',
-  storageBucket: '',
-  messagingSenderId: '1031551180906',
-  appId: '1:1031551180906:web:bdcea6ec074e673ea72a13',
-  measurementId: 'G-8B1JVCBX0Z'
-};
-firebase.initializeApp(config);
+let config;
 
-// Development config
-// const developmentConfig = {
-//   apiKey: 'AIzaSyAfePy1Tbrqm55bYR7BHHl50r-9NTVj0Rs',
-//   authDomain: 'cornelldti-courseplan-dev.firebaseapp.com',
-//   databaseURL: 'https://cornelldti-courseplan-dev.firebaseio.com',
-//   projectId: 'cornelldti-courseplan-dev',
-//   storageBucket: '',
-//   messagingSenderId: '321304703190',
-//   appId: '1:321304703190:web:2f2fefb4a0284465b99977',
-// };
-// firebase.initializeApp(developmentConfig);
+if (process.env.VUE_APP_FIREBASE_MODE === 'prod') {
+  // Production config
+  config = {
+    apiKey: 'AIzaSyDkKOpImjbjS2O0RhIQNJLQXx2SuYbxsfU',
+    authDomain: 'cornell-courseplan.firebaseapp.com',
+    databaseURL: 'https://cornell-courseplan.firebaseio.com',
+    projectId: 'cornell-courseplan',
+    storageBucket: '',
+    messagingSenderId: '1031551180906',
+    appId: '1:1031551180906:web:bdcea6ec074e673ea72a13',
+    measurementId: 'G-8B1JVCBX0Z'
+  };
+} else {
+  config = {
+    apiKey: 'AIzaSyAfePy1Tbrqm55bYR7BHHl50r-9NTVj0Rs',
+    authDomain: 'cornelldti-courseplan-dev.firebaseapp.com',
+    databaseURL: 'https://cornelldti-courseplan-dev.firebaseio.com',
+    projectId: 'cornelldti-courseplan-dev',
+    storageBucket: '',
+    messagingSenderId: '321304703190',
+    appId: '1:321304703190:web:2f2fefb4a0284465b99977'
+  };
+}
+
+firebase.initializeApp(config);
 
 // firebase utils
 const db = firebase.firestore();