B4J Tutorial [BANanoVuetifyAD3] Hosting your FireStore CRUD WebApp on FireBase Hosting For Free

Hi there

Ok granted, when it comes to creating WebApps that has to be hosted on Firebase, one has to be very careful about costs. A good friend of mine reminded me this again.
I guess for simple MVPs, proof of concepts and other things, the free tier from firebase comes very handy.

They call is the Spark Plan, it still look too good to be true for a $0/cost per month platform. These are some of the things it offererd.

So after I optimized my concept BVAD3 WebApp, I ran some simple scripts to get it hosted. It has some CRUD forms and also a leaflet map.

The deployment was easier than what I thought. Just go to hosting and follow the instructions as they are). Also when installing the Firebase CLI on your PC, just use the default parameters provided.

1. First build you app in B4J and then follow the instructions about hosting above.
2. After all that, copy all the BANano generated i.e content (assets/scripts/styles/index.html/favicon/manifest) to the public folder
3. execute firebase deploy

There is also functionality to set Github Actions and other things.

Related Content

BANanoVuetifyAD3 - Full Stack WebApp using Vuetify & FireStore (No PHP)

Happy BVAD3 Coding.

Update:

Related Content

 

[Mashiane]

Here is some inspiration.

 

[NGUYEN TUAN ANH]

Hi there

Ok granted, when it comes to creating WebApps that has to be hosted on Firebase, one has to be very careful about costs. A good friend of mine reminded me this again.
I guess for simple MVPs, proof of concepts and other things, the free tier from firebase comes very handy.

They call is the Spark Plan, it still look too good to be true for a $0/cost per month platform. These are some of the things it offererd.

View attachment 133830

So after I optimized my concept BVAD3 WebApp, I ran some simple scripts to get it hosted. It has some CRUD forms and also a leaflet map.

The deployment was easier than what I thought. Just go to hosting and follow the instructions as they are). Also when installing the Firebase CLI on your PC, just use the default parameters provided.

View attachment 133831

1. First build you app in B4J and then follow the instructions about hosting above.
2. After all that, copy all the BANano generated i.e content (assets/scripts/styles/index.html/favicon/manifest) to the public folder
3. execute firebase deploy

There is also functionality to set Github Actions and other things.


View attachment 133832

Related Content

BANanoVuetifyAD3 - Full Stack WebApp using Vuetify & FireStore (No PHP)

Happy BVAD3 Coding.

This is a very useful topic and I'm very interested
I have created a BVAD3 WebApp with MogoDB CRUD forms and also a leaflet map on B4j, it works fine on my Localhost. Now, could you please guide me step by step in detail to store my WebApp and MogoDB database on FireBasse, then install hosting to be able to access Webapp from Internet
Thank you very much .!
Best Regards

 

[Mashiane]

This is a very useful topic and I'm very interested
I have created a BVAD3 WebApp with MogoDB CRUD forms and also a leaflet map on B4j, it works fine on my Localhost. Now, could you please guide me step by step in detail to store my WebApp and MogoDB database on FireBasse, then install hosting to be able to access Webapp from Internet
Thank you very much .!
Best Regards

The app that I'm hosting is using Firebase Firestore as a back-end, no php or any other 3rd party back-end.

I dont think hosting mongo is possible unless one is directly using Google Cloud Services,

 

[NGUYEN TUAN ANH]

The app that I'm hosting is using Firebase Firestore as a back-end, no php or any other 3rd party back-end.

I dont think hosting mongo is possible unless one is directly using Google Cloud Services,

No problem, please guide me, I can use Firebase Realtime Database instead of MongoDB

 

[NGUYEN TUAN ANH]

I can also not use MongoDB but use Firebase Firestore like you to work with data
"copy all the BANano generated i.e content (assets/scripts/styles/index.html/favicon/manifest) to the public folder", you mean the public folder in Firebase Storage right?
Also, I don't understand "3. execute firebase deploy" how to do ?

 

[Mashiane]

Yes, See the first post. The image is the guide, the instructions after clicking 'hosting' in your firebase will be simple to follow.

Just note that after your first successful deploy, zip the firebase generated content so that you can unzip it again if you will rerun your bvad3 project. That helped me not to redo it again as Banano deletes the contents of your deploy folder in root.

 

[NGUYEN TUAN ANH]

i have watched this over and over again but i really don't understand how to follow it

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

Creating Vuetify Forms with BANanoVuetifyAD3 - Part 9 - Uploading Files with VFileInput This has been extracted from the Package Manager project to demonstrate how to Upload files For more details about the VFileInput, see this kitchen sink page.

www.b4x.com

Thanks any way @Mashiane

 

[Mashiane]

i have watched this over and over again but i really don't understand how to follow it

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

Creating Vuetify Forms with BANanoVuetifyAD3 - Part 9 - Uploading Files with VFileInput This has been extracted from the Package Manager project to demonstrate how to Upload files For more details about the VFileInput, see this kitchen sink page.

www.b4x.com

Thanks any way @Mashiane

I have updated the link in the tutorial to introduce one to Firebase from a YouTube tutorial as its beyond the scope of BVAD3.

 

[Mashiane]

@NGUYEN TUAN ANH , please remember, all the source code for all the threads is in Github as noted in the Mashy Teaches Post #1

 

[NGUYEN TUAN ANH]

@NGUYEN TUAN ANH , please remember, all the source code for all the threads is in Github as noted in the Mashy Teaches Post #1

Thank you very much, i am learning from you