Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thdk/firestorable
Easily keep your react app state in sync with firebase firestore database using mobx
https://github.com/thdk/firestorable
firebase firestore firestore-database mobx mobx-react react typescript
Last synced: about 18 hours ago
JSON representation
Easily keep your react app state in sync with firebase firestore database using mobx
- Host: GitHub
- URL: https://github.com/thdk/firestorable
- Owner: thdk
- License: mit
- Created: 2019-03-17T13:18:41.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T05:21:22.000Z (over 1 year ago)
- Last Synced: 2024-10-12T18:54:22.522Z (27 days ago)
- Topics: firebase, firestore, firestore-database, mobx, mobx-react, react, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/firestorable
- Size: 3.8 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Firestorable
A strong typed observable wrapper using mobx for firebase firestore database.
[](https://coveralls.io/github/thdk/firestorable?branch=master)
## Installation
```
npm install firestorable
```
## Firestorable - example applications
There is a separate github repo with example applications to demonstrate how to use firestorable with react and mobx.
[**example applications**](https://github.com/thdk/firestorable-examples)
## How to use: basic example
Create an instance of a firestorable collection:
```js
const db = firebase.firestore();
// create a type or interface that matches the data in the firestore collection
interface IRegistration {
time: number;
description: string;
}
// use the interface as generic type when creating the firestorable collection
const registrationCollection = new Collection(
db,
"registrations", // name of your firestore collection
);
```
And use that instance in a mobx observable react component:
```jsx
const RegistrationsList = observer(() =>
{
// Each item in the docs property of the create Collection has a strong typed (IRegistration) data property representing the document data from the firestore 'registrations' collection.
registrationCollection.docs
.map(doc =>
Time: {doc.data.time}
Description: {doc.data.description}
)
}
);
});
```
This RegistrationsList component will now rerender whenever changes occur in the 'registrations' collection of your firestore database.
## Contributing
These instructions will get you a copy of the project for development and testing purposes.
### Prerequisites
#### node
I assume you already have node with npm installed.
#### firebase-tools
You need to have `firebase-tools` installed globally to run the firebase emulator:
```sh
npm i -g firebase-tools
```
#### java
[java](https://openjdk.java.net/install/) is required to run the tests with a firestore emulator.
**Install java on linux (debian, ubuntu)**
```sh
sudo apt-get install openjdk-8-jre
```
### Installing
1. Clone this repo
```sh
git clone https://github.com/thdk/firestorable.git
```
2. Step into the new repo directory
```sh
cd firestorable
```
3. Install dependencies
```sh
npm install
```
4. Build
```sh
npm run build
```
### Testing
Before running the tests, you need to start to firestore emulator:
```sh
npm run emulator
```
Keep the emulator running in one terminal window and run tests in another terminal:
```sh
npm run test
```
Note: after running `npm run test` you can run `npm run coverage` to view the code coverage of the last ran tests.
Note: By default emulator will use port 8080. If you need to use another port, then you have to set the port number in firebase.json.
To make sure the tests run using the port set in firebase.json, run your tests a below:
```sh
firebase emulators:exec --only firestore jest
```
Above command will start the emulator, run 'jest', and stop the emulator after the tests.
## Built With
* [mobx](https://mobx.js.org/) - Simple, scalable state management
* [typescript](https://www.typescriptlang.org/) - Javascript that scales
* [jest](https://jestjs.io/) - Javascript testing framework
* [firebase](https://firebase.google.com/) - App development platform
* [npm](https://www.npmjs.com/) - Package manager
* [google cloud build](https://cloud.google.com/cloud-build/) - Build, test, and deploy on googles serverless CI/CD platform
## Authors
* **Thomas Dekiere** - *Initial work* - [thdk](https://github.com/thdk)
## License
This project is licensed under the MIT License - see the [LICENSE.txt](LICENSE.txt) file for details