React, Redux & Firebase “The Net Ninja” app tutorial Deployment- Part 1

There is a great series of videos on how to set up this project by the Net Ninja  (https://www.youtube.com/playlist?list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3) The first video is:

There is also a github repository with all the code here, you have to look at the branches to get the individual video lessons.  So from your VS Code terminal >git pull origin lesson-4 (example for a project lesson you want to follow). There is a lot of learning in the course, and it’s the first time I’ve seen Redux used. I’ll need to get my head around that sometime.

What I’m interested in is the firebase deployment, for 1/ firebase, 2/ Authentication, 3/ Database, 4/ Cloud functions.

So I’m jumping to the end lesson, downloading the code and then watching the relevant videos on how to connect the code to firebase and its configurations. I hope to have an operational app at the end.

Setting up a Firebase project and getting the config data

So I’ve logged into my Firebase account and created a new project. Initially it offered me some script links for my app but I went back to dashboard and used the settings to get a config file code as per the video & copied/pasted that into the code. This I pasted into the React-Redux-Firebase-App\marioplan\src\config\fbConfig.js file as per video 15 in the series:

I also went to main directory (top level) and ran >firebase init so that firebase was initialised in the project. I then ran >npm start and got the sign in page:

So I’ve still got to create and hook up 1/ the Database & 2/ Autorisations.

Database setup

So video 16, setting up the database:

I did have an issue on location, good learning for later. The Database can be located in Google Cloude Srver in Australia which is closest to NZ.

The Cloud Functions neares place is asia -northeast 1, but I stuffed up and chose the one above asia -northeast 1 which would need me to put cloud functions into asia-east 2. Oops, lesson learned for future apps.

In fact., looking below, I should have just chosen asia -northeast 1 for everything to reduce latency between cloud functions & DB since the cloud Function needs to check the DB.

I tried to see if I could delete the Database and couldn’t see where to do that. Never mind, a lesson learned. Actually, singapore would be the closest, see page for chart.

Next populate collections, first projects then users and notifications later

Setting up Authentication

vid 21 on setting up email and password in Firebase , pretty simple for this part, only one box tick, but have to connect to database too to store login id’s. In vid 28 make a collection for user id’s

So I can now login and info ID is stored, but I’m not sure where email & password are kept, actually they are being kept online in the Authentication app in firebase, so the UID passes across to the user table- cool.

There are 3 parts I need to deal with,1/ the cloud functions for notifications and 2/the security on the firebase setup as its open currently for development & 3/ I need to deploy the site to the cloud.

The project is a bit simple as you can create a project, but you also need to be able to edit and delete it (CRUD) , we have the first 2 items but not the last 2.

Cloud functions for notifications

This was something I tried before, Deploy Node & Python on Google Cloud function- a first attempt but NOT successful. So am loooking forward to seeing if I can get this up and running.

so in project >firebase init then when it asks questions choose cloud functions with space bar and then Enter. Then use an EXISTING PROJECT and it will show your projects and you choose one. Next it asks what

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? No ? Do you want to install dependencies with npm now? Yes and then let it install them.

In the vid it goes through setup for web page but I’d done that at the outset, so I’ll go back to that later. Vid below for setting up cloud function, this one is not triggered by https reques though.

The code is already written for the cloud function and so it has to be deployed, but we only want to deploy the Function, not the whole website, so note in the deploy below the –only functions addition.

\React-Redux-Firebase-App> firebase deploy –only functions

Disaster & stuff ups with cloud functions

I couldn’t get notifications to work. I think I have a problem with the Functions not having a location and I can’t see how to give them a location, so I’m going to make a new project and make the database in.

So I made a new database and populated it as the previous one and tried to run the functions. I put the new authentication into the main scr config directory file and saved that, so now thecode is pointing to the new Firebase project.

I think I overwrote the tutorial React-Redux-Firebase-App\functions> index.js file which had a trigger on document change too.

Also I tried to start a web page deploy as well and used the >dist folder , and I think on an earlier instance the >build folder too.

I also had problems with authorisation for the Cloud function from github needing permission from the original repository owner, so I deleted the .git directory and then thr .firebase directory.

I also seem to have 2 function directories:

And in the top level functions directory I simplified the funxction to an HTTPS request, also adding the .region(“asia-east2”) to the function to make sure its running in WHAT I THOUGHT was the same region as the database:

const functions = require("firebase-functions");
exports.helloWorld = functions
  .region("asia-east2")
  .https.onRequest((request, response) => {
    response.send("Hello from Firebase!");
  });

There was already a function that ran from a US server, so when I Deployed again it told me to delete that one, which I di then I got the result:

But this is running on the older project , not the new one I setup.

So its really buggered. I think I’m going to have to try and rebuild from scratch. That is the good thing about github, you can just pull down the code again.

Fixing & Re deploying app

cleaning out directories & re-seting up

The file structure had a main directory with marioplan as a sub-directory. I ended up with 2 folders called function. So I deleted all the upper files, also the firebase.json and the packages.json files and did a >firebase init & a >npm init on the marioplan folder. Because I’d deleted all the packages info I copied thee package.json across from a copy of the folder I had and then did an >npm install to install all the node_modules or check that they were there.

I then had a difficulty with the firebase/app in the config file, so I had to uninstall and re-install firebase >npm uninstall firebase and >npm clear cache then >npm i firebase

Then I ran >npm start to get the browser running. To check what was on the page.

Functions

I’m not quite sure what happened but I did a >firebase deploy –only functions and looked in the functions area in the browser and they were there. They had deployed to the server, so they are running.

I used the boilerplate code for the Hello World function to test that the functions were deployed and running and they were.

const functions1 = require("firebase-functions");

exports.helloWorld = functions1.https.onRequest((request, response) => {
  response.send("Hello Woreld Test");
});

Maybe because the functions are loaded at US-Central1 instead of Asia-East2 their is a lag in their activations, but they are working now.

So the issue is how do I make sure they deploy to the right region. I did have

const functions1 = require("firebase-functions");

exports.helloWorld = functions1.https.region('asia-east2').onRequest((request, response) => {
  response.send("Hello Woreld Test");
});

But on running the code it shows errors (I think once I did do it for this specific function on its own and it may have worked, but I get this error when I try and get the functions to run with the .region(‘asia-east2’) method in the middle of its string

Even though the database is located at asia-east2 it still deploys the functions to us-central1.

It works, I’ll live with it for the moment, but I’ll see if I can get the functions to be deployed where I want.

End comment

First of all, thank you Mr “The Net Ninja” for posting the videos and also the code. That has been a fabulous starting point for the Firebase learning skills that I want to develop. I’ve cocked it up, but that is my bad. The redux stuff way over my head but I can see the idea of the parts of it that you demonstrated. I really appreciate you sharing the code, thank you.

I’m happy with what I’ve learned. I have a little more confidence with playing with Firebase, which is pretty cool in my opinion. I need to bugger it up a few more times before I’m comfortable with it.

I drew a blank when I thought I’d set up the notifications cloud functions and they didn’t work. I was a bit stumped, but going back and writing the boilerplate https request told me that something was happening, so that has given me a bit of confidence to go back and rebuild the project firebase again. So not a total failure, but a partial success.

The videos peeved me off in the post, I thought I was cutting/pasting correct code for the video I was watching, but it turns out I was copying video 1 into all the instances, so I had to go back and delete them all. Something I’ll need to keep an eye on in future posts.

So, set up a firebase project, created an authentication in Firebase, created and populated a database in firebase & deployed some functions.

I could deploy the website to firebase but I don’t see the point as I would need to have an edit and delete buttons for the projects to make it functional. That is not my objective at this time. A good bit of learning though.