This week: env variables & Firebase realtime database
- Rachel Sleet
- Apr 20, 2019
- 3 min read
Here's a quick summary of some things I got a better understanding of this week.
Custom Environment Variables in React
These are a way to set up default custom variables you define for your project that are accessible throughout. I'm using them with the Book Club site (create-react-app project) because I want to share my work on GitHub whilst keeping my Firebase token etc. private.
Setting up:
Note. you can also declare these variables on the command line, I opted to create a .env folder as it's easy to declare several at once.
1. Create a file called .env in the root folder of your project. The root folder is the highest level folder that your project exists in. It's the folder you initialised the git repository in and where you type npm start every time you start working on your project.
2. Type your default variables into the file and save. No need to add " " around strings. Each variable's name should begin with REACT_APP_ e.g.
REACT_APP_API_KEY=Uipsdfcj423jksdfi9fs8dhsk
REACT_APP_AUTH_DOMAIN=myappname.firebaseapp.com
3. Use your custom environment variables throughout your app. Reference your defined variables by prepending process.env to the variable name. i.e.
process.env.REACT_APP_YOUR_CUSTOM_VARIABLE_NAME_HERE
Further reading:
Firebase - Realtime Database
I've reached the point in Book Club where I need to actually store some data. Firebase has two offerings for this - Realtime Database or Cloud Firestore. The former is free so that made the decision easy.
The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and synchronized in realtime to every connected client.
As far as I can tell, there are two components to getting this set up:
a) Designing the app's database structure
b) Reading and writing to the database
Designing the structure
I liked the simplicity of the guidance given by Firebase on how to structure data to make reading and writing as easy as possible later on. The main points are:
Avoid nesting data - when you read data at a certain reference in your tree, you'll also download all child data for that node. So the fewer levels that exist the better. This avoids very costly downloads for a relatively tiny portion of data.
Flatten data structures - by having data split into different paths, you can keep only the data relevant for a certain path (e.g. metadata) in one part of the tree and the 'full' data on a different path. e.g. separating messages from chats
Creating scalable data - consider whether the relationship between your data is static and one-directional or dynamic and two-directional. If it's one-directional, it can make sense to store the data as children. For two-directional relationships, storing the data as an index can make more sense.
Reading and writing
Reading data is achieved by specifying the location of the data to be read and using the on or once methods to take a snapshot of the full data at that location at that time. These methods are Promises that take an action type as the first argument and callback function as second (this is where you specify what to do with the data).
Chaining then functions afterwards is the best way to manipulate the retrieved data because it forces the code to execute synchronously.
Writing data is achieved by the set and update methods. Set will completely replace whatever data exists at that reference (use wisely!) and update will simply update the keys that are mentioned.
Note - to get started. You need to add your Database URL to your project and have the firebase package installed. Calls are structured like firebase.db.ref(`users/rachel`)...
Tip of the Week
Make sure you know what arguments are expected for a specific function!
Some serious headbanging occurred simply because I hadn't realised a function required a callback function. There is definitely a lot more to learn on chaining promises.
Comments