Free Google Firebase Hosting in Wappler!

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 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:


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 to it!

So in this example your website
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:


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.


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:


When done you will see:


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


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:


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:
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 or 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
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!


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!


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:


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

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.

1 Like

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.


Nearly there. Have set up Firebase in localhost (although took me a while to release I had to enter: “firebase serve” into the terminal to kick off the the localhost:5000

I just can’t get it to work in

Looked at Net Ninja (where I found the Firebase Serve command) but deploying firebase just works for him too.

I can happily get on and use Localhost, but until I can deploy in Live, can’t be confident I can get this to work inside Wappler. I’m going to try to launch a static site using just Visual studio code, just to see.

BTW - My Terminal in Wappler is really buggy, have to VSC more than I would like to avoid input errors.

It’s working :blush: Just needed a bit of time to update … I’m just so impatient

Thanks, Guys. Going to test and test til I’m 100% happy with it all, but really good job. This is closer to my webflow experience, so onboarding is much easier for us No codies.

1 Like

Starting a local web server, as explained above is just as easy as a button click:

no need to enter firebase serve - the toolbar action does that for you.

Please report the bugs as separate topics

1 Like

After enabling experimental features in the global settings I still couldn’t find the option to use Firebase. After some trial and error, I realized that it’s not available in apps that are created in the mobile section of the project manager but is for web apps. Is that on purpose?

Yes - mobile apps in Wappler are cordova based Hybride apps that get published to the Apple AppStore or google Play Store.

Google firebase hosting is for websites currently. If you want to make PWA (progressive web app) - then you should indeed go for a web project. Then you can also use Google Firebase Hosting for it.

1 Like

Any word on multiple Firebase Hosting targets?

You can already have as many Firebase hosting targets as you want…

Is there some sort of guide on this? Changing the web server url isn’t working…

Is this possible yet? If not could you recommend me a database solution to use with firebase.

This looks like a great feature but to date I am having an issue with the set-up. I have managed to get to the point of logging into Firebase via Wappler but I keep receiving the error ‘Error Logging Out!’ - any ideas?

You probably need to update the Firebase tools to the latest version.

Open a Terminal in Wappler


and enter:

npm install -g firebase-tools

Hi George,
I am getting the following error:

Pauls-iMac:ayden Paul$ npm install -g firebase-tools
npm WARN deprecated request@2.88.2: request has been deprecated, see
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/firebase-tools/node_modules/protobufjs/node_modules/@types/node
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/firebase-tools/node_modules/color-string
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/firebase-tools/node_modules/@types/node
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/firebase-tools
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/firebase-tools/node_modules/protobufjs/node_modules/@types
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/firebase-tools/node_modules
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/firebase-tools/node_modules/@types
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules/firebase-tools/node_modules/protobufjs/node_modules/@types/node
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules/firebase-tools/node_modules/protobufjs/node_modules/@types/node’
npm ERR! [Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules/firebase-tools/node_modules/protobufjs/node_modules/@types/node’] {
npm ERR! errno: -13,
npm ERR! code: ‘EACCES’,
npm ERR! syscall: ‘access’,
npm ERR! path: ‘/usr/local/lib/node_modules/firebase-tools/node_modules/protobufjs/node_modules/@types/node’
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/Paul/.npm/_logs/2020-10-09T08_27_50_804Z-debug.log
Pauls-iMac:ayden Paul$

Sorry I didn’t knew you were on a Mac, in that case just prefix the command with sudo