https://github.com/safnaj/devfest-2023-demo
A Demo Application on Firebase Feature Flagging using Remote Config for Google DevFest 2023 Sri Lanka
https://github.com/safnaj/devfest-2023-demo
firebase firebase-remote-config react-firebase
Last synced: 11 months ago
JSON representation
A Demo Application on Firebase Feature Flagging using Remote Config for Google DevFest 2023 Sri Lanka
- Host: GitHub
- URL: https://github.com/safnaj/devfest-2023-demo
- Owner: Safnaj
- Created: 2023-11-16T09:50:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-18T19:21:13.000Z (over 1 year ago)
- Last Synced: 2025-04-12T08:16:45.618Z (about 1 year ago)
- Topics: firebase, firebase-remote-config, react-firebase
- Language: JavaScript
- Homepage: https://devfest-2023-demo.web.app
- Size: 244 KB
- Stars: 7
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DevFest 2023 - Sri Lanka
### 1. Create a new Firebase Project.
- Go to [Firebase Console](https://console.firebase.google.com) and create a new Firebase Project.
- Navigate to Remote Config and create a Boolean Flag Named `feature_enable_dark_mode`
### 2. Clone the Repository
- `git clone https://github.com/Safnaj/devfest-2023-demo.git`
### 3. Add Firebase Config values to `.env` file
- Inside the project folder create a file called `.env`
- Refer the `.env.example` and add the values as shown below
```
REACT_APP_FIREBASE_API_KEY=YOUR_API_KEY
REACT_APP_FIREBASE_AUTH_DOMAIN=YOUR_AUTH_DOMAIN
REACT_APP_FIREBASE_PROJECT_ID=YOUR_PROJECT_ID
REACT_APP_FIREBASE_STORAGE_BUCKET=YOUR_STORAGE_BUCKET
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID
REACT_APP_FIREBASE_APP_ID=YOUR_APP_ID
REACT_APP_FIREBASE_MEASUREMENT_ID=YOUR_MEASUREMENT_ID
```
### 4. Set Default Config Values
- Go to `src/config/remoteConfig.js` and inside the `initRemoteConfig` add your flag and it's default value.
### 5. Define Flags in Constants
- Move to `src/constants/flags.js` and create a constant for your flag:
```
export const FEATURE_ENABLE_DARK_MODE = 'feature_enable_dark_mode';
```
### 6. Check flag value
- Check your flag value using `isFeatureEnabled` function and write your logic
Ex: `const isShowStatsEnabled = isFeatureEnabled(FEATURE_ENABLE_STATS);`