React Firebase

So after a small break here i am with a brand new featture in smartcodehub
Now with smartcodehub you can actually generate a serverless working application based on on your domain models

Now if you are already famillier with firebase you can go down and see how smartcodehub can help you  out in your next project

What is firebase

Firebase is a Backend-as-a-Service — BaaS — that started and grew up into a next-generation app-development platform on Google Cloud Platform.

To get started with firebase thier is a amzing document on the official sitte of google  here I recommend you to go through it and follow along as to get started you need to have a firebase project (ofcourse you can create it afterwords from cli )

so below are the screen shott of  how to create full serverless project based on fiebase and react

Step 1 : Visit Smartcodehub and click on start now

Step 2 : Create account  

once you create your accountt you can sign in with the newly created account

Step 3 : Create Entities (Your Database tables )

go to menu expand Entities and go to create Model

you can create the entity by filling the form

We will create two tables UserRole and User

also you can have image in it create a new property image and go to propertyvalidation

now lets give a relation between entities like a user will have a userRole

create a new property called userRole and enable the hasRelationship flag

and now With has relation flag enabled if you go to property validation you will see some new context

so you have to select the entity which has relation in our case UserRole then it will enable two more selects

Select Coulumn to display is when you create entity this property will be shown in dropdown and in db select column to store will be inserted this will make more sense when we see it live

with this changs just create the resourses and you will be redirected to Entities List Page

Where you have the options to Edit your model Delete your model Make it a securitygateway (it is currently available only if you generate api )

Step 4 : Select Models and Generate Resourses

when you select the models a new button will be enables which is  generate click on it and give your requirements

we will go with react firebase and press ok thats it withing few seconds it will show one more button to download the project

Clickon that cloud icon and your project will be downloded with following project structure

Now To Enable firebase you need to get your config values

Navigate to https://console.firebase.google.com/

Go to the settings of your project scroll down and you will see a option like this

selec config it will have some secret values relates to your project copy them and replace them in project at src/services/firebase.config.js

add firebase to your app

npm install -g firebase-tools
then 
firebase login
then 
firebase init 

select what all services you need like database firestore hosting cloudfunction

minimum you have to select firestore
once done it will create few files in your project and you  are all setup correctly

go to your project do

npm i
npm run start

If You recieve Error Like below

Error: Cloud resource location is not set for this project but the operation you are attempting to perform in Cloud Firestore requires it. Please see this documentation for more details: https://firebase.google.com/docs/projects/locations

Then you need to go to the project settings in firebase console thier you will have a option like

if the location is not set set it as per your preference and then try again fiebase init and you are good to go

If  you still have some issues connection to your firestore
go to the Menu under develop Database and if you see something like

This project is set up to use Cloud Firestore in Datastore mode. This mode can only be accessed from Google Cloud Platform

just tgo to the url "Go to Cloud Platform " and select swith to native once done

try to run your code again with npm i

and thier are chances that you may see a new error in your web app

in this case go to the databse in firebase console

Change the rules with

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write
    }
  }
}

and hit publish

with change syou showuld be able to create a userrole first