The code in this repository is based on the
Awesome Apps with React Hooks and Firebase [Video]
course by Reed Barger.
Code is forked from carltonwin8/hooks-news.
The code has CRA frontend and Firebase backend and hosting at Firebase.
- master: typescript * this one
note: we are not running full strict mode (https://dev.to/briwa/how-strict-is-typescript-s-strict-mode-311a) - javascript: javascript
Use npm install -g firebase-tools
for firebase serverless backend functions.
firebase --version
# 7.13.0
Get help: Firebase CLI reference
Use Admin GUI: Firebase Portal
Use firebase logout
, then firebase login
to be authenciated at the cli.
When you login you give Firebase CLI permission to access your GCP account.
If you want to remove the permission goto Apps with access to your account
Create a project for your app in the Firebase Portal. Don't choose analytics, if you are just testing Firebase.
Mine was named hooks-news-rasor
.
Some GCP service account for the app was created at some point.
Use firebase init functions
to initialize the ./functions
directory.
Select Use an existing project
- select the one you created.
Language: Select Javascript, since this CRA is not set up for TypeScript.
Select a number of options such as db, lang (js,ts), eslint, etc and then
install the node dependencies:
cd functions
npm install
cd ..
Edit index.js
in the ./functions
folder. Add functions from the course:
const functions = require("firebase-functions");
const admin = require("firebase-admin");
//const { firebaseConfig } = require("../src/firebase/config");
// const { LINKS_PER_PAGE } = require("../src/utils");
admin.initializeApp({
credential: admin.credential.applicationDefault(),
databaseURL: "https://hooks-news-rasor.firebaseio.com"
});
const db = admin.firestore();
// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
exports.linksPagination = functions.https.onRequest(
async (request, response) => {
response.set("Access-Control-Allow-Origin", "*");
let linksRef = db.collection("links");
const offset = Number(request.query.offset);
const snapshot = await linksRef
.orderBy("created", "desc")
.limit(5)
.offset(offset)
.get();
const links = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
response.json(links);
}
);
... to provide your backend.
Verify you have no
- authentication
- database (called Firestore)
- file storage
- web hosting
- serverless functions
- or other resorces/features ... in your project yet.
In authentication/providers select Email/Password and enable.
In settings/general goto the bottom right and add a web app. Again name it hooks-news-rasor
and press Register.
This will provide you with some code. Grap the part within the <script>
tags:
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaxxxxxxxxxxxxxxxxxxxx9VmkND65lJdtWUM",
authDomain: "hooks-news-rasor.firebaseapp.com",
// https://console.firebase.google.com/project/hooks-news-rasor/database/hooks-news-rasor/data
// https://console.firebase.google.com/project/hooks-news-rasor/database/firestore/data
databaseURL: "https://hooks-news-rasor.firebaseio.com",
projectId: "hooks-news-rasor",
storageBucket: "hooks-news-rasor.appspot.com",
messagingSenderId: "682999999999",
appId: "1:682999999999:web:89560ebd18605aaaaaaaaa"
};
// Remove these lines:
// Initialize Firebase
// firebase.initializeApp(firebaseConfig);
// Add this line:
export default firebaseConfig;
save this to /src/firebase/config.js
and
- add the line with
export default firebaseConfig;
and - comment out the
firebase.initializeApp
line.
Optionally upgrade your dependencies with npm update
Now get dependencies in your CRA project with npm install
The above created a Realtime Database, which is for automatic push of updates to clients.
This code is dependent of Cloud Firestore, which is a normal document DB.
From database create a new Cloud Firestore.
To be able to access the db, we'll use Basic Security Rules - Mixed public and private access.
In Cloud Firestore rules add:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read: if true;
allow create: if request.auth.uid != null;
allow update, delete: if request.auth.uid == resource.data.postedBy.id;
}
}
}
Then deploy only the functions folder with
firebase deploy --only functions
.
Verify you now have one serverless function (called linksPagination
).
The public link to the function you should paste in /src/components/Link/LinkList.js
.
Build code via npm run build
. If this goes well, then run the app in dev mode with npm start
.
This will open a broswer. Press login
an add yourself as a user.
You can see your account in authentication/users.
Now press submit
and add a link.
Setup hosting firebase init hosting
.
Questions:
? What do you want to use as your public directory? (public) build
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) N
? File build/index.html already exists. Overwrite? (y/N) N
Info:
i Writing configuration info to firebase.json
...
i Writing project information to .firebaserc
...
.firebaserc
: Hidden file that helps you quickly switch between projects withfirebase use
Use firebase deploy
to deploy the functions and host the html.
Result from the deploy are:
Project Console: https://console.firebase.google.com/project/hooks-news-rasor/overview
Hosting URL: https://hooks-news-rasor.firebaseapp.com
carltonwin8's Hosting URL: https://hooks-news-app-f32dc.firebaseapp.com
The End.