Getting Started

Prerequisites

You also need to be familiar with HTML, CSS, SASS, JavaScript (ES2015) and React with React Hooks.

Getting started

  • Clone the project into your computer! (more info on cloning a repository).
  • Create a Firebase Project in the Firebase Console.
  • In the Database section set up your database as a Real Time Database as locked mode (later on we will setup our own custom rules).
  • In the Storage section set up your storage bucket with the default values provided by Firebase.
  • Setup your sign-in providers in the Authentication section. On the Sign in method tab, enable Email/Password provider with the Email Link feature.
  • Copy the config values you get from you Firebase dashboard's Web Setup option and enter them into a .env file with the same structure as the .env.example in the root directory of the repository.
  • Setup the image resize extension in your Firebase project. For instructions go to the File upload section.
Make sure your Firebase Project from the Firebase Console has the Blaze pricing plan

Setting up the Firebase project locally

First we need to install the Firebase cli tool and then initialize our new Firebase project.
Run the following commands in the root of the repository:
1
npm install -g firebase-tools
Copied!
1
firebase init
Copied!
Now you will need to setup the services
Select the firebase project you created in the previous step, when prompted select the services you want to setup and check Database, Functions, Hosting and Storage.
In case you want to use Firestore instead of Realtime Database you should check the Firestore option instead of the Database one.

Database/Firestore:

  • Leave the default name for our rules file.
  • Select No when prompted if you want to overwrite the file containing our rules.
In case you checked Firestore, it will ask you about overwriting the indexes, you should select No

Hosting:

  • Set build as our public directory for our hosting files.
  • Select Yes when asked if we want our hosting to be configured as a single page application.

Storage:

  • For the file we should use for the Storage Rules select storage.rules.

Functions:

  • For the language to be used in our functions select TypeScript.
  • If we want to use TSLint as our linting tool select No.
  • If we want to overwrite the package.json, .gitignore and index.js select No.
  • Then select Yes so that we install our dependencies with npm.
Run the following command on the functions/ folder :
Using Node v12.10.0 or higher
1
npm run setup-firebase
Copied!
You'll get prompted to enter the path to you service account key file. To generate it, go to your Firebase Dashboard, Project settings tab and then to Service accounts option, right there you can generate your private key (more info on this here).
You'll need to enter the email and password for the admin account of the admin dashboard.
Lastly you'll be asked for the database of your choice, you can choose between Realtime Database or Firestore. You can check more information about this here.
With this in place, you've successfully created your admin account for the dashboard.

Setting up the React frontend

Run the following commands in the root of the repository:
Using Node v12.15.0 or higher
1
npm run setup-admin-dashboard
Copied!
If you go to your dashboard you'll see all the Firebase services are now deployed.

React frontend

Folder structure

1
src/
2
├── assets/
3
│ └── users-default-logo.svg # Images and other static content
4
├── components/ # UI components
5
│ └── Component/
6
│ ├── __snapshots__/
7
│ │ └── Component.test.js.snap
8
│ ├── Component.test.js
9
│ ├── Component.module.scss
10
│ └── index.js
11
├── pages/ # React components that represent website pages
12
│ ├── Page/
13
│ │ ├── __snapshots__/
14
│ │ │ └── Page.test.js.snap
15
│ │ ├── Page.test.js
16
│ │ ├── Page.module.scss
17
│ │ └── index.js
18
│ └── Router/ # All the routing related stuff
19
│ ├── __snapshots__/
20
│ │ └── Router.test.js.snap
21
│ ├── Router.test.js
22
│ ├── paths.js
23
│ └── index.js
24
├── state/ # Where we have our actions and reducers
25
│ ├── actions/
26
│ │ └── action.js
27
│ ├── reducers/
28
│ │ ├── reducer/
29
│ │ │ ├── index.js
30
│ │ │ └── reducer.test.js
31
│ │ └── index.js
32
│ └── store.js
33
├── utils/ # Helper functions
34
│ ├── index.js
35
│ ├── util_1.js
36
│ └── util_2.js
37
├── hooks/ # Custom hooks
38
│ ├── index.js
39
│ ├── hook_1.js
40
│ └── hook_2.js
41
├── languages/ # All the JSON files for each language
42
│ ├── language_1.json
43
│ └── language_2.json
44
├── index.js
45
├── index.scss
46
├── serviceWorker.js
47
└── setupTests.js
Copied!

Installing dependencies

1
npm install
Copied!
You can use yarn as well if you want.

Development server

1
npm start
Copied!
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You'll also see any lint errors in the console.

Running tests

1
npm test
Copied!
Launches the test runner in the interactive watch mode.

How to deploy

1
npm run deploy
Copied!

Environment Variables

Refer to the .env.example file in the root folder of the project to see what variables are currently in use.

Last modified 1yr ago