Skip to content

React Admin + Firebase πŸ”₯ = πŸŽ‰ πŸŽ‰

License

Notifications You must be signed in to change notification settings

BlackBoxVision/ra-firebase-starter

Repository files navigation

πŸ”₯ RA Firebase Starter πŸ”₯

At BlackBox Vision we use heavily React Admin to build internal systems for our clients.

Also, we rely on firebase a lot for MVP products. After a lot of work and improvements over time, we've created this starter that includes everything you would need to work with RA and Firebase.

πŸ“– Table of contents

✨ Requirements

To use this template, you need (obviously) to have Node.js and NPM at least.

If you don't you can install them by using NVM. If you're a windows user you can install them with NVM for Windows.

πŸͺ„ Getting Started

To use this template the only thing you need to do is perform a fork from our repo, or in case you don't want to do that you can download the zip repo's version.

πŸ’» Dependency Management

As you can see, this repository only has a package-lock.json which means that NPM is vastly used at BlackBox Vision for dependency management in Node.js.

You can feel free to bring your own package manager when using this starter, we don't want to limit any team wanting to use our repo as a baseline for building internal backoffice systems.

🏒 Project Structure

Still a WIP πŸ˜…, we'll be documenting ASAP our decisions on the project structure architecture.

πŸ”¨ Firebase Setup

If you're new to Firebase, check out this video on how to create a Firebase project.

1. Authentication

All requests must contain a Bearer Token to access Firestore data. To enable this, you need to activate Firebase Authentication manually.

  1. Go to the "Sign-In method" tab.
  2. Choose "Native Providers", then select "Email/Password".
  3. After that, navigate to the "Users" tab.
  4. Create a new admin user with the email "[email protected]", or any other email of your preference.

This will allow to log in from the page /login.

2. Read/Write data

Important❗: Before you can create or read data directly from the database, make sure to activate Firebase Firestore manually from Firebase Console.

3. Upload Images

Important❗: To enable file uploads for images, you need to activate Firebase Storage manually from Firebase Console.

πŸƒβ€β™‚οΈ Running the project

To run the project you need to perform the following steps:

  1. Install all the project dependencies
npm i
  1. Add an .env file like the following one
VITE_APP_FIREBASE_APPLICATION_CREDENTIALS=your-firebase-config-object
  1. Run the app
npm run dev

When finished building your app for development, it'll be available at http://localhost:5173.

πŸ”‹ Available Scripts

Since this project is VITE based, you inherit all commands, that are the following ones:

  • Start: Start dev server and launch your application.
npm run dev
  • Build: Build will generate a production build of your app which then can be uploaded to any place where you want it to be hosted and served to end users.
npm run build
  • Preview: Locally preview production build.
npm run preview

About

React Admin + Firebase πŸ”₯ = πŸŽ‰ πŸŽ‰

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published