Simple admin UI for Firebase.
Like firebase database but find its console hard to use? Hope this simple web app could help :)
You will need to first enable one of the sign-in providers in firebase authentication console page, and then get your firebase configurations for web app.
Add firebase web app configurations to the target env.js file.
FIREBASE_CONFIG: {
apiKey: '""',
authDomain: '""',
databaseURL: '""',
projectId: '""',
storageBucket: '""'
}
Describe your database in the configuration module.
// default properties that uses unix timestamp as its value, which will be parsed into Datetime string on the page
timestampProps: [
'createdAt', 'updatedAt', 'created_at', 'updated_at'
],
DBRoots: [
{
// root property name, example:
name: 'subscriptions',
// array that contains the object properties you'd like to see in the table component as the table header,
// if nothing were given, the first object's properties that we get from this root will be used to set up table header.
props: [
// examples:
// 'id',
// 'statusVal',
// 'frequency',
// 'createdAt',
// 'updatedAt'
],
// firebase query params supported: limitToFirst, limitToLast, orderByChild
query: {
// If neither of limitToFirst nor limitToLast were given, limitToLast: 100 will be applied by default
limitToLast: 100,
orderByChild: 'createdAt'
},
// stats you'd like to see in the stats panel component, if no stats were given, only the 'total' count (count by '.key') will be displayed.
// stats object properties that supported are: name:String, countBy:String, unique:Boolean, equalTo:String
stats: [
// examples:
// { name: 'Total', countBy: 'id' },
// { name: 'Users', countBy: 'email', unique: true },
// { name: 'Subscribed', countBy: 'statusVal', equalTo: 'subscribed' }
]
}
]
# install dependencies
yarn install
# serve with hot reload at localhost:8090
yarn run dev
This project comes with a set of default configuration for deploying to firebase hosting.
# install the firebase cli
npm install -g firebase-tools
# log into to your firebase account
firebase login
# init firebase hosting, the .firebaserc file will be generated
firebase init
# production build
yarn build
# deploy
firebae deploy
Considering the nature of this web app, the default firebase database rule configuration was set to allow only specified user to read and write your data.
Please follow these steps to grant user the access.
- User sign in with available sign-in provider (user will not be able to load any data at this point)
- Go to firebase authentication console page, copy user uid.
- Go to firebase database console page, create a new root property called
admin
, then add a new record to it, with user uid as the key, user email (or any other non-null value) as its value. - That's it, happy coding and building.