Firebase-Instructions.md

There are just a few really easy steps to get your IoT web dashboard running on firebase:

Below are the instructions, just follow those and you're good to go:

• Go to the Firebase console page first create an account and Click on create project
  
  

* Enter a suitable project name for your project and click continue

* You may enable google analytics as per your choice and continue

* Choose a location (This represents the country/region of your organization. This does not affect where Google may process and store Customer Data for Firebase.)

* Create Project, wait till the project gets created...

* Continue:

• You will be able to see your project console page:
  
  

• Under Project Overview tab on the left side of the page, go to Build -> Hosting:
  
  

• Get started with hosting:
  
  

• Just follow the steps one by one, firebase itself will guide you very well, but thing to note, you would like to install node(if you don't have it already) from here, which includes the tool npm that we need (choose the LTS version and the package according to your OS, to start with): https://nodejs.org/en/ -See their documentation/guides for setting path and environmental variables
  
  

• You may now open a new folder in VS code dedicated for your project, press ctrl + shift + ~ to open terminal and starting putting the commands you see there/below.
• You will need to login locally to be able to push changes to the hosted site/web-app when you are deploying:
  
  
  1. Logging in firebase login: type in the command and press (Y/n) as per your choice:
     
     
  2. Firebase will take you to the authorization page, from there choose your google account on which you were building the firebase project and Allow, after login succeeds, the page will show something like this:
     
     

• Initializing firebase firebase init:
  
  

1. Press Y to contiue
2. Use arrow (↑/↓) keys to navigate and SpaceBar to select/deselct, finally press enter ↵ to proceed. We will need Realtime Database and Hosting as a minimum for our project, you may select other available choices as well (depends on your firebase plans Spark/Blaze)
   
   

• Choose: Use an existing project
  
  
• You will see all your projects (present in your firebase account) listed
  
  
• Setup RTDB:
  
  
• Choose a nearby location:
  
  
• Press Enter ↵ to choose the default option:
  
  
• Now you will have to choose a folder from where your page will be deployed, if you choose default, it will make a directory called public inside your current folder.
• See the options chosen below, you may choose as you like, however, in this project, I have decided to make it a single page application without any git based automatic deployment (however you may try out, instructions not included here).
  
  
• Now, as you navigate through your projet folder, you will see a new folder called public and under it you will find a file called index.html, you can safely delete that file, as we have prepared an index.html file already.
  
  
• Now in our repository, you will find the necessary index.html page in the Webpage folder, copy that index.html and put it into the public folder inside your project folder.
  
  
• Now almost everything is done, go to the console page, click next, copy the firebase deploy command and put it in the VS code terminal of in project folder and press enter ↵. Note down the Hosting URL.
  
  
• So you have successfully deployed your webpage on firebase hosting, now click on that URL and you will see that page. However there are still some minor steps left after hosting.
  
  

Creating a Realtime Database

• Create a database
  
  
• After you have created your RTDB, you will see that the message saying "Connecting to server...!" on top of your webpage has vanished, which means your webpage has successfully connected to the database!
  
  
• Now try toggling the switch and changing the slider a little bit, and observe your RTDB console, you will see a new object is present, which concludes that you are not able to write to the database from your webpage, congrats!🎉
  

An important point for debugging and developing firebase web app:

• While building the page, you may not want to deploy your page to firebase until it is ready, if that is the case, then you would want to host your webpage locally by using the command firebase emulators:start you will see the host and port in the terminal.
  
  
• After you are done with debugging, just press Ctrl+c on your keyboard to interrupt and stop the local server and then you may deploy to push the changes.