The below guide will take you through the steps of downloading the project files and setting up the online database (Google Firebase). In the future, there will be an easier process hooking into a pre-configured database.
This setup process is fairly lengthy, but it's not too bad if you stick with it! Also, to make sure it gets easier for future developers, make sure to write down or edit this readme with any errors you come across! This will make it easier for future developers to get started on the project!
Good luck!
git remote add upstream https://github.com/townhallproject/admin.git
git remote -v
git checkout master
git pull upstream master
git push origin master
git checkout <your branch>
git rebase master
git push origin master
git clone <repo URL>
npm i
npm start
This should throw an error: Error: FIREBASE FATAL ERROR: Can't determine Firebase Database URL.
Which means everything is working except you don't have Firebase
installed yet.Create a new file in the root directory of the repository named simply: .env
, this will store your local development environment variables. Leave it blank for now.
Next you will need to crate a Firebase
account for testing purposes:
https://console.firebase.google.com/
Firebase console
. You will need to sign in to your Google account.Add Project
/ create a project
buttonDevelop
on the left hand menuDatabase
. From now on Google should remember your selections.Create Database
Start in test mode
Enable
project overview
tab on the left nav bar</>
register app
.env
file.Now, you can fill in the following data into your .env
file:
REACT_APP_TESTING_FIREBASE_API_KEY=
REACT_APP_TESTING_FIREBASE_AUTH_DOMAIN=[TESTING APP NAME].firebaseapp.com
REACT_APP_TESTING_DATABASE_URL=https://[TESTING APP NAME].firebaseio.com
REACT_APP_TESTING_PROJECT_ID=[TESTING APP NAME]
REACT_APP_TESTING_STORAGE_BUCKET=[TESTING APP NAME].appspot.com
REACT_APP_TESTING_MESSAGING_SENDER_ID=[TESTING APP ID]
NODE_ENV=development
The mapping of environment variables is below (it's a 1:1 mapping): apiKey -> REACT_APP_TESTING_FIREBASE_API_KEY authDomain -> REACT_APP_TESTING_FIREBASE_AUTH_DOMAIN databaseURL -> REACT_APP_TESTING_DATABASE_URL projectId -> REACT_APP_TESTING_PROJECT_ID storageBucket -> REACT_APP_TESTING_STORAGE_BUCKET messagingSenderId -> REACT_APP_TESTING_MESSAGING_SENDER_ID
IMPORTANT NOTE! Remove ALL quotation marks in the .env
file, this can stop your app from working. (it has caused problems in the past)
https://console.firebase.google.com/u/0/
Develop
--> Authentication
Sign-in method
Google
--> Enable
--> Save
https://console.cloud.google.com
open
hamburger menu
--> API's and Services
Configure consent screen
/ OAuth consent screen
does not appear, you may have to go thru the rest of the official instruction steps (link above).Try starting the app npm start
in the terminal (from the project root directory). This should open a web browser pointed at: http://localhost:3000
prompting you to log in the view the admin site.
You should expect to get an error at this point. Read it carefully.
If the error says:
Cannot destructure property
compileof 'undefined' or 'null'.
npm ERR! code ELIFECYCLE
You may need to change the webpack-dev-server
version to "3.0.0" in the package.json
file. Next, run npm i
and then npm start
.
If everything has gone according to plan so far you should get the following error:
USER_REQUEST_FAILED: Error: permission_denied at /users/<some long string>: Client doesn't have permission to access the desired data.
This indicates that you are not a user who has permissions on Firebase. Make yourself a user with the following steps:
Navigate to the firebase console (https://console.firebase.google.com)
Left side nav
--> develop
--> database
--> ...
realtime database
... --> realtime database
--> rules
For now, change the database rules to appear as follows (later, we'll add a full set of rules so that our database behaves like the production database):
{
/* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
"rules": {
".read": true,
".write": true
}
}
click publish
now refresh
the login page
Request access
page with the following options:Download RSVPs to events
Download Events
Access to our Member of Congress database
Full Admin
Select Full Admin
and press Submit
Now, you need to approve yourself as an admin
Go to the firebase console
--> develop
--> Database
--> realtime database
Expand the database until you see 'users' and then find your user id
Hover over the long random ID number for your user entry
Click on the +
icon
In the Name
field enter (exactly): isAdmin
In the Value
field enter (exactly): true
Click Add
Go back to and refresh the THP login page that opened with you ran npm start
(you should now be logged in as an admin, and see a left side nav)
Click manage data access
on the left left side nav
Click approve
under your pending approval
Go back to the firebase console to verify that the pending_access_request
is gone
This step makes your testing database behave the same as the production database, which is important for discovering bugs in your fresh code.
Left side nav
--> develop
--> database
--> realtime database
--> rules
lib/dbrules.txt
lib/dbrules.txt
and copy the contents in to the Firebase rules window, replacing everything that is there alreadypublish
React and Redux devtools can be helpful tools to install for debugging in Chrome:
When you encounter new problems, make SURE to edit this README
with updated information so that future coders can spend more time being productive!