Motivation

I thought it would be nice to have a react.js starter project generic enough to serve multiple purpose. I would like it to have firebase integration, has a data grid, and has a chart. So, I created Ferrorod: a Firebase front-end starter project based on MUI, React hooks, and Google auth. The accompany projects ferrofunctions consists of Firebase functions for user account administration. Ferroadmin, a Firebase admin app for ferrorod front-end. I am happy to say the project is kind of works and mostly happy with the result:

What I don’t like about my project are the react-table I am using is give me a number of errors and at times there are too many page loads that don’t seem necessary. If I am going to make a production version of the web app, I would more likely select a commercial data grid instead of an open source one. Not that react-table is not production ready, it is more like what else can go wrong with the way I am using it. If I have a commercial data grid, I would have a more ready made data grid. React-table is more like a data set or “headless” table. I have not try a commercial data grid yet so don’t know how that stacks up against react-table.

There are a lot I like about ferrorod, but I wonder what I can do better. One problem with working alone is I am usually working with doubt. So, it would be nice to compare my code against someone else’s approach to the same problem. So, I spent about $150.00 to get another starter project from divjoy. The GUI is not what I am looking for but I wanted to see what it can offer. Below is a walk-through of how I set it up.

Default Setup

There are a lot of integration needs to happen and I only have firebase account. The strange thing is the project comes with some firebase credential. I am thinking this is some sort of demo project. So, what happens if I just follow the README, build and run the project as is. First problem I ran into with the npm install:

npm install
npm WARN tsutils@3.19.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
audited 1832 packages in 10.107s83 packages are looking for funding
run `npm fund` for details
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details

This is one thing I don’t like about node JS. The high severity vulnerability patch comes up often. I don’t want to force fix. That could break my environment.

sudo npm install -g vercel
Password:
> vercel@21.1.0 preinstall /usr/local/Cellar/node@10/10.15.3/lib/node_modules/vercel
> node ./scripts/preinstall.js
/usr/local/Cellar/node@10/10.15.3/bin/vc -> /usr/local/Cellar/node@10/10.15.3/lib/node_modules/vercel/dist/index.js
/usr/local/Cellar/node@10/10.15.3/bin/vercel -> /usr/local/Cellar/node@10/10.15.3/lib/node_modules/vercel/dist/index.js
+ vercel@21.1.0
added 101 packages from 114 contributors in 7.104s

What is vercel and why do I need it? ok, it is some kind of deployment tool but might have some of their own backend infrastructure as a service thing. Don’t know why I would need that if GCP/Firebase is full of infrastructure.

vercel dev
bash: vercel: command not found

Why the npm install don’t do a full job and update my path? Kind of fixed it with:

yarn global add vercelvercel login
Vercel CLI 21.1.0
We sent an email to <email>. Please follow the steps provided inside it and make sure the security code matches Rare Zonkey.
✔ Email confirmed
Congratulations! You are now logged in. In order to deploy something, run `vercel`.
💡 Connect your Git Repositories to deploy every branch push automatically (https://vercel.link/git).
GHL >> vercel dev
Vercel CLI 21.1.0 dev (beta) — https://vercel.com/feedback
? Set up and develop “~/Documents/Github/divjoy-project-2”? [Y/n] y
? Which scope should contain your project? <user name>
? Link to existing project? [y/N] n
? What’s your project’s name? divjoy-project-2
? In which directory is your code located? ./
Auto-detected Project Settings (Create React App):
- Build Command: `npm run build` or `react-scripts build`
- Output Directory: build
- Development Command: react-scripts start
? Want to override the settings? [y/N] n
🔗 Linked to stliang/divjoy-project-2 (created .vercel and added it to .gitignore)
> Running Dev Command “react-scripts start”
ℹ 「wds」: Project is running at http://192.168.86.131/
ℹ 「wds」: webpack output is served from
ℹ 「wds」: Content not from webpack is served from /Users/guanghualiang/Documents/Github/divjoy-project-2/public
ℹ 「wds」: 404s will fallback to /
Starting the development server...
> Ready! Available at http://localhost:3000
Compiled successfully!
You can now view my-divjoy-project in the browser.Local: http://localhost:3000
On Your Network: http://192.168.86.131:3000
Note that the development build is not optimized.
To create a production build, use npm run build.

The above is the web app started by vercel. So, it is running with default settings. Not too bad. To use some extra features,the app comes with different levels of access. That is good, I wonder if the app is using custom claim from Firebase.

Upon further inspection of the code, it does not seem to use Firebase custom claim. This could means the authorization is not controlled on the server side. I need more time to look into this as it is a concern when authorization is done on the client side.

Custom Setup of Divjoy

Now that I have a working Divjoy project using the demo / default Firebase project. It is time to update the Firebase credential to point to my own project. The instruction to setup Firebase is a little dense. I do have existing Firebase projects but I don’t want to reuse them. So, it would be best to just start a new one and follow the instruction exactly.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store