REVIEW: Free Google Firebase Hosting in Wappler!

Note: this is an experimental feature, so you need to turn on Experimental features in your Wappler Global options / System first

What is Google Firebase Hosting

We always got many questions about hosting of your web site or app. Specially for new users hosting can be scary in the beginning. There are so many options with different prices and specs, some more technical other less. So it is easy to get confused.

Not any more! Meet Google Firebase Hosting - the free hosting to get you started with Wappler. In just a few clicks you will have your web site or app up and running live - at no additional hosting costs!

Google Firebase Hosting makes it really easy to get started and it has a very generous free tier called Spark Plan that for the most sites will be actually more than enough.

Of course you can’t run Server Side languages as PHP and build complex backends, but as we are moving towards to more client side dynamic web apps and mobile apps - it will just do fine!

Getting started with Firebase Hosting

To get you started with Firebase Hosting, first thing you need to do is just create a Firebase Project

Create a Firebase Project with Google

Just go to https://firebase.google.com/ and click on the “Get started”, sign in with your Google account and you will see the Google Firebase Console - the online project manager.

Once at the Firebase Console - you can just create a new project:

image

Enter your project namd and pay special attention to the project ID below it! This will become your live web site name with the addition of .web.app to it!

So in this example your website my-great-wappler-project.web.app
Do note that you can also add any custom domain to it - so you are not bound to that name but it is a nice way to start. The default name or your custom domain get automatic SSL certificates, so you don’t have to do anything to build secure sites.

In the next step, you can enable Google Analytics if you want, but I will switch it off.

When the project is ready you will see:

image

And you are done!

You will see the Firebase Project Manager (Console) when you click on continue.


But you don’t have to do anything there for now - you can go to Wappler

Creating a Wappler Project connected to the Google Firebase Hosting

Let’s open Wappler now and go to it’s Project Manager.
Choose there to create a new project and choose one of the default templates to get started:

In the new project settings, just give your project a name (1), choose a folder locally to store it (2), choose the hosting type “Google Firebase Hosting” (3) and specify the Firebase Project ID (4) that we used to create the Firebase Project.

image

If you don’t remember your project ID - just click on the Manage Firebase Projects to go to the Firebase Manager, where you can find the project ID in the project settings.

The first time your create a Firebase Hosting project, you will be prompted to run a system check if you have NodeJS and to install Firebase Tools if needed. So choose Yes:

image

When done you will see:

image

The first thing to do when connecting you Firebase Projects is so also sign in with Google within Wappler, So choose Yes again.

image

You will be redirected to the web browser so you can choose your Google account and sign in.
After that go back to Wappler and you should see:

image

Developing and Testing Locally

The Firebase Hosting has a nice build-in local server that you can just start:

You will see it running. You can either refresh your Design View or open the link in the browser to test.

You will see the dynamic data rendered once you refreshed and also the caales made to the local web server:


You can easily switch between the Output pane and the Local Web Server pane:
image
Or click on the “X” to close the Local web server if you don’t need it.

Deploy Your Site Live!

You can do any modifications of the web site your want and then save the pages.
When you are ready to deploy your site to live, just click on the “Deploy” button.

When it is all done, you will see:

You can just click on the link to see your site live in the browser!

Note your site is available under both names project_id.web.app or project_id.firebaseapp.com or later on also under custom domain if you assign it one.

Congratulations you just deploy your first Wappler Firebase Hosted Site!

Managing your Firebase Web Site

When you want you can always jump to the Firebase Project Manager Console, to check the settings and usage of your Firebase hosted site. Just go to https://console.firebase.google.com/
Click on your project and then Hosting.

Domain names

You will see here do domain names your site is available on and asiign a custom domain if you want.

You will also see the latest deploys and even revert them if something goes wrong!

Usage

You can also keep an eye on the web site usage to see how many visitors you got and the traffic you have. And see how it fits the free tier.

Database Usage?

As you noticed Google Firebase Hosting currently support static html files and no server side PHP code.

But don’t worry - soon we will be adding also Client Side Database and support for Google Firestore / Realtime Database - so you will have your database connections right where you need them to build even more sophisticated web sites and apps!

8 Likes

Looking forward to that. However pretty please triple check the implementation.

I wouldn’t want to be part of the next firebase invoice horror story :joy:

https://hackernoon.com/how-we-spent-30k-usd-in-firebase-in-less-than-72-hours-307490bd24d

9 Likes

Yes firebase database is a NoSQL database and it requires a different way of thinking, see also:

1 Like

Trying to set this up as instructed - I have NodeJS v12.16.0 installed, however it won’t let me install firebase tools. Keep getting request @2.88.2: request has been deprecated see https://github.com/request/request/issues/3142

Tried installing /updating nodeJs, restarted Wappler, still nothing. I have Homebrew installed too.

Then a lot of errors - Want to get this working as can see me using Firebase for a while, as I good amount of GCP credit.

Please help - Wappler Newbie

Oh it’s a security thing - the command should have being prefixed with sudo.

Open a regular terminal and just execute:

sudo npm install -g firebase-tools

We will improve that later on.

Thanks, will give it a whirl tomorrow to test it out. Looking forward to the dynamic stuff in firebase when your ready. Like this current track, especially for newbies like me coming from webflow.

Will learn more advanced stuff with servers as I go, but this as well as docker makes the initial learning curve much easier.

2 Likes